TypeScript-tuontien optimointi: Prettier- ja ESLint-asetusten määrittäminen monirivistä muotoa varten

Tuontilausekkeiden virtaviivaistaminen TypeScriptissä

Kun työskentelet suurissa TypeScript- tai JavaScript-projekteissa, on tavallista kohdata pitkiä tuontilausekkeita, etenkin kun tuodaan useita jäseniä yhdestä moduulista. Vaikka nämä linjat voivat aluksi tuntua vaarattomilta, ne voivat helposti ylittää sinun Kauniimpi kokoonpanot tulostusleveys asetusta, mikä tekee koodista vaikeamman lukea ja ylläpitää.

Jotta koodisi pysyy siistinä ja luettavana, on tärkeää automatisoida näiden tuontien muotoilu. Työkalut kuten Kauniimpi ja ESLint voidaan mukauttaa jakamaan pitkät tuontilausekkeet automaattisesti useille riveille. Tämä varmistaa, että koodisi pysyy puhtaana ja johdonmukaisena määrittämiesi muotoilusääntöjen mukaisesti.

Näiden työkalujen määrittäminen muotoilemaan tuontilausekkeet automaattisesti halutulla tavalla voi kuitenkin olla hankalaa. Vaikka Prettier- ja ESLint-oletusasetukset käsittelevät monia muotoiluongelmia, ne eivät useinkaan onnistu, kun on kyse pitkien tuontilausekkeiden jakamisesta useille riveille.

Tässä oppaassa tutkimme, kuinka Prettier ja ESLint määritetään muotoilemaan oikein TypeScript-projektisi tuontilausekkeet. Käymme läpi asetukset, joita tarvitaan monirivisten tuontien toteuttamiseen ja samalla varmistamme yhdenmukaisuuden koodikannassasi.

Prettier- ja ESLint-määritykset monirivistä tuontia varten TypeScriptissä

Yllä olevien komentosarjojen päätavoite on määrittää Kauniimpi ja ESLint muotoilla automaattisesti pitkät tuontilausekkeet useille riveille TypeScript-projektissa. Prettier-kokoonpano on määritetty määrittelemään koodaustyylejä, kuten yksittäisiä lainausmerkkejä ja pilkkuja, sekä hallitsemaan koodin käärimistä käyttämällä tulostusleveys sääntö. Kun rivi ylittää asetetun leveyden (tässä tapauksessa 80 tai 120 merkkiä), Prettier muotoilee koodin automaattisesti tehdäkseen siitä luettavamman. Käyttämällä kauniimpi-plugin-organise-imports plugin, varmistamme, että tuontilausekkeet jaetaan ja lajitellaan loogisesti.

ESLint-kokoonpanossa tuonti/tilaus sääntö alkaen eslint-plugin-import laajennus on välttämätön tuonnin järjestämisen hallinnassa. Tavoitteena on saada aikaan johdonmukainen tuontirakenne, jossa tuonnit eri ryhmistä (kuten sisäänrakennetut moduulit, ulkoiset paketit ja sisäiset moduulit) erotetaan rivinvaihdolla. Lisäksi saman ryhmän tuonti on aakkosjärjestetty luettavuuden parantamiseksi. Nämä säännöt estävät tuonnin sotkeutumisen, varsinkin kun käsitellään suuria määriä tuotuja jäseniä useista tiedostoista.

Toinen tärkeä osa ESLint-asennusta on rivinvaihto-välillä -vaihtoehto, joka varmistaa, että jokainen tuontiryhmä erotetaan tyhjällä rivillä. Tämä tekee koodista visuaalisesti järjestetymmän, etenkin suuremmissa koodikantoissa. Yhdistettynä aakkostaa sääntö, koko tuontilohkosta tulee jäsennelty ja helpompi ylläpitää. Kun koodi muotoillaan tallennuksen yhteydessä Visual Studio Codessa, nämä asetukset otetaan käyttöön automaattisesti, mikä varmistaa johdonmukaisen tuontimuotoilun koko projektille ilman manuaalisia säätöjä.

Lopuksi tämän kokoonpanon testaaminen on ratkaisevan tärkeää sen oikean toiminnan varmistamiseksi. The Jest Yksikkötestit on suunniteltu tarkistamaan, käsittelevätkö Prettier- ja ESLint-kokoonpanot tuonnin jakamista ja muotoilua odotetulla tavalla. Kun esimerkiksi tarjotaan pitkä tuontilauseke, testi varmistaa, onko se jaettu oikein useille riveille. Tämän lähestymistavan avulla kehittäjät voivat automatisoida muotoilusääntöjensä testauksen ja varmistaa, että kaikki tulevat koodimuutokset noudattavat samoja tuontirakenneohjeita.

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

Paranna koodin luettavuutta kauniilla ja ESLint-tuontimuotoilulla

Kun käsitellään suurempia koodikantoja, johdonmukaisten tuontirakenteiden ylläpitäminen on ratkaisevan tärkeää sekä koodin luettavuuden että tiimiyhteistyön parantamiseksi. Yksi yleinen ongelma, jota kehittäjät kohtaavat, on se, kuinka pitkät tuontilausekkeet voivat sotkea tiedoston yläosan, varsinkin kun ne sisältävät useita elementtejä yhdestä moduulista. Tästä työkalut pitävät Kauniimpi ja ESLint tulevat peliin, jolloin voit automatisoida tuonnin jakamisen useille riveille. Sen varmistaminen, että tuontilausekkeet noudattavat määritettyä leveyttä, joka perustuu tyypillisesti tulostusleveys asetus auttaa estämään vaakasuuntaisen vierityksen ja pitää koodin helposti luettavissa.

Toinen tärkeä näkökohta on itse tuonnin organisatorinen rakenne. Käyttämällä tuonti/tilaus ESLint-sääntö, voit ryhmitellä tuonnit niiden alkuperän perusteella: sisäänrakennetut kirjastot, kolmannen osapuolen riippuvuudet tai sisäiset moduulit. Nämä ryhmät voidaan jakaa rivienvaihdolla, jolloin kehittäjien on helpompi tunnistaa riippuvuudet nopeasti. Tämä menetelmä edistää strukturoitua tuontia, joka yhdistettynä aakkosjärjestykseen aakkostaa -vaihtoehto parantaa entisestään koodikannan selkeyttä ja johdonmukaisuutta.

Lisäksi kehittäjät saattavat haluta hyödyntää työkaluja, kuten kauniimpi-plugin-organise-imports varmistaa, että tuontia ei vain jaeta oikein vaan myös järjestetään loogisesti uudelleen. Nämä työkalut pakottavat automaattisesti halutun tuontirakenteen joka kerta, kun tiedosto tallennetaan editoriin, kuten Visual Studio Code. Tämä varmistaa, että kehittäjien ei tarvitse säätää tuontilausekkeita manuaalisesti ja että he voivat keskittyä puhtaamman ja helpommin ylläpidettävän koodin kirjoittamiseen.