我的“.eslintrc.js”文件出错 - “解析错误：已为 @typescript-eslint/parser 设置了“parserOptions.project”。”

Posted 2023-03-07

【中文标题】我的“.eslintrc.js”文件出错 - “解析错误：已为 @typescript-eslint/parser 设置了“parserOptions.project”。”

【英文标题】：Error with my ".eslintrc.js" file - "Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser."

【发布时间】：2021-01-24 00:50:40

【问题描述】：

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”文件：

我用the Airbnb documentation中指定的以下内容填充“.eslintrc.js”文件：

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 源代码被 lint 相同的方式进行 lint - 例如，有 2 个空格缩进等等。）

附加信息：我在 Windows 10 LTSC 上使用 Node v14.8.0 和 npm 版本 6.14.7。

【参考方案1】：

Retsam‘s answer 运行良好。但是，您也可以通过使用 ESLint’s overrides 仅对 TypeScript 文件使用 @typescript-eslint/parser。这避免了为 ESLint 创建一个新的tsconfig.json。

module.exports = 
  // Common configuration for .eslintrc.js and TypeScript files
  rules: 
    eqeqeq: "error",
    "no-var": "error",
    // ...
  ,
  overrides: [
    files: "**/*.ts"
    // TypeScript-only configuration
    parser: "@typescript-eslint/parser",
    parserOptions: 
      project: "tsconfig.json",
      tsconfigRootDir: __dirname,
      sourceType: "module",
    ,
    plugins: ["@typescript-eslint"],
    rules: 
      "@typescript-eslint/no-floating-promises": "error",
      // ...
    
  ],

【参考方案2】：

当您使用 typescript 驱动的 eslint 规则时（当您的 eslint 配置包含 "parserOptions.project" 配置时），如果您尝试 lint 不是包含在 typescript 中的文件之一的文件，eslint 会引发错误项目。

这是由于性能原因 - 以前是 eslint 允许这样做的，但这样做会导致很大的性能损失，所以他们changed it to throw an error instead。

对不属于您的 TS 项目的文件进行 linting 的解决方案是创建一个 tsconfig，该 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 文件。

【讨论】：

即使在尝试执行上述步骤后，我仍然收到错误消息。

如果该文件是javascript 文件，为什么我们要让typescript 检测该文件？

@SalahAdDin 它不是“被打字稿检查”，而是被 eslint 用@eslint-typescript/parser 检查。但由于它使用 typescript 编译器来提供类型，因此需要将文件包含在正在使用的 typescript 项目中。

好的，但是那个解析器不是把javascript文件解析为typescript文件吗？

@SalahAdDin 技术上是的，但是由于 TS 的语法是 JS 语法的超集，所以没关系。