TypeScript-import optimaliseren: Prettier en ESLint configureren voor meerregelige opmaak

Importinstructies in TypeScript stroomlijnen

Wanneer u aan grote TypeScript- of JavaScript-projecten werkt, komt het vaak voor dat u lange importinstructies tegenkomt, vooral wanneer u meerdere leden uit één module importeert. Hoewel deze lijnen in eerste instantie onschuldig lijken, kunnen ze gemakkelijk uw grenzen overschrijden Mooier configuratie's afdrukbreedte instelling, waardoor de code moeilijker te lezen en te onderhouden is.

Om uw code netjes en leesbaar te houden, is het belangrijk om de opmaak van deze importbewerkingen te automatiseren. Gereedschappen zoals Mooier En ESLint kan worden aangepast om lange importinstructies automatisch in meerdere regels te splitsen. Dit zorgt ervoor dat uw code schoon en consistent blijft en voldoet aan de opmaakregels die u heeft ingesteld.

Het kan echter lastig zijn om deze tools te configureren om importinstructies automatisch naar wens op te maken. Hoewel de standaardinstellingen van zowel Prettier als ESLint veel opmaakproblemen oplossen, schieten ze vaak tekort als het gaat om het opsplitsen van lange importinstructies over meerdere regels.

In deze handleiding onderzoeken we hoe u Prettier en ESLint kunt configureren om importinstructies in uw TypeScript-project correct op te maken. We doorlopen de instellingen die nodig zijn om importen van meerdere regels te realiseren, terwijl de consistentie in uw codebase behouden blijft.

Prettier en ESLint configureren voor import van meerdere regels in TypeScript

Het belangrijkste doel van de bovenstaande scripts is configureren Mooier En ESLint om automatisch lange importinstructies over meerdere regels in een TypeScript-project op te maken. De Prettier-configuratie is ingesteld om coderingsstijlen te definiëren, zoals enkele aanhalingstekens en volgkomma's, en om te beheren hoe de code moet worden ingepakt met behulp van de afdrukbreedte regel. Wanneer de regel de ingestelde breedte overschrijdt (in dit geval 80 of 120 tekens), zal Prettier de code automatisch opmaken om deze beter leesbaar te maken. Door gebruik te maken van de mooiere plug-in-organiseren-imports plug-in zorgen we ervoor dat importinstructies logisch worden gesplitst en gesorteerd.

In de ESLint-configuratie is de importeren/bestellen regel uit de eslint-plugin-import plug-in is essentieel om te bepalen hoe de import wordt georganiseerd. Het doel hier is om een ​​consistente importstructuur af te dwingen, waarbij importen uit verschillende groepen (zoals ingebouwde modules, externe pakketten en interne modules) worden gescheiden door nieuwe regels. Bovendien worden importen binnen dezelfde groep alfabetisch gerangschikt om de leesbaarheid te verbeteren. Deze regels voorkomen dat importen rommelig worden, vooral als het gaat om grote aantallen geïmporteerde leden uit meerdere bestanden.

Een ander belangrijk aspect van de ESLint-installatie is de newlines-tussen optie, die ervoor zorgt dat elke importgroep wordt gescheiden door een witregel. Dit maakt de code visueel overzichtelijker, vooral in grotere codebases. Gecombineerd met de alfabetiseren regel wordt het hele importblok gestructureerd en gemakkelijker te onderhouden. Wanneer de code bij het opslaan in Visual Studio Code wordt opgemaakt, worden deze instellingen automatisch toegepast, waardoor een consistente importopmaak voor het hele project wordt gegarandeerd zonder handmatige aanpassingen.

Ten slotte is het testen van deze configuratie cruciaal om ervoor te zorgen dat deze correct werkt. De Grap unit-tests zijn ontworpen om te controleren of de Prettier- en ESLint-configuraties het splitsen en formatteren van importen zoals verwacht verwerken. Als er bijvoorbeeld een lange importinstructie wordt opgegeven, verifieert de test of deze op de juiste manier in meerdere regels is opgesplitst. Met deze aanpak kunnen ontwikkelaars het testen van hun opmaakregels automatiseren, zodat toekomstige codewijzigingen aan dezelfde richtlijnen voor de importstructuur zullen voldoen.

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

Verbetering van de leesbaarheid van code met Prettier- en ESLint-importopmaak

Bij het omgaan met grotere codebases wordt het handhaven van consistente importstructuren cruciaal voor het verbeteren van zowel de leesbaarheid van de code als de teamsamenwerking. Een veelvoorkomend probleem waarmee ontwikkelaars worden geconfronteerd, is hoe lang importinstructies de bovenkant van het bestand onoverzichtelijk kunnen maken, vooral als ze veel elementen uit een enkele module bevatten. Dit is waar tools zoals Mooier En ESLint spelen een rol, waardoor u de splitsing van import over meerdere regels kunt automatiseren. Ervoor zorgen dat importinstructies zich aan een gedefinieerde breedte houden, meestal gebaseerd op de afdrukbreedte instelling, helpt horizontaal scrollen te voorkomen en zorgt ervoor dat de code gemakkelijk te scannen is.

Een ander cruciaal aspect is het organisatiepatroon van de import zelf. Met behulp van de importeren/bestellen regel van ESLint kunt u importen groeperen op basis van hun oorsprong: ingebouwde bibliotheken, afhankelijkheden van derden of interne modules. Deze groepen kunnen worden gesplitst door nieuwe regels, waardoor het voor ontwikkelaars gemakkelijker wordt om afhankelijkheden snel te identificeren. Deze methode bevordert gestructureerde import, die, in combinatie met alfabetische sortering via de alfabetiseren optie, verbetert de duidelijkheid en consistentie in de hele codebase verder.

Bovendien willen ontwikkelaars mogelijk gebruik maken van tools zoals mooiere plug-in-organiseren-imports om ervoor te zorgen dat de invoer niet alleen correct wordt gesplitst, maar ook logisch wordt herschikt. Deze tools dwingen automatisch de gewenste importstructuur af telkens wanneer het bestand wordt opgeslagen in een editor zoals Visual Studio Code. Dit zorgt ervoor dat ontwikkelaars importinstructies niet handmatig hoeven aan te passen en zich kunnen concentreren op het schrijven van schonere en beter onderhoudbare code.