Optimització de les importacions de TypeScript: configuració de Prettier i ESLint per al format multilínia

Racionalització de les declaracions d'importació en TypeScript

Quan es treballa en grans projectes de TypeScript o JavaScript, és habitual trobar declaracions d'importació llargues, especialment quan s'importen diversos membres d'un sol mòdul. Tot i que aquestes línies inicialment poden semblar inofensives, poden superar fàcilment les vostres Més bonica de configuració printWidth configuració, fent que el codi sigui més difícil de llegir i mantenir.

Per mantenir el vostre codi net i llegible, és important automatitzar el format d'aquestes importacions. Eines com Més bonica i ESLint es pot personalitzar per dividir automàticament les declaracions d'importació llargues en diverses línies. Això garanteix que el vostre codi es mantingui net i coherent, complint les regles de format que hàgiu configurat.

Tanmateix, configurar aquestes eines per formatar automàticament les declaracions d'importació com es desitgi pot ser complicat. Tot i que la configuració predeterminada de Prettier i ESLint gestionen molts problemes de format, sovint es queden curtes quan es tracta de desglossar les declaracions d'importació llargues en diverses línies.

En aquesta guia, explorarem com configurar Prettier i ESLint per formatar correctament les declaracions d'importació al vostre projecte TypeScript. Repassarem la configuració necessària per aconseguir importacions de diverses línies mantenint la coherència en la vostra base de codi.

Configuració de Prettier i ESLint per a importacions de diverses línies en TypeScript

L'objectiu principal dels scripts anteriors és configurar Més bonica i ESLint per formatar automàticament sentències d'importació llargues en diverses línies en un projecte TypeScript. La configuració Prettier està configurada per definir estils de codificació, com ara cometes simples i comes al final, i per gestionar com s'ha d'embolicar el codi mitjançant el printWidth regla. Quan la línia superi l'amplada establerta (en aquest cas, 80 o 120 caràcters), Prettier formatearà automàticament el codi per fer-lo més llegible. Mitjançant l'ús de prettier-plugin-organize-imports connector, ens assegurem que les declaracions d'importació es divideixen i s'ordenen de manera lògica.

A la configuració ESLint, el importació/comandes regla des del eslint-plugin-import el connector és essencial per controlar com s'organitzen les importacions. L'objectiu aquí és fer complir una estructura d'importació coherent, on les importacions de diferents grups (com ara mòduls integrats, paquets externs i mòduls interns) estan separades per noves línies. A més, les importacions dins del mateix grup estan ordenades alfabèticament per millorar la llegibilitat. Aquestes regles eviten que les importacions s'engordin, especialment quan es tracta d'un gran nombre de membres importats de diversos fitxers.

Un altre aspecte important de la configuració d'ESLint és noves línies-entre opció, que garanteix que cada grup d'importació estigui separat per una línia en blanc. Això fa que el codi estigui més organitzat visualment, especialment en bases de codi més grans. Combinat amb el alfabetitzar regla, tot el bloc d'importació s'estructura i es fa més fàcil de mantenir. Quan el codi es formatea en desar-lo a Visual Studio Code, aquesta configuració s'aplica automàticament, garantint un format d'importació coherent a tot el projecte sense ajustaments manuals.

Finalment, provar aquesta configuració és crucial per assegurar-se que funciona correctament. El Broma Les proves d'unitat estan dissenyades per comprovar si les configuracions Prettier i ESLint gestionen la divisió i el format d'importació com s'esperava. Per exemple, quan es proporciona una declaració d'importació llarga, la prova verifica si està dividida correctament en diverses línies. Aquest enfocament permet als desenvolupadors automatitzar la prova de les seves regles de format, assegurant-se que qualsevol canvi de codi futur s'adhereix a les mateixes directrius d'estructura d'importació.

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

Millora de la llegibilitat del codi amb el format d'importació Prettier i ESLint

Quan es tracta de bases de codi més grans, mantenir estructures d'importació coherents esdevé crucial per millorar tant la llegibilitat del codi com la col·laboració en equip. Un dels problemes habituals que s'enfronten els desenvolupadors és quant de temps poden desordenar la part superior del fitxer les declaracions d'importació, especialment quan contenen molts elements d'un sol mòdul. Aquí és on agraden les eines Més bonica i ESLint entra en joc, cosa que us permet automatitzar la divisió de les importacions en diverses línies. Assegurar-se que les declaracions d'importació s'adhereixen a una amplada definida, normalment basada en printWidth configuració, ajuda a evitar el desplaçament horitzontal i fa que el codi sigui fàcil d'escanejar.

Un altre aspecte crucial és el patró organitzatiu de les importacions en si. Utilitzant el importació/comandes regla proporcionada per ESLint, podeu agrupar les importacions en funció del seu origen: biblioteques integrades, dependències de tercers o mòduls interns. Aquests grups es poden dividir per noves línies, cosa que facilita als desenvolupadors identificar les dependències ràpidament. Aquest mètode promou les importacions estructurades, que, quan es combinen amb l'ordenació alfabètica a través del alfabetitzar opció, millora encara més la claredat i la coherència a tota la base de codi.

A més, és possible que els desenvolupadors vulguin aprofitar eines com ara prettier-plugin-organize-imports per garantir que les importacions no només es divideixen correctament, sinó que també es reorganitzen de manera lògica. Aquestes eines apliquen automàticament l'estructura d'importació desitjada cada vegada que es desa el fitxer en un editor com Visual Studio Code. Això garanteix que els desenvolupadors no hagin d'ajustar manualment les declaracions d'importació i que es puguin centrar a escriure un codi més net i més fàcil de mantenir.