已為 @typescript-eslint/parser 設定了 “parserOptions.project”

我用 --template typescript 創建了一個新的 React Native 專案

我刪除了作為樣板一部分的 template 目錄。

然後我繼續添加 ESLint：

module.exports = {
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  extends: ["airbnb-typescript-prettier"]
};

但是，當我打開 babel.config.js 時，我收到這個錯誤

解析錯誤：已為 @typescript-eslint/parser 設定 "parserOptions.project"。
該檔案與您的專案配置不符：/Users/Dan/site/babel.config.js。
該檔案必須包含在提供的至少一個專案中。eslint

答案＃1

JavaScript 和 TypeScript 文件的不同 lint 規則

這個問題發生的原因可能如下其中之一：

您正在使用需要 type 資訊的規則，但未指定 parserOptions.project；
你指定了 parserOptions.project，但未指定 createDefaultProgram（它將在未來版本中被移除），並且你正在檢查不包含在專案中的檔案（例如 babel.config.js、metro.config.js）

ESLint 平面配置（版本 >= 9）

您可以僅在 ts 檔案上使用 TypeScript 規則，請使用以下設定（另請參閱文件）：

const tsPlugin = require('@typescript-eslint/eslint-plugin');
const tsEslint = require('typescript-eslint');

/**
 * @type {import('eslint').Linter.FlatConfig[]}
 */
module.exports = [
  // This is just an example for rules specific to JS files
  {
    files: ['**/*.js'],

    rules: {
      'no-duplicate-imports': 'error',
    },
  },

  ...tsEslint.configs.recommendedTypeChecked.map((config) => ({
    ...config,
    files: ['**/*.ts'], // We use TS config only for TS files
  })),

  {
    files: ['**/*.ts'],

    // This is required, see the docs
    languageOptions: {
      parserOptions: {
        project: true,
        tsconfigRootDir: __dirname, // or import.meta.dirname for ESM
      },
    },

    // This is needed in order to specify the desired behavior for its rules
    plugins: {
      '@typescript-eslint': tsPlugin,
    },

    // After defining the plugin, you can use the rules like this
    rules: {
      '@typescript-eslint/no-unused-vars': 'error',
    }
  }
]

ESLint 遺留配置（版本 <= 8）

要解決此問題，請更新您的 ESLint 配置，使 TypeScript 規則僅適用於 TypeScript 文件：

{
  // ...
  parser: '@typescript-eslint/parser',
  plugins: ["@typescript-eslint"],
  overrides: [
    {
      files: ['*.ts', '*.tsx'], // Your TypeScript files extension

      // As mentioned in the comments, you should extend TypeScript plugins here,
      // instead of extending them outside the `overrides`.
      // If you don't want to extend any rules, you don't need an `extends` attribute.
      extends: [
        'plugin:@typescript-eslint/recommended',
        'plugin:@typescript-eslint/recommended-requiring-type-checking',
      ],

      parserOptions: {
        project: ['./tsconfig.json'], // Specify it only for TypeScript files
        // or `project: true` in typescript-eslint version >= 5.52.0
      },
    },
  ],
  // ...
}

自 typescript-eslint 5.52.0 起，你可以設定 project: true。

您可以在官方 ESLint 文件中閱讀更多關於 overrides 配置的內容：overrides 是如何運作的？

不要檢查特定檔案的程式碼風格

如果你不想對錯誤中提到的檔案（例如 babel.config.js）進行 lint，你可以將其名稱添加到 .eslintignore 檔案中以忽略它：

babel.config.js

無論如何，上面那步（關於為 TypeScript 文件覆寫配置）很重要，以防你的專案既包含 JavaScript 文件又包含你想要進行 lint 的 TypeScript 文件。

你也可以為不同的情況創建其他覆蓋，例如為測試文件使用不同的配置，因為它可以使用開發者依賴並在 node 環境下運行，而不是 browser，或者在版本 >= 9 中你可以使用 globals。

答案＃2

您可以創建一個專門的 TypeScript 配置文件（tsconfig.eslint.json），用於 eslint 配置。該文件擴展了 tsconfig 配置，並設置了 include 鍵，用於需要被檢查的文件。

.eslint.js：

// ...
parserOptions: {
  // ...
  project: "./tsconfig.eslint.json",
  // ...
},
// ...

tsconfig.eslint.json：

{
  "extends": "./tsconfig.json",
  "include": [
    // ...
    "babel.config.js"
  ]
}

或者如果你想忽略它，你可以把它放到 .eslintignore 裡。

.eslintignore：

// ...
babel.config.js

答案＃3

在「.eslintignore」中添加一行：

.eslintrc.js

答案＃4

在我的 ESLint 配置中，我有以下配置：

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  globals: {
    Promise: "readonly"
  },
  parser: "@typescript-eslint/parser",
  parserOptions: {
    sourceType: "module",
    tsconfigRootDir: __dirname,
    project: ["./tsconfig.eslint.json"],
  },
  plugins: ["@typescript-eslint"],
  extends: [
    "eslint:recommended",
    "prettier/@typescript-eslint",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
  ],
}

更新修復的關鍵部分是這個：

parser: "@typescript-eslint/parser"

以及這個：

parserOptions: {
    sourceType: "module",
    tsconfigRootDir: __dirname,
    project: ["./tsconfig.eslint.json"], // could be tsconfig.json too
}

別忘了在 tsconfig.json 的 include 陣列中包含該檔案或檔案的目錄。

答案＃5

您需要將該檔案添加到您的 tsconfig include 陣列中。更多詳情請參見 typescript-eslint/typescript-eslint#967。

答案＃6

執行 npm i -D @types/node
為 *.config.js 文件加入 TypeScript 支援：

tsconfig.json：

{
  "include": [
    "**/*.config.js" // for *.config.js files
  ]
}

然後 重新載入 你的 IDE！

答案＃7

只需通過在你的 .eslintrc.js 中添加 ignorePatterns 選項，指示 eslint 忽略它們：

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: './tsconfig.json',
  },
  ignorePatterns: ["babel.config.js"],
  ...

由於對專案配置檔進行語法檢查的價值不大，你可以放心地忽略它們。

此外，我不會將它們作為你 tsconfig.json 的一部分，或專門為了 linting 目的而創建一個 tsconfig.eslint.json 文件。

答案＃8

只需將以下程式碼添加到 .eslintrc.js 檔案中。

ignorePatterns: ['.eslintrc.js']