டைப்ஸ்கிரிப்ட் இறக்குமதியை மேம்படுத்துதல்: மல்டி-லைன் ஃபார்மேட்டிற்காக அழகான மற்றும் ESLint ஐ உள்ளமைத்தல்

டைப்ஸ்கிரிப்ட்டில் இறக்குமதி அறிக்கைகளை நெறிப்படுத்துதல்

பெரிய டைப்ஸ்கிரிப்ட் அல்லது ஜாவாஸ்கிரிப்ட் திட்டங்களில் பணிபுரியும் போது, ​​நீண்ட இறக்குமதி அறிக்கைகளை சந்திப்பது பொதுவானது, குறிப்பாக ஒரு தொகுதியிலிருந்து பல உறுப்பினர்களை இறக்குமதி செய்யும் போது. இந்த வரிகள் ஆரம்பத்தில் பாதிப்பில்லாதவையாகத் தோன்றினாலும், அவை எளிதில் உங்களைத் தாண்டிவிடும் அழகான கட்டமைப்பு அச்சு அகலம் அமைப்பது, குறியீட்டைப் படிக்கவும் பராமரிக்கவும் கடினமாக்குகிறது.

உங்கள் குறியீட்டை நேர்த்தியாகவும் படிக்கக்கூடியதாகவும் வைத்திருக்க, இந்த இறக்குமதிகளின் வடிவமைப்பை தானியக்கமாக்குவது முக்கியம். போன்ற கருவிகள் அழகான மற்றும் ESLint தானாக நீண்ட இறக்குமதி அறிக்கைகளை பல வரிகளாக பிரிக்க தனிப்பயனாக்கலாம். நீங்கள் அமைத்துள்ள வடிவமைப்பு விதிகளுக்கு இணங்க, உங்கள் குறியீடு சுத்தமாகவும் சீராகவும் இருப்பதை இது உறுதி செய்கிறது.

இருப்பினும், இறக்குமதி அறிக்கைகளை விரும்பியபடி தானாக வடிவமைக்க இந்தக் கருவிகளை உள்ளமைப்பது தந்திரமானதாக இருக்கும். Prettier மற்றும் ESLint இரண்டின் இயல்புநிலை அமைப்புகளும் பல வடிவமைப்புச் சிக்கல்களைக் கையாளும் அதே வேளையில், பல வரிகளில் உள்ள நீண்ட இறக்குமதி அறிக்கைகளை உடைக்கும்போது அவை பெரும்பாலும் குறைந்துவிடும்.

இந்த வழிகாட்டியில், உங்கள் டைப்ஸ்கிரிப்ட் திட்டத்தில் இறக்குமதி அறிக்கைகளை சரியாக வடிவமைக்க Prettier மற்றும் ESLint ஐ எவ்வாறு கட்டமைப்பது என்பதை ஆராய்வோம். உங்கள் கோட்பேஸ் முழுவதும் நிலைத்தன்மையை பராமரிக்கும் போது பல வரி இறக்குமதிகளை அடைய தேவையான அமைப்புகளை நாங்கள் மேற்கொள்வோம்.

டைப்ஸ்கிரிப்டில் பல-வரி இறக்குமதிகளுக்கு ப்ரீட்டியர் மற்றும் ஈஎஸ்லின்ட் கட்டமைக்கிறது

மேலே உள்ள ஸ்கிரிப்ட்களின் முக்கிய குறிக்கோள் கட்டமைப்பதாகும் அழகான மற்றும் ESLint TypeScript திட்டத்தில் பல வரிகளில் நீண்ட இறக்குமதி அறிக்கைகளை தானாக வடிவமைக்க. ஒற்றை மேற்கோள்கள் மற்றும் பின்னிணைந்த காற்புள்ளிகள் போன்ற குறியீட்டு பாணிகளை வரையறுக்கவும், குறியீட்டை எவ்வாறு சுற்ற வேண்டும் என்பதை நிர்வகிக்கவும் பிரிட்டியர் உள்ளமைவு அமைக்கப்பட்டுள்ளது. அச்சு அகலம் ஆட்சி. கோடு செட் அகலத்தை மீறும் போது (இந்த வழக்கில், 80 அல்லது 120 எழுத்துகள்), Prettier தானாகவே குறியீட்டை மேலும் படிக்கும்படி வடிவமைக்கும். பயன்படுத்துவதன் மூலம் prettier-plugin-organize-imports செருகுநிரல், இறக்குமதி அறிக்கைகள் பிரிக்கப்பட்டு தர்க்கரீதியாக வரிசைப்படுத்தப்படுவதை நாங்கள் உறுதிசெய்கிறோம்.

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

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

