ടൈപ്പ്സ്ക്രിപ്റ്റ് ഇമ്പോർട്ടുകൾ ഒപ്റ്റിമൈസ് ചെയ്യുന്നു: മൾട്ടി-ലൈൻ ഫോർമാറ്റിനായി പ്രെറ്റിയറും ഇഎസ്ലിൻ്റും കോൺഫിഗർ ചെയ്യുന്നു

ടൈപ്പ്സ്ക്രിപ്റ്റിൽ ഇറക്കുമതി പ്രസ്താവനകൾ കാര്യക്ഷമമാക്കുന്നു

വലിയ ടൈപ്പ്സ്ക്രിപ്റ്റ് അല്ലെങ്കിൽ ജാവാസ്ക്രിപ്റ്റ് പ്രോജക്റ്റുകളിൽ പ്രവർത്തിക്കുമ്പോൾ, ദൈർഘ്യമേറിയ ഇറക്കുമതി പ്രസ്താവനകൾ നേരിടുന്നത് സാധാരണമാണ്, പ്രത്യേകിച്ച് ഒരു മൊഡ്യൂളിൽ നിന്ന് ഒന്നിലധികം അംഗങ്ങളെ ഇറക്കുമതി ചെയ്യുമ്പോൾ. ഈ വരികൾ തുടക്കത്തിൽ നിരുപദ്രവകരമാണെന്ന് തോന്നിയേക്കാമെങ്കിലും, അവ നിങ്ങളുടെ പരിധിയെ മറികടക്കും മനോഹരം കോൺഫിഗറേഷൻ പ്രിൻ്റ് വിഡ്ത്ത് ക്രമീകരണം, കോഡ് വായിക്കാനും പരിപാലിക്കാനും ബുദ്ധിമുട്ടാക്കുന്നു.

നിങ്ങളുടെ കോഡ് വൃത്തിയും വായനയും നിലനിർത്താൻ, ഈ ഇറക്കുമതികളുടെ ഫോർമാറ്റിംഗ് ഓട്ടോമേറ്റ് ചെയ്യേണ്ടത് പ്രധാനമാണ്. പോലുള്ള ഉപകരണങ്ങൾ മനോഹരം ഒപ്പം ESLint ദൈർഘ്യമേറിയ ഇറക്കുമതി പ്രസ്താവനകൾ ഒന്നിലധികം വരികളായി സ്വയമേവ വിഭജിക്കാൻ ഇഷ്ടാനുസൃതമാക്കാൻ കഴിയും. നിങ്ങൾ സജ്ജമാക്കിയ ഫോർമാറ്റിംഗ് നിയമങ്ങൾ പാലിച്ചുകൊണ്ട് നിങ്ങളുടെ കോഡ് വൃത്തിയും സ്ഥിരതയും ഉള്ളതായി ഇത് ഉറപ്പാക്കുന്നു.

എന്നിരുന്നാലും, ഇംപോർട്ട് സ്റ്റേറ്റ്‌മെൻ്റുകൾ സ്വയമേവ ഫോർമാറ്റ് ചെയ്യുന്നതിന് ഈ ടൂളുകൾ കോൺഫിഗർ ചെയ്യുന്നത് ബുദ്ധിമുട്ടുള്ള കാര്യമാണ്. Prettier, ESLint എന്നിവയുടെ സ്ഥിരസ്ഥിതി ക്രമീകരണങ്ങൾ നിരവധി ഫോർമാറ്റിംഗ് പ്രശ്‌നങ്ങൾ കൈകാര്യം ചെയ്യുന്നുണ്ടെങ്കിലും, ഒന്നിലധികം ലൈനുകളിലുടനീളം ദൈർഘ്യമേറിയ ഇറക്കുമതി പ്രസ്താവനകൾ തകർക്കുമ്പോൾ അവ പലപ്പോഴും കുറയുന്നു.

