TypeScripti importimise optimeerimine: Prettieri ja ESLinti konfigureerimine mitmerealise vormingu jaoks

Impordiavalduste sujuvamaks muutmine TypeScriptis

Suurte TypeScripti või JavaScripti projektidega töötades kohtab sageli pikki impordilauseid, eriti kui impordite ühest moodulist mitu liiget. Kuigi need jooned võivad esialgu tunduda kahjutud, võivad need kergesti ületada teie Ilusam konfiguratsioonid printWidth seadistus, muutes koodi lugemise ja hooldamise raskemaks.

Et teie kood oleks puhas ja loetav, on oluline nende importimiste vormindamine automatiseerida. Tööriistad nagu Ilusam ja ESLint saab kohandada, et jagada pikad impordiavaldused automaatselt mitmeks reale. See tagab, et teie kood jääb puhtaks ja järjepidevaks, järgides teie seadistatud vormindamisreegleid.

Nende tööriistade konfigureerimine impordilausete automaatseks vormindamiseks vastavalt soovile võib aga olla keeruline. Kuigi nii Prettieri kui ka ESLinti vaikeseaded lahendavad paljusid vormindamisprobleeme, ei ole need sageli pikkade impordiavalduste jagamisel mitmele reale puudulikud.

Selles juhendis uurime, kuidas konfigureerida Prettier ja ESLint, et teie TypeScripti projektis impordilauseid õigesti vormindada. Tutvustame seadeid, mis on vajalikud mitme rea importimiseks, säilitades samal ajal teie koodibaasi järjepidevuse.

Prettieri ja ESLinti konfigureerimine mitmerealiseks impordiks TypeScriptis

Ülaltoodud skriptide peamine eesmärk on konfigureerimine Ilusam ja ESLint pikkade impordilausete automaatseks vormindamiseks TypeScripti projekti mitme rea vahel. Prettier konfiguratsioon on seadistatud kodeerimisstiilide (nt üksikud jutumärgid ja lõpus olevad komad) määratlemiseks ning koodi mähkimise haldamiseks printWidth reegel. Kui rida ületab määratud laiuse (antud juhul 80 või 120 tähemärki), vormindab Prettier koodi automaatselt, et muuta see loetavamaks. Kasutades ilusam-plugin-korralda-import pistikprogrammi, tagame impordilausete poolitamise ja loogilise sortimise.

ESLinti konfiguratsioonis on import/tellimine reegel alates eslint-plugin-import plugin on oluline impordi korraldamise kontrollimiseks. Siin on eesmärk jõustada ühtne impordistruktuur, kus impordid erinevatest rühmadest (nt sisseehitatud moodulid, välised paketid ja sisemoodulid) eraldatakse ridade vahedega. Lisaks on sama rühma impordid loetavuse parandamiseks tähestikulises järjekorras. Need reeglid takistavad importimise segadust, eriti kui tegemist on suure hulga mitmest failist imporditud liikmetega.

ESLinti seadistuse teine ​​oluline aspekt on reavahetused-vahel suvand, mis tagab iga impordirühma eraldamise tühja reaga. See muudab koodi visuaalselt organiseeritumaks, eriti suuremates koodibaasides. Kombineeritud tähestiku järgi seadma reeglina muutub kogu impordiplokk struktureerituks ja seda on lihtsam hooldada. Kui kood on Visual Studio Code'is salvestamisel vormindatud, rakendatakse neid sätteid automaatselt, tagades järjepideva impordivormingu kogu projekti ulatuses ilma käsitsi kohandamata.

Lõpuks on selle konfiguratsiooni testimine selle õige toimimise tagamiseks ülioluline. The Naljakas ühikutestid on loodud selleks, et kontrollida, kas konfiguratsioonid Prettier ja ESLint käsitlevad impordi tükeldamist ja vormindamist ootuspäraselt. Näiteks kui esitatakse pikk impordiavaldus, kontrollib test, kas see on õigesti mitmeks reale jagatud. See lähenemisviis võimaldab arendajatel automatiseerida oma vormindamisreeglite testimist, tagades, et kõik tulevased koodimuudatused järgivad samu impordistruktuuri juhiseid.

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

Koodi loetavuse parandamine ilusama ja ESLint impordivorminguga

Suuremate koodibaasidega tegelemisel muutub järjepidevate impordistruktuuride säilitamine ülioluliseks nii koodi loetavuse kui ka meeskonna koostöö parandamiseks. Üks levinud probleem, millega arendajad silmitsi seisavad, on see, kui pikad impordiavaldused võivad faili ülaosa segada, eriti kui need sisaldavad ühest moodulist palju elemente. See on koht, kus tööriistad nagu Ilusam ja ESLint mängu, mis võimaldab teil automatiseerida impordi jagamist mitmele reale. Impordiavalduste kindla laiuse järgimise tagamine, mis põhineb tavaliselt printWidth seade aitab vältida horisontaalset kerimist ja hoiab koodi hõlpsalt skannitavana.

Teine oluline aspekt on impordi enda organisatsiooniline muster. Kasutades import/tellimine ESLinti pakutava reegli alusel saate importida rühmitada nende päritolu alusel: sisseehitatud teegid, kolmanda osapoole sõltuvused või sisemoodulid. Neid rühmi saab jagada reavahetustega, mis muudab arendajatel sõltuvuste kiire tuvastamise lihtsamaks. See meetod soodustab struktureeritud importi, mis kombineerituna tähestikulise sorteerimisega läbi tähestiku järgi seadma valik, suurendab veelgi selgust ja järjepidevust kogu koodibaasi ulatuses.

Lisaks võivad arendajad soovida kasutada selliseid tööriistu nagu ilusam-plugin-korralda-import tagada, et importi mitte ainult õigesti jagataks, vaid ka loogiliselt ümber korraldataks. Need tööriistad jõustavad soovitud impordistruktuuri automaatselt iga kord, kui fail salvestatakse redaktorisse, näiteks Visual Studio Code. See tagab, et arendajad ei pea impordi avaldusi käsitsi kohandama ning saavad keskenduda puhtama ja paremini hooldatava koodi kirjutamisele.