ESLint 的新平面配置。正确配置打字稿解析器答案

【问题标题】：ESLint's new flat-config. Correctly configuring typescript parserESLint 的新平面配置。正确配置打字稿解析器
【发布时间】：2022-11-02 00:41:29
【问题描述】：

我正在尝试使用 ESLint 的新功能为我当前的项目配置 ESLint"Flat Config".该链接的 URL 会将您带到 ESLint 的创建者 Nicholas Zakas 撰写的文章。这篇文章涵盖了配置平面配置，尽管它以一种非常因果的方式记录了它。 ESLint 的新配置系统使用了新的eslint.config.js文件，而不是原始的 .eslintrc(.*) 文件。它还使用 ESM。我正确配置了新的，我真的很喜欢使用它，但是，我无法导入我需要的插件和解析器。 Zakas 在他的文章中介绍了如何导入解析器，他还提到配置应该与现有插件兼容。不过，我还是想不通。我要使用的插件和解析器是...

...TypeScript-ESLint 解析器 @typescript-eslint/parser
& TypeScript-ESLint 插件@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 },
        },
      ],
    },
  },

];

我很确定它是 CJS/ESM 的东西。我知道我无法导入如上所示的 @typescript-eslint/eslint-plugin 模块，因为它没有默认导出，实际上它使用 CJS 导出，但看起来它以一种假定可互操作的方式导出它?所以也许我的tsconfig.json 需要进行不同的配置？我使用析构函数来查看它可以让我访问什么，但无济于事，我可以访问的所有方法都证明对我的情况毫无价值。我不知道正确的入口点在哪里，但我猜如果我可以使用 ESM 导入它，我就会让它工作。

如果有人能够在 ESLint 的新平面配置中使用 "@typescript-eslint/parser" 和 "@typescript-eslint/eslint-plugin"，我想知道导入和配置插件是什么样子的。

对于没有阅读过新的平面配置的人来说，这个问题可能听起来令人困惑，并且习惯于按照一直以来的配置方式来配置 ESLint。这是因为 flat-config 非常不同。现在假设通过插件访问解析器，所以我认为您不需要解析器和插件，但我提到它们都是为了清楚地了解我正在尝试做的事情，即让 ESLint使用 typescript 的解析器和规则对我的 typescript 项目进行 lint。

【问题讨论】：

标签： eslint typescript-eslint eslint-flat-config

【解决方案1】：

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

import ts from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';

...


    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 插件有两次。共享配置使用的命名空间比我想使用的要长。

【讨论】：