ഈ ഗൈഡിൽ, നിങ്ങളുടെ ടൈപ്പ്സ്ക്രിപ്റ്റ് പ്രോജക്റ്റിലെ ഇറക്കുമതി പ്രസ്താവനകൾ ശരിയായി ഫോർമാറ്റ് ചെയ്യുന്നതിന് Prettier, ESLint എന്നിവ എങ്ങനെ കോൺഫിഗർ ചെയ്യാമെന്ന് ഞങ്ങൾ പര്യവേക്ഷണം ചെയ്യും. നിങ്ങളുടെ കോഡ്‌ബേസിൽ ഉടനീളം സ്ഥിരത നിലനിർത്തിക്കൊണ്ട് മൾട്ടി-ലൈൻ ഇമ്പോർട്ടുകൾ നേടുന്നതിന് ആവശ്യമായ ക്രമീകരണങ്ങളിലൂടെ ഞങ്ങൾ നടക്കും.

ടൈപ്പ്സ്ക്രിപ്റ്റിലെ മൾട്ടി-ലൈൻ ഇമ്പോർട്ടുകൾക്കായി പ്രെറ്റിയർ, ഇഎസ്ലിൻ്റ് എന്നിവ ക്രമീകരിക്കുന്നു

മുകളിലുള്ള സ്ക്രിപ്റ്റുകളുടെ പ്രധാന ലക്ഷ്യം കോൺഫിഗർ ചെയ്യുക എന്നതാണ് മനോഹരം ഒപ്പം ESLint ഒരു ടൈപ്പ്‌സ്‌ക്രിപ്റ്റ് പ്രോജക്‌റ്റിൽ ഒന്നിലധികം ലൈനുകളിലുടനീളം ദൈർഘ്യമേറിയ ഇറക്കുമതി പ്രസ്താവനകൾ സ്വയമേവ ഫോർമാറ്റ് ചെയ്യാൻ. സിംഗിൾ ഉദ്ധരണികളും ട്രെയിലിംഗ് കോമകളും പോലുള്ള കോഡിംഗ് ശൈലികൾ നിർവചിക്കുന്നതിനും കോഡ് എങ്ങനെ പൊതിയണം എന്ന് നിയന്ത്രിക്കുന്നതിനും പ്രെറ്റിയർ കോൺഫിഗറേഷൻ സജ്ജീകരിച്ചിരിക്കുന്നു. പ്രിൻ്റ് വിഡ്ത്ത് ഭരണം. ലൈൻ സെറ്റ് വീതിയിൽ കവിയുമ്പോൾ (ഈ സാഹചര്യത്തിൽ, 80 അല്ലെങ്കിൽ 120 പ്രതീകങ്ങൾ), കോഡ് കൂടുതൽ വായിക്കാൻ കഴിയുന്ന തരത്തിൽ പ്രെറ്റിയർ സ്വയമേവ ഫോർമാറ്റ് ചെയ്യും. ഉപയോഗിച്ച് prettier-plugin-organize-imports പ്ലഗിൻ, ഇറക്കുമതി പ്രസ്താവനകൾ വിഭജിക്കുകയും യുക്തിസഹമായി അടുക്കുകയും ചെയ്യുന്നുവെന്ന് ഞങ്ങൾ ഉറപ്പാക്കുന്നു.

ESLint കോൺഫിഗറേഷനിൽ, the ഇറക്കുമതി/ഓർഡർ മുതൽ ഭരണം 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

പ്രെറ്റിയർ, ESLint ഇറക്കുമതി ഫോർമാറ്റിംഗ് ഉപയോഗിച്ച് കോഡ് റീഡബിലിറ്റി വർദ്ധിപ്പിക്കുന്നു

