ESLint 在具有共享模块的项目中“无法解析模块路径”

Question

尝试从共享项目导入模块时遇到 ESLint 错误。每次从

shared/

项目导入时都会发生错误。确切的错误是常见的 ESLint 导入错误：

 Unable to resolve path to module 'shared/hooks/api'

当我禁用 ESLint 时，我的所有项目都可以正常运行和构建。 VSCode 还可以正确自动为我完成导入，所以我知道至少它部分设置正确（我认为）。我可以 cmd+单击导入，它会将我导航到正确的

shared/

项目文件。所有这些让我觉得一切都“解决”了，只是 ESLint 无法弄清楚。

一个例子：

// mobile/screens/Home.tsx

// Error: Unable to resolve path to module 'shared/hooks/api'
import { someHook } from 'shared/hooks/api'

我的项目是这样设置的：

frontend/
├─ mobile/
│  ├─ ...
│  ├─ screens/
│  │  ├─ Home.tsx
│  ├─ eslintrc.yml
│  ├─ tsconfig.json
├─ shared/
│  ├─ ...
│  ├─ hooks/
│  │  ├─ api.ts
│  ├─ eslintrc.yml
│  ├─ tsconfig.json
├─ web/
│  ├─ ...
│  ├─ eslintrc.yml
│  ├─ tsconfig.json

我的

tsconfig.json

文件看起来像：

// mobile/tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-native",
    "rootDirs": ["./src", "../shared/src/*"],
    "paths": {
      "shared/*": ["../shared/src/*"],
      "screens/*": ["./src/screens/*"]
    }
  },
  "extends": "expo/tsconfig.base",
  "baseUrl": "src",
  "include": [
    "src",
    "./babel.config.js",
    "**/*.tsx",
    "**/*.ts",
    "../shared/**/*.ts",
    "../shared/**/*.tsx"
  ]
}

// shared/tsconfig.json
{
  "compilerOptions": {
    ...,
    "baseUrl": "src",
    "paths": {
      "hooks/*": ["hooks/*"]
    }
  },
  "include": ["src"]
}

以及相关的ESLint配置：

# mobile/eslintrc.yml

env:
  browser: true
  es2021: true

parser: '@typescript-eslint/parser'

parserOptions:
  ecmaVersion: latest
  sourceType: module
  project: ['./tsconfig.json']

extends:
  - eslint:recommended
  - plugin:react/recommended
  - plugin:react/jsx-runtime
  - plugin:react-hooks/recommended
  - plugin:@typescript-eslint/recommended
  - plugin:@typescript-eslint/recommended-requiring-type-checking
  - plugin:import/recommended
  - plugin:jsdoc/recommended
  - prettier

plugins:
  - react
  - '@typescript-eslint'
  - 'no-relative-import-paths'
...

settings:
  react:
    version: detect
  import/resolver:
    node:
      paths: ['src', '../shared/src']
      extensions: ['.js', '.jsx', '.ts', '.tsx']

# shared/eslintrc.yml

env:
  browser: true
  es2021: true

parser: '@typescript-eslint/parser'

parserOptions:
  ecmaVersion: latest
  sourceType: module
  project: ['tsconfig.json']

extends:
  - eslint:recommended
  - plugin:react/recommended
  - plugin:react/jsx-runtime
  - plugin:react-hooks/recommended
  - plugin:@typescript-eslint/recommended
  - plugin:@typescript-eslint/recommended-requiring-type-checking
  - plugin:import/recommended
  - plugin:jsdoc/recommended
  - prettier

plugins:
  - react
  - '@typescript-eslint'
  - 'no-relative-import-paths'

... 

settings:
  react:
    version: detect
  import/resolver:
    node:
      paths: ['src']
      extensions: ['.js', '.jsx', '.ts', '.tsx']

// VSCode Workspace settings
{ 
  "eslint.workingDirectories": ["./shared", "./mobile", "./web"],
}

web/

项目的配置与

mobile/

项目非常相似，只是该工具适用于ReactJS项目而不是react-native。

如何设置

eslintrc.yml

和

tsconfig.json

文件才能正确使用此项目结构？

Answer 1

您在

baseUrl

中使用

tsconfig.json

，这可以让您简化导入：

import  {someHook} from "shared/hooks/api";

这是一个 TypeScript 功能！默认情况下，eslint（和大多数捆绑器/运行时）不会读取您的

tsconfig.json

，也不尊重

baseUrl

、

paths

或影响 TypeScript 模块分辨率的其他设置。这是一把足枪。

您需要安装并配置适当的插件来告诉 ESLint 尊重您的

tsconfig

：https://www.npmjs.com/package/eslint-import-resolver-typescript