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

Question

如何使用新的平面配置系统(又名eslint.config.js文件(来配置ESLint，使其与@TypeScript ESLint/ESLint插件&TypeScript解析器

---

-

ESLint的新配置系统，"扁平配置">允许在单个配置文件中使用多个规则集。这使得重写规则比使用ESLint在其原始配置系统中实现的级联文件系统概念要容易得多。因为我必须添加对ESM&CJS当我向NPM发布一个包时，Flat-config就像梦想成真一样，因为它将允许我以更简单的方式使用ESLint。

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

当Linting TypeScript使用ESLint时，配备我下面列出的两个插件是非常重要的。这两个插件实现了允许typescript能够正确地整理typescript代码库的规则。我必须拥有它们。

• 。。。TypeScript ESLint解析器@TypeScript ESLint/Parser
• &TypeScript ESLint插件@TypeScript ESLint/ESLint插件

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

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

---

我还使用TypeScript插件TypeScript ESLint语言服务插件。我不喜欢TypeScript&ESLint报告了相同的错误，所以我没有对ESLint使用任何扩展，但我确实集成了一个构建系统，该系统将我的项目作为工作进行lint，并且ESLint发现的错误通过TSC编译器报告。

但问题是一样的，我无法获得"TypeScript/ESLint语言服务">插件与新的ESLint配置系统(也称为平面配置(配合使用。

---

如果有人知道如何使用eslint.config.js平面配置文件来配置eslint，以便它与typescript/elint插件(eslint的插件(&或"；TS语言服务">plugin(typescript的插件(我希望你能告诉我这个配置是什么样子的。

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

查看microsoft/vscode esint存储库中的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 4

这是我的工作平面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项目中使用此配置运行esint，我使用以下命令：

ESLINT_USE_FLAT_CONFIG=true npx eslint -c eslint.config.mjs src test