如何在Monorepo的tsconfig中配置多包路径与别名？

1. 目录结构参考 #

先明确基础结构，后续配置基于此：

monorepo-root/
├── packages/
│   ├── foo/
│   │   ├── src/
│   │   │   ├── a.ts
│   │   │   └── nested/
│   │   │       └── b.ts
│   │   └── tsconfig.json
│   └── bar/
│       ├── src/
│       └── tsconfig.json
├── tsconfig.json
├── .eslintrc.js
└── package.json

2. TypeScript 配置（让TS识别别名） #

根目录 tsconfig.json #

配置跨模块的@前缀别名：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@foo/*": ["packages/foo/src/*"],
      "@bar/*": ["packages/bar/src/*"]
    },
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "NodeNext",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["packages/**/*"],
  "references": [
    { "path": "./packages/foo" },
    { "path": "./packages/bar" }
  ]
}

子包（如foo）的 tsconfig.json #

配置模块内的~别名：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "~/*": ["./*"]
    },
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"]
}

bar子包配置逻辑一致，只需保证~/*指向自身src目录即可。

3. ESLint 配置（让ESLint同步TS路径规则） #

先在根目录安装依赖：

yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import eslint-import-resolver-typescript

然后修改根目录.eslintrc.js：

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'import'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  settings: {
    'import/resolver': {
      typescript: {
        project: ['./tsconfig.json', './packages/*/tsconfig.json']
      }
    }
  },
  rules: {
    'import/no-unresolved': 'off',
    '@typescript-eslint/no-unused-vars': 'warn'
  }
};

核心是通过eslint-import-resolver-typescript让ESLint读取所有TS配置文件，从而识别路径别名。

4. VSCode 配置（实现跳转与智能提示） #

在根目录创建.vscode/settings.json：

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "eslint.workingDirectories": ["./packages/foo", "./packages/bar"],
  "path-intellisense.mappings": {
    "~": "${workspaceFolder}/packages/foo/src",
    "@foo": "${workspaceFolder}/packages/foo/src",
    "@bar": "${workspaceFolder}/packages/bar/src"
  }
}

• typescript.tsdk指定使用根目录安装的TS版本，避免编辑器自带版本差异。
• eslint.workingDirectories让ESLint正确识别子包的工作目录。
• path-intellisense.mappings配置别名的智能提示（需安装Path Intellisense插件）。

5. 验证配置 #

• 在foo/src/nested/b.ts中写入import {a} from '~/a'，检查TS、ESLint是否无报错，VSCode能否跳转至a.ts。
• 在bar/src/index.ts中写入import {a} from '@foo/a'，做同样验证。

若仍有问题，尝试重启VSCode，或检查TS配置的extends路径是否正确，ESLint依赖是否安装完整。

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