我用——template typescript创建了一个新的React Native项目

我删除了作为样板的一部分的模板目录。

然后我继续添加ESLint:

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

然而,当我打开babel.config.js时,我得到这个错误

解析错误:"parserOptions. "已经为@typescript-eslint/parser设置了Project "。 该文件与您的项目配置不匹配:/Users/Dan/site/babel.config.js。 该文件必须包含在至少一个提供的项目中。eslint


当前回答

对我来说,问题源于tsconfig中使用exclude属性忽略的一些文件,但eslint并没有忽略它们。

通常,如果有人想要TSC忽略文件,那么同样的方法也会应用到eslint中。所以只需复制粘贴.tsconfig配置中的exclude值到.eslintrc配置中的ignorePatterns属性。

其他回答

你可以为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

在.eslintrc中设置parserOptions如下所示

"parserOptions": {
  "ecmaFeatures": {
    "jsx": true
  },
  "ecmaVersion": 2019,
  "sourceType": "module"        
},

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文件的情况下是重要的。

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

简单地通过在.eslintrc.js中添加ignorePatterns选项来指示eslint忽略它们:

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

由于检测您的项目配置文件没有多大价值,您可以安全地忽略它们。

另外,我不会让它们成为你的tsconfig的一部分。Json或创建一个特殊的tsconfig.eslint.json文件,仅用于检测目的。

我在VsCode中有这个问题,当我在文件夹结构中打开我的项目太高时。一个奇怪的解决方案,但它有效。

在我的例子中,Firestore函数项目的express In .ts,我必须从它创建的函数文件夹中打开它。

我应该注意到这是这类问题,因为'npm run-script lint'本身从未返回错误。