如何使用 ESLint 的新 Flat-config 正确配置解析器和插件？

Question

如何使用新的 Flat-Config 系统（也称为eslint.config.js文件）配置 ESLint ，以便它与 @TypeScript-ESLint/ESLint-plugin 和 TypeScript 解析器一起工作？

\n

---

\n

\xe2\x80\x94

\n

ESLint 的新配置系统“Flat Config”允许在单个配置文件中使用多个规则集。这使得覆盖规则比使用 ESLint 在其原始配置系统中实现的级联文件系统概念要容易得多。因为当我将包发布到 NPM 时，我必须添加对 ESM 和 CJS 的支持，所以 Flat-config 就像梦想成真，因为它将允许我以更简单的方式使用 ESLint。

\n

唯一的问题是我无法让 ESLint 的新配置系统与任何插件一起使用，而另一方面，我无法让插件与平面配置一起使用。

\n

当使用 ESLint 检查 TypeScript 时，配备我下面列出的 2 个插件非常重要。这两个插件实现了允许 TypeScript 正确检查 TypeScript 代码库的规则。我必须拥有它们。

\n

\n
• ...TypeScript-ESLint 解析器@typescript-eslint/parser
\n
• & TypeScript-ESLint 插件@typescript-eslint/eslint-plugin
\n

\n

2BH 我的配置文件到处都是，目前它看起来像下面的例子，但这个例子只是显示了我最近的绝望尝试，我已经尝试了各种各样的事情。

\n

import eslintPlugin from \'@typescript-eslint/eslint-plugin\'\n\nexport default [\n  {\n    files: ["src/**/*.ts", "src/main.cts", "src/main.mts"],\n    ignores: ["**/*.d.*", "**/*.map.*", "**/*.js", "**/*.mjs", "**/*.cjs"],\n    plugins: { eslintPlugin },\n\n    languageOptions: {\n      ecmaVersion: "latest",\n      sourceType: "module",\n      parser: "eslintPlugin/parser",\n    },\n\n    rules: {\n      semi: "error",\n      quotes: ["error", "single"],\n      indent: [\n        "error",\n        2,\n        {\n          SwitchCase: 1,\n          VariableDeclarator: "first",\n          ImportDeclaration: "first",\n          ArrayExpression: "first",\n          ObjectExpression: "first",\n          CallExpression: { arguments: "first" },\n          FunctionDeclaration: { body: 1, parameters: 4 },\n          FunctionExpression: { body: 1, parameters: 4 },\n        },\n      ],\n    },\n  },\n\n];\n\n

\n
\n

---

\n

我还使用 TypeScript 插件TypeScript ESLint Language Service插件。我不喜欢 TypeScript 和 ESLint 报告相同的错误，因此我不使用 ESLint 的任何扩展，但我确实集成了一个构建系统，该系统可以对我的项目进行 lint 处理，并报告 ESLint 发现的错误通过 TSC 编译器。

\n

但问题是一样的，我无法让“TypeScript/ESLint 语言服务”插件与新的 ESLint 配置系统（又名平面配置）一起使用。

\n

---

\n

如果有人知道如何使用 eslint.config.js 平面配置文件配置 eslint，以便它与 typescript/eslint 插件（eslint 插件）和/或“ TS Language Service”插件（typescript 插件）一起使用）我希望您能向我展示该配置是什么样的。

\n

Answer 1

我使用带有打字稿的平面配置。我认为以下是配置的重要部分：

import ts from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';
import functional from 'eslint-plugin-functional';
import imprt from 'eslint-plugin-import'; // 'import' is ambiguous & prettier has trouble


...


    languageOptions: {
      parser: tsParser,
      parserOptions: {
        ecmaFeatures: { modules: true },
        ecmaVersion: 'latest',
        project: './tsconfig.json',
      },
    },
    plugins: {
      functional,
      import: imprt,
      '@typescript-eslint': ts,
      ts,
    },

...

    rules: {
      ...ts.configs['eslint-recommended'].rules,
      ...ts.configs['recommended'].rules,

      'ts/return-await': 2,

请注意，ts 插件出现了两次。共享配置使用的命名空间比我想要使用的命名空间更长。

Answer 2

这对我有用，但我仍然发现 API 相当冗长。

const tsPlugin = require("@typescript-eslint/eslint-plugin");
const tsParser = require("@typescript-eslint/parser");

const tsOverrideConfig = tsPlugin.configs["eslint-recommended"].overrides[0];
const tsRecommemdedConfig = tsPlugin.configs.recommended;
const files = ["**/*.ts", "**/*.tsx"];

module.exports = [
  "eslint:recommended",
  {
    files,
    linterOptions: {
      reportUnusedDisableDirectives: true,
    },
    languageOptions: {
      parser: tsParser,
    },
    plugins: {
      "@typescript-eslint": tsPlugin,
    },
  },
  { files, rules: tsOverrideConfig.rules },
  { files, rules: tsRecommemdedConfig.rules },
];