टाइपस्क्रिप्ट आयात को अनुकूलित करना: मल्टी-लाइन प्रारूप के लिए प्रीटियर और ईएसलिंट को कॉन्फ़िगर करना

टाइपस्क्रिप्ट में आयात विवरण को सुव्यवस्थित करना

बड़े टाइपस्क्रिप्ट या जावास्क्रिप्ट प्रोजेक्ट्स पर काम करते समय, लंबे आयात विवरणों का सामना करना आम बात है, खासकर जब एक ही मॉड्यूल से कई सदस्यों को आयात किया जाता है। हालाँकि ये रेखाएँ शुरू में हानिरहित लग सकती हैं, लेकिन ये आसानी से आपकी सीमा से अधिक हो सकती हैं खूबसूरत कॉन्फ़िगरेशन का प्रिंटविड्थ सेटिंग, जिससे कोड को पढ़ना और बनाए रखना कठिन हो जाता है।

अपने कोड को साफ-सुथरा और पठनीय बनाए रखने के लिए, इन आयातों के स्वरूपण को स्वचालित करना महत्वपूर्ण है। उपकरण जैसे खूबसूरत और ईएसलिंट लंबे आयात विवरणों को स्वचालित रूप से कई पंक्तियों में विभाजित करने के लिए अनुकूलित किया जा सकता है। यह सुनिश्चित करता है कि आपके द्वारा सेट किए गए फ़ॉर्मेटिंग नियमों का पालन करते हुए आपका कोड साफ़ और सुसंगत बना रहे।

हालाँकि, आयात विवरणों को इच्छानुसार स्वचालित रूप से प्रारूपित करने के लिए इन उपकरणों को कॉन्फ़िगर करना मुश्किल हो सकता है। हालाँकि प्रीटियर और ईएसलिंट दोनों की डिफ़ॉल्ट सेटिंग्स कई फ़ॉर्मेटिंग समस्याओं को संभालती हैं, लेकिन जब कई पंक्तियों में लंबे आयात विवरणों को तोड़ने की बात आती है तो वे अक्सर कम हो जाती हैं।

इस गाइड में, हम यह पता लगाएंगे कि आपके टाइपस्क्रिप्ट प्रोजेक्ट में आयात विवरणों को उचित रूप से प्रारूपित करने के लिए प्रीटियर और ईएसलिंट को कैसे कॉन्फ़िगर किया जाए। हम आपके कोडबेस में एकरूपता बनाए रखते हुए मल्टी-लाइन आयात प्राप्त करने के लिए आवश्यक सेटिंग्स से गुजरेंगे।

टाइपस्क्रिप्ट में मल्टी-लाइन आयात के लिए प्रीटियर और ईएसलिंट को कॉन्फ़िगर करना

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

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

ESLint सेटअप का एक अन्य महत्वपूर्ण पहलू है न्यूलाइन्स-बीच विकल्प, जो यह सुनिश्चित करता है कि प्रत्येक आयात समूह को एक रिक्त रेखा से अलग किया गया है। यह कोड को अधिक दृष्टिगत रूप से व्यवस्थित बनाता है, विशेषकर बड़े कोडबेस में। के साथ संयुक्त अकारादि ऋम का करना नियम के अनुसार, संपूर्ण आयात ब्लॉक संरचित और रखरखाव में आसान हो जाता है। जब कोड को विज़ुअल स्टूडियो कोड में सेव करके फ़ॉर्मेट किया जाता है, तो ये सेटिंग्स स्वचालित रूप से लागू हो जाती हैं, जिससे मैन्युअल समायोजन के बिना पूरे प्रोजेक्ट में लगातार आयात फ़ॉर्मेटिंग सुनिश्चित होती है।

अंत में, यह सुनिश्चित करने के लिए कि यह सही ढंग से काम करता है, इस कॉन्फ़िगरेशन का परीक्षण करना महत्वपूर्ण है। जेस्ट यूनिट परीक्षण यह जांचने के लिए डिज़ाइन किए गए हैं कि क्या प्रीटियर और ईएसलिंट कॉन्फ़िगरेशन अपेक्षित रूप से आयात विभाजन और स्वरूपण को संभालते हैं। उदाहरण के लिए, जब एक लंबा आयात विवरण प्रदान किया जाता है, तो परीक्षण यह सत्यापित करता है कि क्या यह कई पंक्तियों में ठीक से विभाजित है। यह दृष्टिकोण डेवलपर्स को अपने स्वरूपण नियमों के परीक्षण को स्वचालित करने की अनुमति देता है, यह सुनिश्चित करते हुए कि भविष्य में कोई भी कोड परिवर्तन समान आयात संरचना दिशानिर्देशों का पालन करेगा।

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

module.exports = {
  "extends": ["eslint:recommended", "plugin:import/errors", "plugin:import/warnings"],
  "rules": {
    "import/order": [
      "error", {
        "groups": ["builtin", "external", "internal"],
        "newlines-between": "always",
        "alphabetize": { "order": "asc", "caseInsensitive": true }
      }],
    "max-len": ["error", { "code": 80 }],
  }
}
// ESLint rule setup to organize imports into multiple lines and ensure alphabetical order

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 द्वारा प्रदान किए गए नियम के अनुसार, आप आयात को उनके मूल के आधार पर समूहित कर सकते हैं: अंतर्निहित लाइब्रेरी, तृतीय-पक्ष निर्भरता, या आंतरिक मॉड्यूल। इन समूहों को नई पंक्तियों द्वारा विभाजित किया जा सकता है, जिससे डेवलपर्स के लिए निर्भरताओं को शीघ्रता से पहचानना आसान हो जाता है। यह विधि संरचित आयात को बढ़ावा देती है, जिसे जब वर्णमाला क्रम के साथ जोड़ा जाता है अकारादि ऋम का करना विकल्प, कोडबेस में स्पष्टता और स्थिरता को और बढ़ाता है।

इसके अतिरिक्त, डेवलपर्स जैसे टूल का लाभ उठाना चाह सकते हैं सुंदर-प्लगइन-व्यवस्थित-आयात यह सुनिश्चित करने के लिए कि आयात न केवल सही ढंग से विभाजित हैं बल्कि तार्किक रूप से पुनर्व्यवस्थित भी हैं। जब भी फ़ाइल विज़ुअल स्टूडियो कोड जैसे संपादक में सहेजी जाती है तो ये उपकरण स्वचालित रूप से वांछित आयात संरचना को लागू करते हैं। यह सुनिश्चित करता है कि डेवलपर्स को आयात विवरणों को मैन्युअल रूप से समायोजित करने की आवश्यकता नहीं है और वे क्लीनर और अधिक रखरखाव योग्य कोड लिखने पर ध्यान केंद्रित कर सकते हैं।