വലിയ കോഡ്ബേസുകൾ കൈകാര്യം ചെയ്യുമ്പോൾ, കോഡ് റീഡബിലിറ്റിയും ടീം സഹകരണവും മെച്ചപ്പെടുത്തുന്നതിന് സ്ഥിരമായ ഇറക്കുമതി ഘടനകൾ നിലനിർത്തുന്നത് നിർണായകമാണ്. ഡവലപ്പർമാർ അഭിമുഖീകരിക്കുന്ന ഒരു പൊതു പ്രശ്നം, ഇറക്കുമതി പ്രസ്താവനകൾക്ക് ഫയലിൻ്റെ മുകൾ ഭാഗം എത്രത്തോളം അലങ്കോലപ്പെടുത്താൻ കഴിയും എന്നതാണ്, പ്രത്യേകിച്ചും അവയിൽ ഒരു മൊഡ്യൂളിൽ നിന്നുള്ള നിരവധി ഘടകങ്ങൾ അടങ്ങിയിരിക്കുമ്പോൾ. ഉപകരണങ്ങൾ ഇഷ്ടപ്പെടുന്നത് ഇവിടെയാണ് മനോഹരം ഒപ്പം ESLint ഒന്നിലധികം ലൈനുകളിലായി ഇറക്കുമതികൾ വിഭജിക്കുന്നത് ഓട്ടോമേറ്റ് ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഇറക്കുമതി പ്രസ്താവനകൾ ഒരു നിർവചിക്കപ്പെട്ട വീതിക്ക് അനുസൃതമായി പ്രവർത്തിക്കുന്നുവെന്ന് ഉറപ്പാക്കുന്നു, സാധാരണയായി ഇതിനെ അടിസ്ഥാനമാക്കി പ്രിൻ്റ് വിഡ്ത്ത് ക്രമീകരണം, തിരശ്ചീന സ്ക്രോളിംഗ് തടയാൻ സഹായിക്കുകയും കോഡ് സ്കാൻ ചെയ്യാൻ എളുപ്പമാക്കുകയും ചെയ്യുന്നു.

മറ്റൊരു നിർണായക വശം ഇറക്കുമതിയുടെ സംഘടനാ രീതിയാണ്. ഉപയോഗിക്കുന്നത് ഇറക്കുമതി/ഓർഡർ ESLint നൽകുന്ന നിയമം, അവയുടെ ഉത്ഭവത്തെ അടിസ്ഥാനമാക്കി നിങ്ങൾക്ക് ഇമ്പോർട്ടുകൾ ഗ്രൂപ്പുചെയ്യാനാകും: അന്തർനിർമ്മിത ലൈബ്രറികൾ, മൂന്നാം-കക്ഷി ഡിപൻഡൻസികൾ അല്ലെങ്കിൽ ആന്തരിക മൊഡ്യൂളുകൾ. ഈ ഗ്രൂപ്പുകളെ ന്യൂലൈനുകളാൽ വിഭജിക്കാൻ കഴിയും, ഇത് ഡെവലപ്പർമാർക്ക് ഡിപൻഡൻസികൾ പെട്ടെന്ന് തിരിച്ചറിയുന്നത് എളുപ്പമാക്കുന്നു. ഈ രീതി ഘടനാപരമായ ഇറക്കുമതിയെ പ്രോത്സാഹിപ്പിക്കുന്നു, ഇത് അക്ഷരമാലാക്രമത്തിൽ അടുക്കുമ്പോൾ അക്ഷരമാലാക്രമം ഓപ്ഷൻ, കോഡ്ബേസിൽ ഉടനീളം വ്യക്തതയും സ്ഥിരതയും വർദ്ധിപ്പിക്കുന്നു.

കൂടാതെ, ഡവലപ്പർമാർ ഇതുപോലുള്ള ടൂളുകൾ പ്രയോജനപ്പെടുത്താൻ ആഗ്രഹിച്ചേക്കാം prettier-plugin-organize-imports ഇറക്കുമതി ശരിയായി വിഭജിക്കുക മാത്രമല്ല, യുക്തിസഹമായി പുനഃക്രമീകരിക്കുകയും ചെയ്യുന്നു എന്ന് ഉറപ്പാക്കാൻ. വിഷ്വൽ സ്റ്റുഡിയോ കോഡ് പോലുള്ള ഒരു എഡിറ്ററിൽ ഫയൽ സേവ് ചെയ്യുമ്പോഴെല്ലാം ആവശ്യമുള്ള ഇറക്കുമതി ഘടന ഈ ടൂളുകൾ സ്വയമേവ നടപ്പിലാക്കുന്നു. ഡവലപ്പർമാർക്ക് ഇറക്കുമതി പ്രസ്താവനകൾ സ്വമേധയാ ക്രമീകരിക്കേണ്ടതില്ലെന്നും കൂടുതൽ വൃത്തിയുള്ളതും പരിപാലിക്കാവുന്നതുമായ കോഡ് എഴുതുന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കാൻ കഴിയുമെന്നും ഇത് ഉറപ്പാക്കുന്നു.