TypeScript importēšanas optimizēšana: Prettier un ESLint konfigurēšana vairāku rindu formātam

Importēšanas paziņojumu racionalizēšana programmā TypeScript

Strādājot ar lieliem TypeScript vai JavaScript projektiem, bieži rodas gari importēšanas paziņojumi, it īpaši, importējot vairākus dalībniekus no viena moduļa. Lai gan sākotnēji šīs līnijas var šķist nekaitīgas, tās var viegli pārsniegt jūsu Smukāk konfigurācijas drukas platums iestatījumu, padarot kodu grūtāk lasāmu un apkopi.

Lai jūsu kods būtu kārtīgs un lasāms, ir svarīgi automatizēt šo importēto failu formatēšanu. Tādi rīki kā Smukāk un ESLint var pielāgot, lai automātiski sadalītu garus importēšanas paziņojumus vairākās rindās. Tas nodrošina, ka kods paliek tīrs un konsekvents, ievērojot jūsu iestatītos formatēšanas noteikumus.

Tomēr šo rīku konfigurēšana, lai automātiski formatētu importēšanas paziņojumus pēc vēlēšanās, var būt sarežģīta. Lai gan Prettier un ESLint noklusējuma iestatījumi risina daudzas formatēšanas problēmas, tie bieži vien neatbilst garu importēšanas paziņojumu sadalīšanai vairākās rindās.

Šajā rokasgrāmatā mēs izpētīsim, kā konfigurēt Prettier un ESLint, lai pareizi formatētu importēšanas paziņojumus jūsu TypeScript projektā. Mēs apskatīsim iestatījumus, kas nepieciešami vairāku rindu importēšanai, vienlaikus saglabājot konsekvenci jūsu kodu bāzē.

Prettier un ESLint konfigurēšana vairāku rindu importēšanai programmā TypeScript

Iepriekš minēto skriptu galvenais mērķis ir konfigurēt Smukāk un ESLint lai automātiski formatētu garus importēšanas paziņojumus vairākās TypeScript projekta rindās. Prettier konfigurācija ir iestatīta, lai definētu kodēšanas stilus, piemēram, atsevišķas pēdiņas un beigu komatus, un pārvaldītu, kā kods ir jāiekļauj, izmantojot drukas platums noteikums. Kad rinda pārsniedz iestatīto platumu (šajā gadījumā 80 vai 120 rakstzīmes), Prettier automātiski formatēs kodu, lai padarītu to lasāmāku. Izmantojot glītāks-plugin-organize-imports spraudnis, mēs nodrošinām, ka importēšanas priekšraksti tiek sadalīti un sakārtoti loģiski.

ESLint konfigurācijā imports/pasūtīšana noteikums no eslint-plugin-import spraudnis ir būtisks, lai kontrolētu importēšanas organizēšanu. Mērķis ir ieviest konsekventu importēšanas struktūru, kurā importēšana no dažādām grupām (piemēram, iebūvētie moduļi, ārējās pakotnes un iekšējie moduļi) tiek atdalīta ar jaunām rindiņām. Turklāt, lai uzlabotu lasāmību, tās pašas grupas importēšana ir sakārtota alfabēta secībā. Šie noteikumi neļauj importam kļūt pārblīvētam, it īpaši, ja tiek apstrādāts liels skaits importētu dalībnieku no vairākiem failiem.

Vēl viens nozīmīgs ESLint iestatīšanas aspekts ir jaunas rindiņas-starp opciju, kas nodrošina, ka katra importēšanas grupa ir atdalīta ar tukšu rindiņu. Tas padara kodu vizuāli sakārtotāku, īpaši lielākās kodu bāzēs. Apvienojumā ar sakārtot alfabētu noteikums, viss importēšanas bloks kļūst strukturēts un vieglāk uzturējams. Kad kods tiek formatēts, saglabājot programmā Visual Studio Code, šie iestatījumi tiek lietoti automātiski, nodrošinot konsekventu importēšanas formatējumu visā projektā bez manuālām korekcijām.

Visbeidzot, šīs konfigurācijas pārbaude ir ļoti svarīga, lai nodrošinātu tās pareizu darbību. The Joks vienību testi ir paredzēti, lai pārbaudītu, vai Prettier un ESLint konfigurācijas apstrādā importa sadalīšanu un formatēšanu, kā paredzēts. Piemēram, ja tiek nodrošināts garš importēšanas paziņojums, tests pārbauda, ​​vai tas ir pareizi sadalīts vairākās rindās. Šī pieeja ļauj izstrādātājiem automatizēt savu formatēšanas kārtulu testēšanu, nodrošinot, ka turpmākās koda izmaiņas atbilst tām pašām importēšanas struktūras vadlīnijām.

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

Uzlabojiet koda lasāmību, izmantojot Prettier un ESLint importa formatējumu

Strādājot ar lielākām kodu bāzēm, konsekventu importēšanas struktūru uzturēšana kļūst ļoti svarīga, lai uzlabotu gan koda lasāmību, gan komandas sadarbību. Viena izplatīta problēma, ar ko saskaras izstrādātāji, ir tas, cik ilgi importēšanas paziņojumi var pārblīvēt faila augšdaļu, it īpaši, ja tajos ir daudz elementu no viena moduļa. Šeit ir tādi rīki kā Smukāk un ESLint sāk darboties, ļaujot automatizēt importa sadalīšanu vairākās rindās. Nodrošinot, ka importēšanas paziņojumi atbilst noteiktam platumam, parasti pamatojoties uz drukas platums iestatījums, palīdz novērst horizontālo ritināšanu un ļauj viegli skenēt kodu.

Vēl viens būtisks aspekts ir paša importa organizatoriskais modelis. Izmantojot imports/pasūtīšana ESLint nodrošināto noteikumu, varat grupēt importēšanu, pamatojoties uz to izcelsmi: iebūvētās bibliotēkas, trešo pušu atkarības vai iekšējie moduļi. Šīs grupas var sadalīt ar jaunām rindiņām, tādējādi izstrādātājiem ir vieglāk ātri noteikt atkarības. Šī metode veicina strukturētu importu, kas, ja to apvieno ar alfabētisko šķirošanu, izmantojot sakārtot alfabētu opciju, vēl vairāk uzlabo skaidrību un konsekvenci visā kodu bāzē.

Turklāt izstrādātāji var vēlēties izmantot tādus rīkus kā glītāks-plugin-organize-imports nodrošināt, ka imports tiek ne tikai pareizi sadalīts, bet arī loģiski pārkārtots. Šie rīki automātiski ievieš vēlamo importēšanas struktūru ikreiz, kad fails tiek saglabāts tādā redaktorā kā Visual Studio Code. Tas nodrošina, ka izstrādātājiem nav manuāli jāpielāgo importēšanas paziņojumi, un viņi var koncentrēties uz tīrāka un labāk uzturējamu koda rakstīšanu.