如何使用ESLint的平面配置来配置ESLint的解析器和插件？

Question

我想使用可用的新配置来配置 ESLint，“平面配置”（即

eslint.config.js

文件）。我目前正在为客户开发一个 TypeScript 项目，必须配置 ESLint 以便它能够解析 TypeScript 语法，但我似乎无法正确配置 ESLint 以使用 TS 解析器插件。在老式的

.json

配置中，插件工作正常。有人知道如何使用平面配置正确配置 ESLint 的 TS 解析器插件，以便 ESLint 能够解析和 lint TypeScript 文档吗？

---

我需要正确配置的解析器插件如下所示：

• @typescript-eslint/parser

• @typescript-eslint/eslint-plugin

---

您可以在下面看到我当前的配置文件。我尝试了配置中的细微差别，但下面的文件包含我认为应该有效的配置，但正如我已经提到的，它不起作用。

import eslintPlugin from '@typescript-eslint/eslint-plugin'

export default [
  {
    files: ["src/**/*.ts", "src/main.cts", "src/main.mts"],
    ignores: ["**/*.d.*", "**/*.map.*", "**/*.js", "**/*.mjs", "**/*.cjs"],
    plugins: { eslintPlugin },

    languageOptions: {
      ecmaVersion: "latest",
      sourceType: "module",
      parser: "eslintPlugin/parser",
    },

    rules: {
      semi: "error",
      quotes: ["error", "single"],
      indent: [
        "error",
        2,
        {
          SwitchCase: 1,
          VariableDeclarator: "first",
          ImportDeclaration: "first",
          ArrayExpression: "first",
          ObjectExpression: "first",
          CallExpression: { arguments: "first" },
          FunctionDeclaration: { body: 1, parameters: 4 },
          FunctionExpression: { body: 1, parameters: 4 },
        },
      ],
    },
  },

];

Answer 1

我正在使用带有 TypeScript 的平面配置。以下是我认为配置的重要部分：

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 },
];

Answer 3

这是我的工作单位

eslint.config.mjs

，重点如下：

• 支持Typescript解析器和插件
• 启用 Node.js 和 Mocha 全局
• 使用ESM格式（即使对于CJS项目）

import globals from "globals";
import tsParser from "@typescript-eslint/parser";
import tsPlugin from "@typescript-eslint/eslint-plugin";
import eslintJsPlugin from "@eslint/js";

export default [
  {
    rules: eslintJsPlugin.configs.recommended.rules,
  },
  {
    files: [ "**/*.ts" ],
    languageOptions: {
      parser: tsParser,
      globals: globals.node,
    },
    plugins: {
      "@typescript-eslint": tsPlugin,
    },
    rules: {
      ...tsPlugin.configs.recommended.rules,
      "no-console": "error",
    }
  },
  {
    files: [ "test/**/*.ts" ],
    languageOptions: {
      globals: globals.mocha,
    },
  },
];

要在 CommonJS 项目中使用此配置运行 eslint，我使用 以下命令：

ESLINT_USE_FLAT_CONFIG=true npx eslint src test

Answer 4

查看 microsoft/vscode-eslint 存储库中的 flatConfig 示例（➜ VSCode ESLint 扩展）。

示例： eslint.config.js

const globals = require('globals');
const typescriptParser =  require('@typescript-eslint/parser');
const typescriptPlugin = require('@typescript-eslint/eslint-plugin');

module.exports = [
    "eslint:recommended",
    {
        files: ["**/*.js"],
        languageOptions: {
            parserOptions: {
                sourceType: "module"
            },
            globals: {
                ...globals.browser,
                ...globals.node,
                ...globals.es6,
                ...globals.commonjs
            }
        },
    },
    {
        files: ["sub/*.js"],
        rules: {
            "no-undef": "warn",
            "no-console": "warn"
        }
    },
    {
        files: ["*.ts", "**/*.ts"],
        plugins: {
            "@typescript-eslint": typescriptPlugin
        },
        languageOptions: {
            parser: typescriptParser,
            parserOptions: {
                project: "./tsconfig.json",
                sourceType: "module",
                ecmaVersion: 2020
            }
        },
        rules: {
            "semi": "off",
            "@typescript-eslint/semi": "error",
            "no-extra-semi": "warn",
            "curly": "warn",
            "quotes": ["error", "single", { "allowTemplateLiterals": true } ],
            "eqeqeq": "error",
            "indent": "off",
            "@typescript-eslint/indent": ["warn", "tab", { "SwitchCase": 1 } ],
            "@typescript-eslint/no-floating-promises": "error"
        }
    }
]

ESLint 博客文章（平面配置）：

1. ESLint 的新配置系统，第 1 部分：背景
2. ESLint 的新配置系统，第 2 部分：平面配置简介（最有趣）
3. ESLint 的新配置系统，第 3 部分：开发者预览

Answer 5

也许值得一提 typescript-eslint 建议使用另一种方法来定义其 eslint 平面配置：

示例：

eslint.config.js

// @ts-check

import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
);

https://typescript-eslint.io/getting-started/