typescript - 我的 ".eslintrc.js"文件出错 - "Parsing error: "parserOptions.project”已为@typescript-eslint/parser 设置。”

Question

ESLint 似乎无法解析“.eslintrc.js”文件 .
重现步骤:
我建立了一个新的“hello world”TypeScript 项目，如下所示:

# Make a new directory for our new project
mkdir test
# Go into the new directory
cd test
# Create a "package.json" file
npm init --yes
# Install TypeScript
npm install typescript --save-dev
# Install ESLint (the linter)
npm install eslint --save-dev
# Install the Airbnb ESLint config (the most popular linting config in the world)
npm install eslint-config-airbnb-typescript --save-dev
# The import plugin for ESLint is needed for the Airbnb config to work properly with TypeScript
npm install eslint-plugin-import@^2.22.0 --save-dev
# The TypeScript plugin for ESLint is needed for the Airbnb config to work properly with TypeScript
npm install @typescript-eslint/eslint-plugin@^4.2.0 --save-dev
# Create the config file for TypeScript
touch tsconfig.json
# Create the config file for ESLint
touch .eslintrc.js
# Create the entry point for our TypeScript application
touch main.ts

我用以下(空白/默认配置)填充“tsconfig.json”文件:

{}

我使用以下内容填充“.eslintrc.js”文件，如 the Airbnb documentation 中所述:

module.exports = {
  extends: ['airbnb-typescript/base'],
  parserOptions: {
    project: './tsconfig.json',
  },
};

我用以下内容填充“main.ts”:

const foo = 'bar';

然后，当我运行 npx eslint main.ts ，它正确生成以下错误:

  1:7  error  'foo' is assigned a value but never used  @typescript-eslint/no-unused-vars

因此，ESLint 似乎工作正常。但是，当我运行 npx eslint .eslintrc.js 时，我收到以下错误:

  0:0  error  Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: .eslintrc.js.
The file must be included in at least one of the projects provided

每当我打开“.eslintrc.js”文件时，VSCode 中也会出现此错误。需要解决该错误，以便 ESLint 可以对文件的其余部分进行 lint。 (澄清一下，我希望“.eslintrc.js”文件以与我希望我的 TypeScript 源代码被 linted 相同的方式被 linted - 例如，有 2 个空格缩进等等。)
附加信息:我使用的是带有 Node v14.8.0 和 npm 版本 6.14.7 的 Windows 10 LTSC。

Answer 1

当您使用由 typescript 驱动的 eslint 规则时(当您的 eslint 配置包含 "parserOptions.project" 配置时)，如果您尝试 lint 一个不是 typescript 项目中包含的文件之一的文件，eslint 会抛出错误。
这是由于性能原因 - 过去 eslint 允许这样做，但这样做会导致很大的性能损失，所以他们 changed it to throw an error instead .
对不属于您的 TS 项目的文件进行 linting 的解决方案是创建一个 tsconfig 来扩展您的“真实” tsconfig，但包括您想要 lint 的所有文件。这通常称为 tsconfig.eslint.json看起来像这样:

// Special typescript project file, used by eslint only.
{
    "extends": "./tsconfig.json",
    "include": [
        // repeated from base config's "include" setting
        "src",
        "tests",

        // these are the eslint-only inclusions
        ".eslintrc.js",
    ]
}

而在您的 .eslintrc.js你会改变 project: './tsconfig.json'至 project: './tsconfig.eslint.json' .
这应该可以解决错误并允许 .eslintrc.js待整理的文件。