类型记录-eslint/预提交钩子(monorepo)：解析错误："parserOptions.project“已为@typescript-eslint/解析器设置

Question

我们最近迁移到了一个monorepo，我们仍然在尝试设置所有的东西。我们用的是打字稿和更漂亮的字体。结构如下：

root
  - common
    - folder_a
      - file_a.ts
  - build_scripts
    - script_a.js
  - project_a
    - components
      - component_a
        - Component.tsx
    - tsconfig.json
    - .eslintrc.json
    - node_modules
    - package.json
  - .prettierignore
  - .prettierrc.yml
  - .eslintignore
  - .eslintrc.base.json
  - tsconfig.base.json
  - node_modules
  - package.json
  - Makefile
  - webpack.config.js
  - .pre-commit-config.yaml

common文件夹包含跨多个项目使用的代码，而不是自己的项目(没有tsconfig.json)。所有包含自己的tsconfig.json和.eslintrc.json文件的子项目都在扩展基本文件，如下所示：

tsconfig.base.json

{
    "compilerOptions": {
        "lib": ["ES2017", "DOM"],
        "target": "ES6",
        "module": "commonjs",
        "baseUrl": ".",
        "sourceMap": true,
        "alwaysStrict": true,
        "noUnusedParameters": true,
        "noUnusedLocals": true,
        "noEmitOnError": true,
        "paths": {
            "@common/*": ["./common/*"]
        }
    },
    // include all projects that don't have their own
    // tsconfig.json file AND need to be compiled/linted
    // => very important because typescript-eslint will
    // otherwise load ALL files in memory for type-checking
    // and consequently eslint will crash with an OOM error
    "include": ["common/**/*"]
}

.eslintrc.base.json (为简洁而省略的规则)

{
    "env": {
        "es2020": true,
        "node": true
    },
    "extends": [
        "plugin:destructuring/recommended",
        "airbnb-base",
        "prettier",
        "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "project": "./tsconfig.base.json",
        "ecmaVersion": 11,
        "sourceType": "module"
    },
    "plugins": [
        "prettier",
        "@typescript-eslint",
        "destructuring"
    ],
    "rules": {}
}

.eslintignore

*/**/build
Makefile
**/*.js
**/*.json

.pre-commit-config.yaml (取自https://github.com/pre-commit/pre-commit/issues/466#issuecomment-274282684中的示例)

- repo: local
  hooks:
    - id: lint_fix
      name: lint_fix_project_a
      entry: node_modules/.bin/eslint --report-unused-disable-directives --fix -c project_a/.eslintrc.json --ext .ts,.tsx
      files: ^project_a/
      types: [file]
      language: node

package.json

{
  "name": "web",
  "version": "1.0.0",
  "private": true,
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "7.2.2",,
    "@typescript-eslint/eslint-plugin": "4.15.1",
    "@typescript-eslint/parser": "4.15.1",
    "eslint": "7.20.0",
    "eslint-config-airbnb": "18.2.1",
    "eslint-config-airbnb-base": "14.2.0",
    "eslint-config-prettier": "6.10.1",
    "eslint-config-standard": "14.1.1",
    "eslint-import-resolver-typescript": "2.0.0",
    "eslint-plugin-destructuring": "2.2.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-node": "11.1.0",
    "eslint-plugin-prettier": "3.1.3",
    "eslint-plugin-promise": "4.2.1",
    "eslint-plugin-standard": "4.0.1",
    "eslint-webpack-plugin": "2.5.4",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-react": "7.22.0",
    "eslint-plugin-react-hooks": "4.2.0",
    "express": "4.0.0",
    "prettier": "2.1.2",
    "typescript": "3.9.7"
  }
}

project_a/tsconfig.json

{
  "extends": "../tsconfig.base.json",
  "compilerOptions": {
    "lib": ["ES2017", "DOM", "DOM.Iterable"],
    "jsx": "react",
    "baseUrl": ".",
    "paths": {
      "@common/*": ["../common/*"],
      "@components/*": ["./components/*"]
    }
  },
  // overwrite the base "includes"
  "include": ["**/*"],
  "exclude": [
    "**/node_modules/*",
    "**/build/*"
  ]
}

project_a/.eslintrc.json (为简洁而省略的规则)

{
    "extends": [
        "plugin:react/recommended",
        "plugin:destructuring/recommended",
        "airbnb",
        "airbnb/hooks",
        "prettier",
        "plugin:prettier/recommended",
        "prettier/react",
        "../.eslintrc.base.json"
    ],
    "env": {
        "browser": true,
        "commonjs": true,
        "node": false
    },
    "parserOptions": {
        "project": "./tsconfig.json",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "plugins": [
        "prettier",
        "react",
        "@typescript-eslint",
        "destructuring"
    ],
    "rules": {}
}

将project_a与webpack捆绑在一起，使用ts-loader、eslint-webpack-plugin和project_a/tsconfig.json非常好。没有报告衬里错误。对于VSCode，vscode-eslint扩展也不报告任何内容。

此外，在project_a内部运行以下代码也是成功的，不会出现任何链接错误。

./node_node/..bin/eslint。-ext .ts，.tsx -修复-c .eslintrc.json

但是，，当在project_a中更改文件并尝试分阶段和提交时，将引发以下错误：

/home/web/project_a/components/component_a/Component.tsx

0:0错误解析错误："parserOptions.project“已为@typescript-eslint/解析器设置。该文件与项目配置不匹配: project_a/components/component_a/Component.tsx.

该文件必须至少包含在所提供的一个项目中。

这对我来说是没有意义的，为什么这个错误只会在那个特定的用例中抛出，当通过预提交钩子进行链接时。而且，这是非常奇怪的，因为project_a/tsconfig.json include的所有文件都在那个文件夹中(除了node_modules和build工件)。

"include": ["**/*"]

在我看来，这可能是因为我们

"include": ["common/**/*"]

在./tsconfig.json中。这是添加的(根据注释)，因为common在VSCode中打开了一个文件并试图保存一些更改，这将导致eslint崩溃，因为根据各种来源，@typescript-eslint/parser将包括内存中的所有文件，以收集用于链接的类型信息。

所有相关的Github问题都只是提到了所讨论的文件只是不包括在内，根据错误本身，但我不知道这是如何在我的场景中发生的。

Answer 1

结果是，@typescript-eslint/parser解决了提供的相对于当前工作目录的tsconfig.json，这是我在读取文档时忽略的。因此，由于预提交钩子总是从根目录运行，所以它使用的是tsconfig.base.json而不是project_a中的那个。

为了解决这个问题，需要采取以下步骤(根据https://github.com/typescript-eslint/typescript-eslint/issues/251#issuecomment-567365174)：

project_a/.eslintrc.js

• add following:

• module.exports ={ parserOptions：{ project：'./tsconfig.json‘tsconfigRootDir：__dirname //重要选项}

Answer 2

您的配置：

- repo: local
  hooks:
    - id: lint_fix
      name: lint_fix_project_a
      entry: node_modules/.bin/eslint --report-unused-disable-directives --fix -c project_a/.eslintrc.json --ext .ts,.tsx
      files: ^project_a/
      types: [file]
      language: node

使用language: node，这是一个托管环境(pre-commit将创建自己独立的独立节点环境并使用它--并且不会访问您的依赖项)

您可能需要language: system，因为您正在管理外部环境，而不是预提交。

免责声明:我创建了预提交。