JavaScript和TypeScript文件的lint规则不同

出现这个问题的原因如下:

您正在使用一个需要类型信息而没有指定的规则 parserOptions.project; 您指定了parserOptions。项目，没有指定createDefaultProgram(它将在未来的版本中删除)，并且您正在检测项目中不包括的文件(例如babel.config.js, metro.config.js)

来自TypeScript ESLint解析器文档:

parserOptions.project This option allows you to provide a path to your project's tsconfig.json. This setting is required if you want to use rules which require type information. (...) Note that if this setting is specified and createDefaultProgram is not, you must only lint files that are included in the projects as defined by the provided tsconfig.json files. If your existing configuration does not include all of the files you would like to lint, you can create a separate tsconfig.eslint.json.

要解决这个问题，更新你的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
      },
    },
  ],
  // ...
}

你可以在官方文档上阅读关于覆盖配置的更多信息:如何覆盖工作?

不要检测特定的文件

如果你不想检测错误中提到的文件(例如babel.config.js)，你可以忽略它，将它的名字添加到.eslintignore文件中:

babel.config.js

不管怎样，上面的步骤(关于覆盖TypeScript文件的配置)在你的项目包含你想要lint的JavaScript和TypeScript文件的情况下是重要的。

您还可以为不同的情况创建其他覆盖，例如为测试文件创建不同的配置，因为它可以使用开发人员依赖关系并在节点环境上运行，而不是在浏览器上运行。

这个错误来自VSCode扩展吗? 错误是否有一个相对路径，即使它在同一个文件夹(或子文件夹)中(如下面的错误消息所示)?

Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: ../../../../../home/<ommitted>/projects/floor-planner/app/src/App.vue.
The file must be included in at least one of the projects provided.

如果是，使用CLI时检查是否仍然存在。

你可以从你的项目根目录运行eslint .. 如果没有发现这些错误，则很可能是通过符号链接打开了项目。

截至2021年8月，Eslint扩展不支持Symlinks。

在项目目录中，运行pwd -P来获取绝对路径。

在我的例子中，这导致

~/projects/floor-planner/app: pwd -P
/media/projects/2021-Q3/floor-planner/app

通过此路径打开项目。

Eslint应该不再显示错误。

Linux -我的项目目录/home/user/projects是到/usr/share/dev/projects的符号链接我删除了符号链接和一切工作现在。

我得到的错误是告诉我无法找到任何。tsx文件在“../../../..”/{应用名称/路径}”

我希望我的故障排除时间能帮助到某人:)

在我的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数组中包含该文件或文件的目录。

你可以为eslint配置创建一个单独的TypeScript配置文件(tsconfig.eslint.json)。该文件扩展了tsconfig配置和设置，包括必须检测的文件的key。

.eslint.js:

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

tsconfig.eslint.json:

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

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

eslintignore:

// ...
babel.config.js

执行npm i -D @types/node 包括对*.config.js文件的typescript支持:

tsconfig.json:

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

然后重新加载IDE!