„TypeScript“ importavimo optimizavimas: „Prettier“ ir „ESLint“ konfigūravimas kelių eilučių formatui

Importavimo teiginių supaprastinimas naudojant TypeScript

Dirbant su dideliais „TypeScript“ arba „JavaScript“ projektais, dažnai susiduriama su ilgais importavimo teiginiais, ypač importuojant kelis narius iš vieno modulio. Nors iš pradžių šios linijos gali atrodyti nekenksmingos, jos gali lengvai viršyti jūsų Gražesnis konfigūracijos spausdinimo plotis nustatymą, todėl kodą sunkiau skaityti ir prižiūrėti.

Kad kodas būtų tvarkingas ir skaitomas, svarbu automatizuoti šių importuotų failų formatavimą. Įrankiai kaip Gražesnis ir ESLint gali būti pritaikytas automatiškai padalinti ilgus importavimo pareiškimus į kelias eilutes. Tai užtikrina, kad jūsų kodas išliks švarus ir nuoseklus, laikantis jūsų nustatytų formatavimo taisyklių.

Tačiau gali būti sudėtinga konfigūruoti šiuos įrankius taip, kad jie automatiškai formatuotų importavimo pareiškimus. Nors numatytieji Prettier ir ESLint nustatymai sprendžia daugybę formatavimo problemų, jie dažnai nepatenka, kai reikia išskaidyti ilgus importavimo teiginius keliose eilutėse.

Šiame vadove išnagrinėsime, kaip sukonfigūruoti Prettier ir ESLint, kad būtų tinkamai suformatuoti importavimo teiginiai jūsų TypeScript projekte. Peržiūrėsime nustatymus, reikalingus kelių eilučių importavimui, išlaikant nuoseklumą jūsų kodų bazėje.

Prettier ir ESLint konfigūravimas kelių eilučių importavimui naudojant TypeScript

Pagrindinis aukščiau pateiktų scenarijų tikslas yra konfigūruoti Gražesnis ir ESLint automatiškai formatuoti ilgus importavimo teiginius keliose TypeScript projekto eilutėse. „Prettier“ konfigūracija nustatyta siekiant apibrėžti kodavimo stilius, pvz., pavienes kabutes ir kablelius, ir valdyti, kaip kodas turėtų būti apvyniotas naudojant spausdinimo plotis taisyklė. Kai eilutė viršija nustatytą plotį (šiuo atveju 80 arba 120 simbolių), Prettier automatiškai suformatuos kodą, kad būtų lengviau skaitomas. Naudodami gražesnis-įskiepis-organizuoti-importuoti papildinį, užtikriname, kad importavimo teiginiai būtų skaidomi ir rūšiuojami logiškai.

ESLint konfigūracijoje importas/užsakymas taisyklė iš eslint-plugin-import papildinys yra būtinas norint kontroliuoti, kaip organizuojamas importas. Tikslas yra sukurti nuoseklią importavimo struktūrą, kai skirtingų grupių (pvz., integruotų modulių, išorinių paketų ir vidinių modulių) importas būtų atskirtas naujomis eilutėmis. Be to, toje pačioje grupėje importuojami produktai yra suskirstyti į abėcėlę, kad būtų lengviau skaitoma. Šios taisyklės neleidžia importuoti netvarkingai, ypač kai susiduriama su dideliu importuotų narių skaičiumi iš kelių failų.

Kitas svarbus ESLint sąrankos aspektas yra naujos eilutės-tarp parinktis, kuri užtikrina, kad kiekviena importavimo grupė būtų atskirta tuščia eilute. Dėl to kodas vizualiai sutvarkytas, ypač didesnėse kodų bazėse. Kartu su abėcėlės tvarka taisyklė, visas importavimo blokas tampa struktūrizuotas ir lengviau prižiūrimas. Kai kodas suformatuojamas išsaugant „Visual Studio Code“, šie nustatymai taikomi automatiškai, užtikrinant nuoseklų importavimo formatavimą visame projekte be rankinio koregavimo.

Galiausiai, norint užtikrinti, kad ji tinkamai veiktų, labai svarbu išbandyti šią konfigūraciją. The Juokas vienetų testai yra skirti patikrinti, ar „Prettier“ ir „ESLint“ konfigūracijos importuoja skaidymą ir formatavimą taip, kaip tikėtasi. Pavyzdžiui, kai pateikiamas ilgas importavimo pareiškimas, bandymas patikrina, ar jis tinkamai padalytas į kelias eilutes. Šis metodas leidžia kūrėjams automatizuoti savo formatavimo taisyklių testavimą ir užtikrinti, kad bet kokie būsimi kodo pakeitimai atitiks tas pačias importavimo struktūros gaires.

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

Kodo skaitomumo pagerinimas naudojant gražesnį ir ESLint importo formatavimą

Dirbant su didesnėmis kodų bazėmis, nuoseklių importavimo struktūrų palaikymas tampa itin svarbus siekiant pagerinti kodo skaitomumą ir komandos bendradarbiavimą. Viena dažna problema, su kuria susiduria kūrėjai, yra tai, kiek ilgai importavimo teiginiai gali užgriozdinti failo viršų, ypač kai juose yra daug elementų iš vieno modulio. Čia tokie įrankiai kaip Gražesnis ir ESLint pradėti naudoti, todėl galite automatizuoti importo skaidymą į kelias eilutes. Užtikrinti, kad importavimo teiginiai atitiktų apibrėžtą plotį, paprastai pagrįstą spausdinimo plotis nustatymas, padeda išvengti horizontalaus slinkimo ir leidžia lengvai nuskaityti kodą.

Kitas svarbus aspektas yra paties importo organizacinis modelis. Naudojant importas/užsakymas ESLint pateiktą taisyklę, importus galite grupuoti pagal jų kilmę: integruotas bibliotekas, trečiųjų šalių priklausomybes arba vidinius modulius. Šios grupės gali būti suskirstytos naujomis eilutėmis, todėl kūrėjams lengviau greitai nustatyti priklausomybes. Šis metodas skatina struktūrinį importą, kuris derinamas su rūšiavimu pagal abėcėlę abėcėlės tvarka parinktis, dar labiau padidina kodų bazės aiškumą ir nuoseklumą.

Be to, kūrėjai gali norėti panaudoti tokius įrankius kaip gražesnis-įskiepis-organizuoti-importuoti užtikrinti, kad importas būtų ne tik teisingai padalintas, bet ir logiškai pertvarkytas. Šie įrankiai automatiškai įgyvendina norimą importavimo struktūrą kiekvieną kartą, kai failas išsaugomas redaktoriuje, pvz., Visual Studio Code. Tai užtikrina, kad kūrėjams nereikės rankiniu būdu koreguoti importavimo teiginių ir jie gali sutelkti dėmesį į švaresnio ir labiau prižiūrimo kodo rašymą.