Optimalizácia importov TypeScript: Konfigurácia Prettier a ESLint pre viacriadkový formát

Zjednodušenie importu príkazov v TypeScript

Pri práci na veľkých projektoch TypeScript alebo JavaScript sa bežne stretávame s dlhými príkazmi importu, najmä pri importe viacerých členov z jedného modulu. Aj keď sa tieto čiary môžu spočiatku zdať neškodné, môžu ľahko prevýšiť vaše Krajšie konfigurácie Šírka tlače nastavenie, čo sťažuje čítanie a údržbu kódu.

Aby bol váš kód čistý a čitateľný, je dôležité automatizovať formátovanie týchto importov. Nástroje ako Krajšie a ESLint možno prispôsobiť tak, aby sa dlhé príkazy importu automaticky rozdeľovali do viacerých riadkov. To zaisťuje, že váš kód zostane čistý a konzistentný a bude dodržiavať pravidlá formátovania, ktoré ste nastavili.

Konfigurácia týchto nástrojov na automatické formátovanie príkazov na import podľa potreby však môže byť zložité. Zatiaľ čo predvolené nastavenia Prettier a ESLint riešia veľa problémov s formátovaním, často zaostávajú, pokiaľ ide o rozdelenie zdĺhavých príkazov na import na viacero riadkov.

V tejto príručke preskúmame, ako nakonfigurovať Prettier a ESLint, aby správne formátovali príkazy importu vo vašom projekte TypeScript. Prejdeme si nastaveniami potrebnými na dosiahnutie viacriadkového importu pri zachovaní konzistencie v rámci vašej kódovej základne.

Konfigurácia Prettier a ESLint pre viacriadkové importy v TypeScript

Hlavným cieľom vyššie uvedených skriptov je konfigurácia Krajšie a ESLint na automatické formátovanie dlhých príkazov importu cez viacero riadkov v projekte TypeScript. Konfigurácia Prettier je nastavená tak, aby definovala štýly kódovania, ako sú jednoduché úvodzovky a koncové čiarky, a aby spravovala, ako by mal byť kód zalomený pomocou Šírka tlače pravidlo. Keď riadok prekročí nastavenú šírku (v tomto prípade 80 alebo 120 znakov), Prettier automaticky naformátuje kód, aby bol čitateľnejší. Pomocou prettier-plugin-organize-imports plugin, zabezpečujeme, aby boli príkazy importu rozdelené a logicky zoradené.

V konfigurácii ESLint je dovoz/objednávka pravidlo z eslint-plugin-import plugin je nevyhnutný na kontrolu organizácie importov. Cieľom je presadiť konzistentnú štruktúru importu, kde sú importy z rôznych skupín (ako sú vstavané moduly, externé balíky a interné moduly) oddelené novými riadkami. Okrem toho sú importy v rámci rovnakej skupiny zoradené podľa abecedy, aby sa zlepšila čitateľnosť. Tieto pravidlá zabraňujú tomu, aby boli importy neprehľadné, najmä pri práci s veľkým počtom importovaných členov z viacerých súborov.

Ďalším významným aspektom nastavenia ESLint je nové riadky-medzi možnosť, ktorá zaisťuje, že každá skupina importu je oddelená prázdnym riadkom. Vďaka tomu je kód vizuálne organizovanejší, najmä vo väčších kódových základniach. V kombinácii s zoradiť podľa abecedy celý importovaný blok sa stáva štruktúrovaným a ľahšie sa udržiava. Keď sa kód naformátuje pri uložení v kóde Visual Studio, tieto nastavenia sa použijú automaticky, čím sa zabezpečí konzistentné formátovanie importu v celom projekte bez manuálnych úprav.

Nakoniec, testovanie tejto konfigurácie je kľúčové, aby ste sa uistili, že funguje správne. The Jest testy jednotiek sú navrhnuté tak, aby skontrolovali, či konfigurácie Prettier a ESLint zvládajú rozdelenie a formátovanie importu podľa očakávania. Ak je napríklad zadaný dlhý príkaz importu, test overí, či je správne rozdelený do viacerých riadkov. Tento prístup umožňuje vývojárom automatizovať testovanie ich pravidiel formátovania, čím sa zabezpečí, že všetky budúce zmeny v kóde budú dodržiavať rovnaké pravidlá importnej štruktúry.

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

Zlepšenie čitateľnosti kódu pomocou formátovania Prettier a ESLint

Pri práci s väčšími kódovými základňami sa udržiavanie konzistentných štruktúr importu stáva rozhodujúcim pre zlepšenie čitateľnosti kódu a tímovej spolupráce. Jedným z bežných problémov, s ktorými sa vývojári stretávajú, je, ako dlho môžu príkazy importu zapĺňať hornú časť súboru, najmä ak obsahujú veľa prvkov z jedného modulu. To je miesto, kde nástroje ako Krajšie a ESLint do hry, čo vám umožní automatizovať rozdelenie importov do viacerých riadkov. Zabezpečenie toho, že príkazy importu dodržia definovanú šírku, zvyčajne založenú na Šírka tlače nastavenie, pomáha predchádzať horizontálnemu posúvaniu a umožňuje jednoduché skenovanie kódu.

Ďalším rozhodujúcim aspektom je organizačný vzorec samotného dovozu. Pomocou dovoz/objednávka pravidlo, ktoré poskytuje ESLint, môžete zoskupiť importy podľa ich pôvodu: vstavané knižnice, závislosti tretích strán alebo interné moduly. Tieto skupiny je možné rozdeliť pomocou nových riadkov, čo vývojárom uľahčuje rýchlu identifikáciu závislostí. Táto metóda podporuje štruktúrované importy, ktoré v kombinácii s abecedným triedením zoradiť podľa abecedy možnosť, ďalej zvyšuje prehľadnosť a konzistentnosť v rámci kódovej základne.

Okrem toho môžu vývojári chcieť využiť nástroje ako prettier-plugin-organize-imports aby sa zabezpečilo, že dovozy budú nielen správne rozdelené, ale aj logicky usporiadané. Tieto nástroje automaticky presadzujú požadovanú štruktúru importu zakaždým, keď sa súbor uloží do editora, ako je Visual Studio Code. To zaisťuje, že vývojári nemusia manuálne upravovať príkazy na import a môžu sa sústrediť na písanie čistejšieho a lepšie udržiavateľného kódu.