node.js - Kan ikke linting av mitt TypeScript-prosjekt ved bruk av @typescript-eslint/eslint-plugin og eslint.config.js flat konfigurasjon

Jeg ønsker å migrere fra .eslintrc.json til eslint.config.js før konfigurasjonen blir avviklet i ESLint v9.0.0. Jeg gikk gjennom grunnene bak endringen, som jeg fant godt begrunnet.

Her er min nye eslint.config.js med noen grunnleggende innstillinger:

const typeScriptEslintParser = require('@typescript-eslint/parser');
const typeScriptEsLintPlugin = require('@typescript-eslint/eslint-plugin');
const esLintConfigPrettier = require('eslint-config-prettier');

module.exports = [
  "eslint:recommended",
  typeScriptEsLintPlugin.configs.recommended,
  esLintConfigPrettier,
  {
    languageOptions: {
      parser: typeScriptEslintParser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
      },
    },
    plugins: {
      '@typescript-eslint': typeScriptEsLintPlugin,
    },
    rules: {
      '@typescript-eslint/no-unused-vars': 'error',

    },
  },
];

Filen .eslintrc.json utvider normalt fra eslint:recommended og plugin:@typescript-eslint/recommended. Når jeg prøver å legge til konfigurasjonen eksportert av @typescript-eslint/recommended til eslint.config.js, får jeg følgende feil:

ESLint: Error: Key "extends": This appears to be in eslintrc format rather than flat config format.

Til slutt, når det gjelder IDE-støtte, ser WebStorm automatisk etter .eslintrc.* -filer. Hvordan vil denne situasjonen endre seg med den nye flate konfigurasjonen?

Takk på forhånd

Svar #1

Her er hva jeg gjorde for å løse problemet,

  1. npm i --save-dev @eslint/eslintrc
  2. Importer FlatCompat til din eslint.config.js fra @eslint/eslintrc-pakken.
  3. Opprett og konfigurer en compat-innpakning av FlatCompat for å oversette dine ESLintRC-stilkonfigurasjoner til flat-konfigurasjoner.
  4. Wrapperen compat bør oversette konfigurasjonen eksportert av @typescript-eslint/eslint-plugin til det tilsvarende flat-config-objektet.

Etter å ha gått gjennom alle trinnene, endte jeg opp med følgende eslint.config.json:

const typeScriptEsLintPlugin = require('@typescript-eslint/eslint-plugin');
const esLintConfigPrettier = require('eslint-config-prettier');
const { FlatCompat } = require('@eslint/eslintrc');

// Translate ESLintRC-style configs into flat configs.
const compat = new FlatCompat({
  baseDirectory: __dirname,
  recommendedConfig: typeScriptEsLintPlugin.configs['recommended'],
});

module.exports = [
  // ESLint recommended flat config.
  'eslint:recommended',

  // Flat config for parsing TypeScript files. Includes rules for TypeScript.
  ...compat.config({
    env: { node: true },
    extends: ['plugin:@typescript-eslint/recommended'],
    parser: '@typescript-eslint/parser',
    parserOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
    },
    plugins: ['@typescript-eslint'],
    rules: {
      '@typescript-eslint/no-unused-vars': 'error',
      '@typescript-eslint/no-empty-interface': 'error',
    },
  }),

  // Flat config for turning off all rules that are unnecessary or might conflict with Prettier.
  esLintConfigPrettier,

  // Flat config for ESLint rules.
  {
    rules: {
      camelcase: ['error', { ignoreDestructuring: true }],
    },
  },
];

Det er noen punkter å ta med seg:

  • Wrapperen compat bør vite om konfigurasjonen du ønsker å oversette. Hvis konfigurasjonen din utvider fra eslint:recommended, bør du gi recommendedConfig til FlatCompat-konstruktøren. Ellers vil du få:

ESLint: TypeError: Manglende parameter 'recommendedConfig' i FlatCompat-konstruktøren.

  • eslint-config-prettier trenger ingen oversettelse da den eksporterer et kompatibelt flat-konfigurasjonsobjekt.
  • eslint:recommended er allerede tilgjengelig som flat config. Du kan imidlertid få følgende advarsel når du bruker module.exports-syntaks:

ESLint: 'module' er ikke definert. (no-undef)

Dette kan fikses hvis du definerer node:true som en miljøvariabel. Ifølge dokumentasjonen ble dette problemet løst ved å bruke sourceType: 'module' i parserOptions-objektet i eslint.config.js. Dessverre klarte jeg ikke å bli kvitt feilen på den måten.

  • Jeg isolerte all TypeScript-ESLint i en uavhengig flat-konfigurasjon. Du kan også ha en flat-konfigurasjon bare for parseralternativer ved å bruke languageOptions-egenskapen. Det er mye fleksibilitet når man overstyrer flat-konfigurasjoner. Bruk det som gir mening for deg.
  • Ikke erklær den samme pluginen på nytt i flere flat-konfigurasjoner, ellers vil du få feil.

Svar #2

Enten @typescript-eslint/eslint-plugin eller eslint-config-prettier gir konfigurasjon i eslintrc-format i stedet for i eslint.config.js-format

Du kommer til å måtte erstatte dem (muligens med @typescript-eslint/eslint-plugin/eslint.config.js hvis det finnes en) eller pakke dem inn i en kompatibilitetsfunksjon, se https://eslint.org/blog/2022/08/new-config-system-part-2/#backwards-compatibility-utility

import { FlatCompat } from "@eslint/eslintrc";
const compat = new FlatCompat(...);

export default [
    // mimic ESLintRC-style extends
    ...compat.extends("standard", "example"),
]

Relaterte artikler