TypeScript आयात ऑप्टिमाइझ करणे: मल्टी-लाइन फॉरमॅटसाठी सुंदर आणि ESLint कॉन्फिगर करणे

TypeScript मध्ये आयात विधाने सुव्यवस्थित करणे

मोठ्या TypeScript किंवा JavaScript प्रकल्पांवर काम करताना, दीर्घ आयात विधाने आढळणे सामान्य आहे, विशेषत: एकाच मॉड्यूलमधून एकाधिक सदस्य आयात करताना. जरी या ओळी सुरुवातीला निरुपद्रवी वाटल्या तरी त्या सहज आपल्या ओलांडू शकतात सुंदर कॉन्फिगरेशनचे प्रिंट रुंदी सेट करणे, कोड वाचणे आणि देखरेख करणे कठीण करते.

तुमचा कोड व्यवस्थित आणि वाचनीय ठेवण्यासाठी, या आयातींचे स्वरूपन स्वयंचलित करणे महत्त्वाचे आहे. सारखी साधने सुंदर आणि ESLint लांब आयात विधाने स्वयंचलितपणे एकाधिक ओळींमध्ये विभाजित करण्यासाठी सानुकूलित केले जाऊ शकते. हे सुनिश्चित करते की तुमचा कोड स्वच्छ आणि सुसंगत राहतो, तुम्ही सेट केलेल्या फॉरमॅटिंग नियमांचे पालन करतो.

तथापि, इच्छेनुसार आयात विधाने स्वयंचलितपणे स्वरूपित करण्यासाठी ही साधने कॉन्फिगर करणे अवघड असू शकते. Prettier आणि ESLint दोन्हीच्या डीफॉल्ट सेटिंग्ज अनेक स्वरूपन समस्या हाताळत असताना, जेव्हा अनेक ओळींमध्ये लांबलचक आयात विधाने खंडित करण्याचा विचार येतो तेव्हा ते कमी पडतात.

या मार्गदर्शकामध्ये, आम्ही तुमच्या TypeScript प्रोजेक्टमध्ये इंपोर्ट स्टेटमेंट्स योग्यरित्या फॉरमॅट करण्यासाठी Prettier आणि ESLint कसे कॉन्फिगर करायचे ते एक्सप्लोर करू. तुमच्या कोडबेसमध्ये सातत्य राखून मल्टी-लाइन इंपोर्ट्स साध्य करण्यासाठी आवश्यक असलेल्या सेटिंग्जचा आम्ही अभ्यास करू.

TypeScript मध्ये मल्टी-लाइन इंपोर्ट्ससाठी Prettier आणि ESLint कॉन्फिगर करणे

वरील स्क्रिप्ट्सचे मुख्य लक्ष्य कॉन्फिगर करणे आहे सुंदर आणि ESLint TypeScript प्रकल्पातील अनेक ओळींवर लांब आयात विधाने स्वयंचलितपणे स्वरूपित करण्यासाठी. एकल अवतरण आणि अनुगामी स्वल्पविराम यांसारख्या कोडिंग शैली परिभाषित करण्यासाठी आणि कोड कसे गुंडाळले जावे हे व्यवस्थापित करण्यासाठी सुंदर कॉन्फिगरेशन सेट केले आहे. प्रिंट रुंदी नियम जेव्हा रेषा सेट रुंदी ओलांडते (या प्रकरणात, 80 किंवा 120 वर्ण), प्रिटियर कोडला अधिक वाचनीय बनवण्यासाठी स्वयंचलितपणे स्वरूपित करेल. वापरून सुंदर-प्लगइन-व्यवस्थित-आयात प्लगइन, आम्ही खात्री करतो की आयात विधाने विभाजित आणि तार्किकरित्या क्रमवारी लावली आहेत.

ESLint कॉन्फिगरेशनमध्ये, द आयात/ऑर्डर पासून नियम eslint-plugin-import आयात कसे आयोजित केले जाते ते नियंत्रित करण्यासाठी प्लगइन आवश्यक आहे. येथे लक्ष्य एक सुसंगत आयात रचना लागू करणे आहे, जेथे विविध गटांमधील आयात (जसे की अंगभूत मॉड्यूल, बाह्य पॅकेजेस आणि अंतर्गत मॉड्यूल) नवीन लाइन्सद्वारे विभक्त केली जातात. याव्यतिरिक्त, वाचनीयता सुधारण्यासाठी समान गटातील आयात वर्णमालाबद्ध केल्या जातात. हे नियम आयात गोंधळून जाण्यापासून प्रतिबंधित करतात, विशेषत: एकाधिक फाइल्समधून मोठ्या संख्येने आयात केलेल्या सदस्यांशी व्यवहार करताना.

ESLint सेटअपचा आणखी एक महत्त्वाचा पैलू आहे नवीन रेषा - दरम्यान पर्याय, जे सुनिश्चित करते की प्रत्येक आयात गट रिक्त ओळीने विभक्त केला आहे. हे कोड अधिक दृश्यमानपणे व्यवस्थित करते, विशेषत: मोठ्या कोडबेसमध्ये. सह एकत्रित वर्णमाला नियमानुसार, संपूर्ण आयात ब्लॉक संरचित आणि देखरेख करणे सोपे होते. जेव्हा कोड व्हिज्युअल स्टुडिओ कोडमध्ये सेव्ह केल्यावर फॉरमॅट केला जातो, तेव्हा या सेटिंग्ज आपोआप लागू होतात, संपूर्ण प्रोजेक्टमध्ये मॅन्युअल ऍडजस्टमेंटशिवाय सातत्यपूर्ण इंपोर्ट फॉरमॅटिंग सुनिश्चित करते.

