如何配置ESLint与TSConfig解决共享模块路径解析错误？

问题场景 #

• 从shared/子项目导入模块时，ESLint抛出Unable to resolve path to module 'shared/hooks/api'错误
• 禁用ESLint后项目可正常运行构建，VSCode支持导入自动补全与文件跳转，说明TypeScript路径解析逻辑正常，仅ESLint无法识别跨项目路径
• 项目结构：

frontend/
├─ mobile/
│  ├─ src/screens/Home.tsx
│  ├─ eslintrc.yml
│  ├─ tsconfig.json
├─ shared/
│  ├─ src/hooks/api.ts
│  ├─ eslintrc.yml
│  ├─ tsconfig.json
├─ web/
│  ├─ ...（配置与mobile类似）

解决方案 #

一、优化TypeScript配置（tsconfig.json） #

针对mobile/和web/项目，调整配置让TypeScript路径解析更清晰：

// mobile/tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-native",
    "baseUrl": ".", // 设为当前目录，确保能正确解析上级路径
    "paths": {
      "shared/*": ["../shared/src/*"],
      "screens/*": ["./src/screens/*"]
    },
    "rootDirs": ["./src", "../shared/src"] // 移除多余的通配符*
  },
  "extends": "expo/tsconfig.base",
  "include": [
    "src/**/*",
    "../shared/src/**/*",
    "./babel.config.js"
  ]
}

• baseUrl设为.是关键，否则../shared的相对路径无法被正确识别
• include使用**/*简化匹配规则，确保覆盖所有TypeScript文件

shared/项目的tsconfig可保持原有配置，无需额外调整。

二、修正ESLint路径解析配置 #

ESLint默认的node resolver无法识别TypeScript的paths配置，需要添加TypeScript resolver支持：

1. 安装依赖包（在mobile/web项目目录执行）：

npm install eslint-import-resolver-typescript --save-dev
# 或使用yarn
yarn add eslint-import-resolver-typescript --dev

2. 修改mobile/eslintrc.yml的settings部分：

settings:
  react:
    version: detect
  import/resolver:
    typescript:
      project: './tsconfig.json' # 让ESLint读取当前项目的tsconfig paths配置
    node:
      paths: ['src', '../shared/src']
      extensions: ['.js', '.jsx', '.ts', '.tsx']

• 添加typescript resolver后，ESLint会完全复用TypeScript的路径解析逻辑，解决跨项目导入的识别问题
• 保持node resolver作为 fallback，兼容常规路径解析

三、验证配置有效性 #

1. 重启VSCode的ESLint服务：按下Ctrl+Shift+P（Mac是Cmd+Shift+P），选择ESLint: Restart ESLint Server
2. 打开mobile/screens/Home.tsx，检查导入错误是否消失
3. 运行ESLint命令验证：

cd mobile
npx eslint src/screens/Home.tsx

内容的提问来源于stack exchange，提问作者johnlahut