Optimiziranje TypeScript uvoza: Konfiguriranje Prettiera i ESLinta za višelinijski format

Pojednostavljenje uvoznih izjava u TypeScriptu

Kada radite na velikim TypeScript ili JavaScript projektima, uobičajeno je susresti se s dugim izjavama za uvoz, posebno kada uvozite više članova iz jednog modula. Iako se ove linije u početku mogu činiti bezopasnima, lako mogu premašiti vaše Ljepša konfiguracije širina ispisa postavku, čineći kod težim za čitanje i održavanje.

Kako bi vaš kod bio uredan i čitljiv, važno je automatizirati oblikovanje ovih uvoza. Alati poput Ljepša i ESLint može se prilagoditi za automatsko dijeljenje dugih uvoznih izjava u više redaka. To osigurava da vaš kod ostane čist i dosljedan, pridržavajući se pravila oblikovanja koja ste postavili.

Međutim, konfiguriranje ovih alata za automatsko formatiranje izjava uvoza po želji može biti nezgodno. Dok zadane postavke i Prettier-a i ESLint-a rješavaju mnoge probleme s formatiranjem, često ne uspijevaju razložiti duge izjave uvoza u više redaka.

U ovom ćemo vodiču istražiti kako konfigurirati Prettier i ESLint za pravilno formatiranje izjava za uvoz u vašem TypeScript projektu. Proći ćemo kroz postavke potrebne za postizanje uvoza s više redaka uz održavanje dosljednosti u vašoj bazi koda.

Konfiguriranje Prettiera i ESLinta za višelinijski uvoz u TypeScript

Glavni cilj gornjih skripti je konfiguracija Ljepša i ESLint za automatsko formatiranje dugih izjava za uvoz u više redaka u TypeScript projektu. Konfiguracija Prettier postavljena je za definiranje stilova kodiranja, kao što su jednostruki navodnici i zarezi na kraju, te za upravljanje načinom na koji se kod treba omotati pomoću širina ispisa pravilo. Kada redak premaši postavljenu širinu (u ovom slučaju 80 ili 120 znakova), Prettier će automatski formatirati kod kako bi bio čitljiviji. Korištenjem prettier-plugin-organize-imports dodatka, osiguravamo da su izjave uvoza podijeljene i sortirane logično.

U konfiguraciji ESLint, uvoz/narudžba pravilo iz eslint-plugin-import dodatak je bitan za kontrolu načina na koji su uvozi organizirani. Ovdje je cilj nametnuti dosljednu strukturu uvoza, gdje su uvozi iz različitih grupa (kao što su ugrađeni moduli, vanjski paketi i interni moduli) odvojeni novim redcima. Osim toga, uvozi unutar iste grupe poredani su abecednim redom radi poboljšanja čitljivosti. Ova pravila sprječavaju da uvozi postanu pretrpani, posebno kada se radi o velikom broju uvezenih članova iz više datoteka.

Još jedan značajan aspekt ESLint postavke je novi redovi-između opcija, koja osigurava da je svaka grupa uvoza odvojena praznim retkom. To kod čini vizualno organiziranijim, posebno u većim bazama koda. U kombinaciji s složiti po abecedi pravilo, cijeli uvozni blok postaje strukturiran i lakši za održavanje. Kada se kôd formatira prilikom spremanja u Visual Studio Code, te se postavke automatski primjenjuju, osiguravajući dosljedno oblikovanje uvoza u cijelom projektu bez ručnih prilagodbi.

Na kraju, testiranje ove konfiguracije ključno je kako biste bili sigurni da radi ispravno. The šala jedinični testovi su osmišljeni kako bi se provjerilo upravljaju li konfiguracije Prettier i ESLint s dijeljenjem uvoza i formatiranjem na očekivani način. Na primjer, kada je navedena dugačka izjava o uvozu, test provjerava je li ispravno podijeljena u više redaka. Ovaj pristup omogućuje razvojnim programerima da automatiziraju testiranje svojih pravila oblikovanja, osiguravajući da će se sve buduće promjene koda pridržavati istih smjernica strukture 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

Poboljšanje čitljivosti koda s ljepšim i ESLint uvoznim oblikovanjem

Kada se radi o većim bazama kodova, održavanje dosljednih struktura uvoza postaje ključno za poboljšanje čitljivosti koda i timske suradnje. Jedan od uobičajenih problema s kojima se programeri suočavaju je koliko dugi iskazi uvoza mogu zatrpati vrh datoteke, posebno kada sadrže mnogo elemenata iz jednog modula. Ovdje alati vole Ljepša i ESLint dolaze u igru, omogućujući vam da automatizirate dijeljenje uvoza u više redaka. Osiguravanje da se izjave o uvozu pridržavaju definirane širine, obično na temelju širina ispisa postavka pomaže u sprječavanju vodoravnog pomicanja i omogućuje jednostavan pregled koda.

Drugi ključni aspekt je organizacijski obrazac samog uvoza. Korištenje uvoz/narudžba pravilo koje pruža ESLint, možete grupirati uvoze na temelju njihovog porijekla: ugrađene biblioteke, ovisnosti trećih strana ili interni moduli. Ove grupe mogu se podijeliti novim redcima, što programerima olakšava brzo prepoznavanje ovisnosti. Ova metoda promiče strukturirani uvoz, koji u kombinaciji s abecednim sortiranjem kroz složiti po abecedi opcija, dodatno poboljšava jasnoću i dosljednost u bazi koda.

Osim toga, programeri će možda htjeti iskoristiti alate poput prettier-plugin-organize-imports kako bi se osiguralo da se uvozi ne samo ispravno dijele nego i logično preuređuju. Ovi alati automatski provode željenu strukturu uvoza svaki put kada se datoteka spremi u uređivač kao što je Visual Studio Code. To osigurava da programeri ne moraju ručno podešavati izjave o uvozu i mogu se usredotočiti na pisanje čišćeg koda koji se lakše održava.