शेवटी, हे कॉन्फिगरेशन योग्यरित्या कार्य करते याची खात्री करण्यासाठी चाचणी करणे महत्वाचे आहे. द थट्टा प्रिटियर आणि ESLint कॉन्फिगरेशन इंपोर्ट स्प्लिटिंग आणि फॉरमॅटिंग अपेक्षेप्रमाणे हाताळतात की नाही हे तपासण्यासाठी युनिट चाचण्या तयार केल्या आहेत. उदाहरणार्थ, जेव्हा एक लांब आयात विधान प्रदान केले जाते, तेव्हा चाचणी ते एकाधिक ओळींमध्ये योग्यरित्या विभाजित केले आहे का ते सत्यापित करते. हा दृष्टिकोन विकासकांना त्यांच्या स्वरूपन नियमांची चाचणी स्वयंचलित करण्यास अनुमती देतो, भविष्यातील कोणतेही कोड बदल समान आयात संरचना मार्गदर्शक तत्त्वांचे पालन करतील याची खात्री करून.

module.exports = {
  semi: false,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 80,
  plugins: ['prettier-plugin-organize-imports'],
}
// Prettier configuration setup for import splitting

१

import {
  longFunctionNameOne,
  longFunctionNameTwo,
  longFunctionNameThree
} from '@example/long-module-name';

import {
  shortFunctionNameOne,
  shortFunctionNameTwo
} from '@example/short-module-name';
// Example of formatted import statements following the configured rules

const eslint = require('eslint');
const prettier = require('prettier');
const { describe, it } = require('@jest/globals');

describe('Import Formatting', () => {
  it('should split long imports into multiple lines', () => {
    const code = `import { a, b, c, d } from '@example/package';`;
    const formatted = prettier.format(code, { printWidth: 80 });
    expect(formatted).toMatch(/import { a, b }/);
  });
});
// Unit test to check if long imports are split into multiple lines using Jest

सुंदर आणि ESLint इंपोर्ट फॉरमॅटिंगसह कोड वाचनीयता वाढवणे

मोठ्या कोडबेसेससह व्यवहार करताना, कोड वाचनीयता आणि कार्यसंघ सहकार्य दोन्ही सुधारण्यासाठी सातत्यपूर्ण आयात संरचना राखणे महत्त्वपूर्ण बनते. विकासकांना एक सामान्य समस्या भेडसावत आहे की आयात विधाने फाइलच्या शीर्षस्थानी किती काळ गोंधळ करू शकतात, विशेषत: जेव्हा त्यात एकाच मॉड्यूलमधील अनेक घटक असतात. साधने सारखे येथे आहे सुंदर आणि ESLint प्लेमध्ये या, तुम्हाला एकाधिक ओळींवर आयात विभाजित करण्यास स्वयंचलित करण्याची अनुमती देते. आयात विधाने परिभाषित रुंदीचे पालन करतात याची खात्री करणे, विशेषत: वर आधारित प्रिंट रुंदी सेटिंग, क्षैतिज स्क्रोलिंग प्रतिबंधित करण्यात मदत करते आणि कोड स्कॅन करणे सोपे ठेवते.

आणखी एक महत्त्वाचा पैलू म्हणजे स्वतःच्या आयातीचा संघटनात्मक नमुना. वापरून आयात/ऑर्डर ESLint द्वारे प्रदान केलेले नियम, तुम्ही त्यांच्या मूळच्या आधारावर आयात गटबद्ध करू शकता: अंगभूत लायब्ररी, तृतीय-पक्ष अवलंबन किंवा अंतर्गत मॉड्यूल. हे गट नवीन लाइन्सद्वारे विभाजित केले जाऊ शकतात, ज्यामुळे विकसकांना अवलंबित्व पटकन ओळखणे सोपे होते. ही पद्धत संरचित आयातीला प्रोत्साहन देते, जे वर्णक्रमानुसार क्रमवारीसह एकत्रित केल्यावर वर्णमाला पर्याय, पुढे कोडबेसमध्ये स्पष्टता आणि सुसंगतता वाढवते.

याव्यतिरिक्त, विकसकांना यासारख्या साधनांचा फायदा घ्यायचा असेल सुंदर-प्लगइन-व्यवस्थित-आयात आयात केवळ योग्यरितीनेच नाही तर तार्किकरित्या पुनर्रचना केली गेली आहे याची खात्री करण्यासाठी. व्हिज्युअल स्टुडिओ कोड सारख्या एडिटरमध्ये फाइल जतन केल्यावर ही साधने प्रत्येक वेळी इच्छित आयात रचना आपोआप लागू करतात. हे सुनिश्चित करते की विकसकांना आयात विधाने व्यक्तिचलितपणे समायोजित करण्याची आवश्यकता नाही आणि क्लिनर आणि अधिक देखरेख करण्यायोग्य कोड लिहिण्यावर लक्ष केंद्रित करू शकतात.