Prettier மற்றும் ESLint Import Formatting மூலம் குறியீடு படிக்கக்கூடிய தன்மையை மேம்படுத்துகிறது

பெரிய குறியீட்டுத் தளங்களைக் கையாளும் போது, ​​குறியீட்டு வாசிப்புத்திறன் மற்றும் குழு ஒத்துழைப்பை மேம்படுத்துவதற்கு நிலையான இறக்குமதி கட்டமைப்புகளை பராமரிப்பது முக்கியமானது. டெவலப்பர்கள் எதிர்கொள்ளும் ஒரு பொதுவான சிக்கல் என்னவென்றால், இறக்குமதி அறிக்கைகள் கோப்பின் மேற்பகுதியை எவ்வளவு நேரம் ஒழுங்கீனம் செய்யலாம், குறிப்பாக அவை ஒரு தொகுதியிலிருந்து பல கூறுகளைக் கொண்டிருக்கும்போது. கருவிகள் விரும்பும் இடம் இது அழகான மற்றும் ESLint செயல்பாட்டுக்கு வந்து, நீங்கள் பல வரிகளில் இறக்குமதிகளை பிரிப்பதை தானியங்குபடுத்த அனுமதிக்கிறது. இறக்குமதி அறிக்கைகள் வரையறுக்கப்பட்ட அகலத்திற்கு இணங்குவதை உறுதி செய்தல், பொதுவாக அடிப்படையில் அச்சு அகலம் அமைப்பது, கிடைமட்ட ஸ்க்ரோலிங் செய்வதைத் தடுக்க உதவுகிறது மற்றும் குறியீட்டை ஸ்கேன் செய்வதை எளிதாக்குகிறது.

மற்றொரு முக்கியமான அம்சம், இறக்குமதியின் நிறுவன வடிவமாகும். பயன்படுத்தி இறக்குமதி/ஆர்டர் ESLint வழங்கிய விதி, நீங்கள் இறக்குமதிகளை அவற்றின் தோற்றத்தின் அடிப்படையில் குழுவாக்கலாம்: உள்ளமைக்கப்பட்ட நூலகங்கள், மூன்றாம் தரப்பு சார்புகள் அல்லது உள் தொகுதிகள். இந்தக் குழுக்களை புதிய வரிகளால் பிரிக்கலாம், டெவலப்பர்கள் சார்புகளை விரைவாகக் கண்டறிவதை எளிதாக்குகிறது. இந்த முறை கட்டமைக்கப்பட்ட இறக்குமதிகளை ஊக்குவிக்கிறது, இது அகரவரிசைப்படி வரிசைப்படுத்துதலுடன் இணைந்தால் அகரவரிசைப்படுத்து விருப்பம், குறியீட்டு தளத்தில் தெளிவு மற்றும் நிலைத்தன்மையை மேலும் மேம்படுத்துகிறது.

கூடுதலாக, டெவலப்பர்கள் போன்ற கருவிகளைப் பயன்படுத்த விரும்பலாம் prettier-plugin-organize-imports இறக்குமதிகள் சரியாகப் பிரிக்கப்படுவது மட்டுமல்லாமல், தர்க்கரீதியாக மறுசீரமைக்கப்படுவதையும் உறுதி செய்ய. விஷுவல் ஸ்டுடியோ கோட் போன்ற எடிட்டரில் கோப்பு சேமிக்கப்படும் ஒவ்வொரு முறையும் இந்த கருவிகள் விரும்பிய இறக்குமதி கட்டமைப்பை தானாகவே செயல்படுத்தும். டெவலப்பர்கள் இறக்குமதி அறிக்கைகளை கைமுறையாக சரிசெய்ய வேண்டியதில்லை என்பதை இது உறுதிசெய்கிறது மற்றும் தூய்மையான மற்றும் பராமரிக்கக்கூடிய குறியீட்டை எழுதுவதில் கவனம் செலுத்த முடியும்.