A TypeScript importálás optimalizálása: A Prettier és az ESLint konfigurálása többsoros formátumhoz

Importálási utasítások egyszerűsítése TypeScriptben

Ha nagy TypeScript- vagy JavaScript-projekteken dolgozik, gyakran találkozhatunk hosszú importálási utasításokkal, különösen akkor, ha több tagot importálunk egyetlen modulból. Bár ezek a vonalak eleinte ártalmatlannak tűnhetnek, könnyen meghaladhatják az Önét Csinosabb konfigurációk printWidth beállítást, ami megnehezíti a kód olvasását és karbantartását.

Annak érdekében, hogy a kód tiszta és olvasható legyen, fontos automatizálni az importálások formázását. Olyan eszközök, mint Csinosabb és ESLint testreszabható, hogy a hosszú import utasításokat automatikusan több sorra bontsa. Ez biztosítja, hogy a kód tiszta és konzisztens maradjon, betartva a beállított formázási szabályokat.

Azonban ezeknek az eszközöknek a konfigurálása az importálási utasítások tetszőleges formázására bonyolult lehet. Míg a Prettier és az ESLint alapértelmezett beállításai számos formázási problémát kezelnek, gyakran elmaradnak a hosszadalmas importálási utasítások több sorban történő lebontásakor.

Ebben az útmutatóban megvizsgáljuk, hogyan konfigurálható a Prettier és az ESLint, hogy megfelelően formázza az importálási utasításokat a TypeScript-projektben. Végigjárjuk a többsoros importáláshoz szükséges beállításokat, miközben megőrizzük a kódbázis konzisztenciáját.

Prettier és ESLint konfigurálása többsoros importáláshoz TypeScriptben

A fenti szkriptek fő célja a konfigurálás Csinosabb és ESLint a hosszú importálási utasítások több soron keresztüli automatikus formázásához egy TypeScript-projektben. A Prettier konfiguráció úgy van beállítva, hogy meghatározza a kódolási stílusokat, például az idézőjeleket és a vesszőket, valamint hogy kezelje a kód tördelésének módját a printWidth szabály. Ha a sor meghaladja a beállított szélességet (ebben az esetben 80 vagy 120 karakter), a Prettier automatikusan formázza a kódot, hogy olvashatóbbá tegye. Használatával a szebb-plugin-szervez-importál plugin, biztosítjuk, hogy az import utasítások felosztásra és logikai rendezésre kerüljenek.

Az ESLint konfigurációban a import/rendelés szabály a eslint-plugin-import A beépülő modul elengedhetetlen az importálás megszervezésének szabályozásához. A cél itt egy konzisztens importstruktúra kikényszerítése, ahol a különböző csoportokból (például beépített modulokból, külső csomagokból és belső modulokból) származó importokat újsorokkal választjuk el. Ezenkívül az azonos csoporton belüli importálások ábécé szerint vannak rendezve az olvashatóság javítása érdekében. Ezek a szabályok megakadályozzák, hogy az importálás zsúfolttá váljon, különösen akkor, ha több fájlból nagyszámú importált taggal foglalkozik.

Az ESLint beállítás másik fontos szempontja a újsorok-között opciót, amely biztosítja, hogy az egyes importálási csoportokat egy üres sor választja el. Ez vizuálisan rendezettebbé teszi a kódot, különösen nagyobb kódbázisokban. Kombinálva a betűrendbe szed szabály, a teljes importblokk strukturálttá és könnyebben karbantarthatóvá válik. Amikor a kódot a Visual Studio Code-ban történő mentéskor formázzák, ezek a beállítások automatikusan alkalmazásra kerülnek, biztosítva az egységes importálási formázást a teljes projektben manuális módosítások nélkül.

Végül ennek a konfigurációnak a tesztelése elengedhetetlen a megfelelő működéshez. A Tréfa Az egységtesztek célja annak ellenőrzése, hogy a Prettier és az ESLint konfigurációk a várt módon kezelik-e az import felosztását és formázását. Például egy hosszú importálási utasítás megadásakor a teszt ellenőrzi, hogy megfelelően van-e felosztva több sorra. Ez a megközelítés lehetővé teszi a fejlesztők számára, hogy automatizálják formázási szabályaik tesztelését, biztosítva, hogy a jövőbeni kódmódosítások betartsák ugyanazokat az importszerkezeti irányelveket.

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

A kód olvashatóságának javítása szebb és ESLint importformázással

Nagyobb kódbázisok kezelésekor a következetes importálási struktúrák fenntartása kulcsfontosságú mind a kód olvashatóságának, mind a csapat együttműködésének javítása érdekében. Az egyik gyakori probléma, amellyel a fejlesztők szembesülnek, az, hogy az importálási utasítások mennyi ideig zavarhatják a fájl tetejét, különösen akkor, ha egyetlen modulból sok elemet tartalmaznak. Ez az, ahol az eszközök, mint Csinosabb és ESLint játékba lép, lehetővé téve az importok több sorra történő felosztásának automatizálását. Annak biztosítása, hogy az importálási utasítások megfeleljenek egy meghatározott szélességnek, általában a printWidth beállítás segít megelőzni a vízszintes görgetést, és könnyen beolvashatóvá teszi a kódot.

Egy másik döntő szempont magának az importnak a szervezeti felépítése. A import/rendelés Az ESLint által biztosított szabály alapján csoportosíthatja az importálást eredetük szerint: beépített könyvtárak, harmadik féltől származó függőségek vagy belső modulok. Ezek a csoportok újsorokkal oszthatók fel, így a fejlesztők könnyebben azonosíthatják a függőségeket. Ez a módszer elősegíti a strukturált importot, amely a betűrendes rendezéssel kombinálva a betűrendbe szed opció tovább növeli a kódbázis egyértelműségét és konzisztenciáját.

Ezen túlmenően a fejlesztők olyan eszközöket szeretnének kihasználni, mint pl szebb-plugin-szervez-importál annak biztosítása érdekében, hogy az import ne csak helyesen legyen felosztva, hanem logikusan is átrendezve. Ezek az eszközök automatikusan érvényesítik a kívánt importálási struktúrát minden alkalommal, amikor a fájlt egy szerkesztőbe, például a Visual Studio Codeba mentik. Ez biztosítja, hogy a fejlesztőknek ne kelljen manuálisan módosítaniuk az importálási utasításokat, és a tisztább és karbantarthatóbb kód írására összpontosíthatnak.