Optimizacija uvozov TypeScript: Konfiguracija Prettier in ESLint za večvrstični format

Poenostavitev uvoznih izjav v TypeScript

Pri delu na velikih projektih TypeScript ali JavaScript je pogosto naleteti na dolge uvozne stavke, zlasti pri uvozu več članov iz enega modula. Čeprav se te vrstice na začetku morda zdijo neškodljive, lahko zlahka presežejo vaše lepša konfiguracije printWidth nastavitev, zaradi česar je kodo težje brati in vzdrževati.

Da bo vaša koda čista in berljiva, je pomembno, da avtomatizirate oblikovanje teh uvozov. Orodja kot lepša in ESLint je mogoče prilagoditi za samodejno razdelitev dolgih uvoznih stavkov v več vrstic. To zagotavlja, da vaša koda ostane čista in dosledna ter se drži pravil oblikovanja, ki ste jih nastavili.

Vendar pa je lahko konfiguriranje teh orodij za samodejno oblikovanje uvoznih stavkov po želji težavno. Medtem ko privzete nastavitve Prettier in ESLint obravnavajo številne težave z oblikovanjem, pogosto ne uspejo, ko gre za razčlenitev dolgih uvoznih stavkov v več vrsticah.

V tem priročniku bomo raziskali, kako konfigurirati Prettier in ESLint za pravilno oblikovanje uvoznih stavkov v vašem projektu TypeScript. Sprehodili se bomo skozi nastavitve, ki so potrebne za uvoze v več vrsticah, hkrati pa ohranili doslednost v vaši kodni bazi.

Konfiguriranje Prettier in ESLint za večvrstični uvoz v TypeScript

Glavni cilj zgornjih skriptov je konfiguracija lepša in ESLint za samodejno oblikovanje dolgih uvoznih stavkov v več vrsticah v projektu TypeScript. Konfiguracija Prettier je nastavljena za definiranje slogov kodiranja, kot so enojni narekovaji in končne vejice, ter za upravljanje načina zavijanja kode z uporabo printWidth pravilo. Ko vrstica preseže nastavljeno širino (v tem primeru 80 ali 120 znakov), Prettier samodejno oblikuje kodo, da bo bolj berljiva. Z uporabo prettier-plugin-organize-imports plugin, zagotavljamo, da so uvozni stavki razdeljeni in razvrščeni logično.

V konfiguraciji ESLint je uvoz/naročilo pravilo iz eslint-plugin-import plugin je bistven za nadzor nad tem, kako so uvozi organizirani. Tukaj je cilj uveljaviti dosledno strukturo uvoza, kjer so uvozi iz različnih skupin (kot so vgrajeni moduli, zunanji paketi in notranji moduli) ločeni z novimi vrsticami. Poleg tega so uvozi znotraj iste skupine razvrščeni po abecedi za izboljšanje berljivosti. Ta pravila preprečujejo, da bi uvozi postali natrpani, zlasti ko gre za veliko število uvoženih članov iz več datotek.

Drug pomemben vidik nastavitve ESLint je nove vrstice-med možnost, ki zagotavlja, da je vsaka uvozna skupina ločena s prazno vrstico. Zaradi tega je koda bolj vizualno organizirana, zlasti v večjih kodnih bazah. V kombinaciji z po abecedi celoten uvozni blok postane strukturiran in lažji za vzdrževanje. Ko je koda oblikovana ob shranjevanju v Visual Studio Code, se te nastavitve uporabijo samodejno, kar zagotavlja dosledno oblikovanje uvoza v celotnem projektu brez ročnih prilagoditev.

Nazadnje je testiranje te konfiguracije ključnega pomena za zagotovitev, da deluje pravilno. The Šala testi enot so zasnovani tako, da preverijo, ali konfiguraciji Prettier in ESLint obravnavata razdelitev uvoza in oblikovanje po pričakovanjih. Na primer, ko je naveden dolg uvozni stavek, preizkus preveri, ali je pravilno razdeljen na več vrstic. Ta pristop omogoča razvijalcem, da avtomatizirajo testiranje svojih pravil oblikovanja in zagotovijo, da bodo vse prihodnje spremembe kode v skladu z istimi smernicami za strukturo uvoza.

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

Izboljšanje berljivosti kode z oblikovanjem uvoza Prettier in ESLint

Ko imamo opravka z večjimi kodnimi bazami, postane vzdrževanje doslednih uvoznih struktur ključnega pomena za izboljšanje berljivosti kode in skupinskega sodelovanja. Ena pogosta težava, s katero se srečujejo razvijalci, je, kako dolgi stavki za uvoz lahko zapolnijo vrh datoteke, zlasti če vsebujejo veliko elementov iz enega samega modula. Tukaj so orodja všeč lepša in ESLint pridejo v poštev, kar vam omogoča, da avtomatizirate razdelitev uvozov v več vrstic. Zagotavljanje, da uvozni stavki ustrezajo določeni širini, ki običajno temelji na printWidth nastavitev pomaga preprečiti vodoravno drsenje in omogoča enostavno skeniranje kode.

Drugi ključni vidik je organizacijski vzorec samega uvoza. Uporaba uvoz/naročilo pravilo, ki ga zagotavlja ESLint, lahko združite uvoze glede na njihov izvor: vgrajene knjižnice, odvisnosti tretjih oseb ali notranji moduli. Te skupine je mogoče razdeliti z novimi vrsticami, kar razvijalcem olajša hitro prepoznavanje odvisnosti. Ta metoda spodbuja strukturiran uvoz, ki v kombinaciji z abecednim razvrščanjem po po abecedi možnost, dodatno izboljša jasnost in doslednost v zbirki kode.

Poleg tega bodo razvijalci morda želeli uporabiti orodja, kot je prettier-plugin-organize-imports za zagotovitev, da uvozi niso samo pravilno razdeljeni, temveč tudi logično prerazporejeni. Ta orodja samodejno uveljavijo želeno uvozno strukturo vsakič, ko je datoteka shranjena v urejevalniku, kot je Visual Studio Code. To zagotavlja, da razvijalcem ni treba ročno prilagajati izjav o uvozu in se lahko osredotočijo na pisanje čistejše in bolj vzdržljive kode.