VSCode中测试目录下TypeScript模块别名路径不识别问题

我之前也碰到过一模一样的情况！Jest跑测试完全正常，但VSCode偏偏在test目录里把@app、@component这类别名导入标红，看着特别闹心。其实核心原因是VSCode的语言服务没把test目录纳入路径解析的范围，试试下面这些解决方案：

1. 检查并更新根目录的配置文件（jsconfig.json/tsconfig.json） #

VSCode的JavaScript/TypeScript语言服务是靠根目录的jsconfig.json或tsconfig.json来解析路径别名的，你需要确保：

• include字段同时包含src和test目录
• compilerOptions里的baseUrl和paths配置正确

示例配置（TypeScript项目用tsconfig.json）： #

{
  "compilerOptions": {
    "baseUrl": ".", // 必须设为项目根目录，让别名解析从这里开始
    "paths": {
      "@app/*": ["src/*"],
      "@component/*": ["src/components/*"]
    }
  },
  "include": ["src/**/*", "test/**/*"], // 把test目录加入解析范围
  "exclude": ["node_modules"]
}

示例配置（JavaScript项目用jsconfig.json）： #

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@app/*": ["src/*"],
      "@component/*": ["src/components/*"]
    }
  },
  "include": ["src/**/*", "test/**/*"]
}

2. 如果test目录有单独的配置文件，同步别名配置 #

有些项目会在test目录下单独放tsconfig.test.json或jsconfig.test.json，这时候要确保这个子配置文件要么：

• 直接复制根配置里的paths和baseUrl，并把include设为["**/*"]
• 或者通过extends继承根目录的配置，比如：

{
  "extends": "../tsconfig.json",
  "include": ["**/*"]
}

3. 重启VSCode语言服务或重新加载窗口 #

配置改完后，VSCode可能不会立刻生效，你可以：

• 按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）打开命令面板
• 输入Reload Window并回车，让VSCode重新加载配置

额外说明：别把Jest配置和VSCode配置搞混 #

你提到Jest运行正常，说明你的jest.config.js里的moduleNameMapper配置是对的，比如：

module.exports = {
  // ...其他配置
  moduleNameMapper: {
    '^@app/(.*)$': '<rootDir>/src/$1',
    '^@component/(.*)$': '<rootDir>/src/components/$1'
  }
}

但Jest的配置是给测试框架用的，VSCode的语言服务根本不读这个文件，所以必须在jsconfig.json/tsconfig.json里单独配置别名，两者要保持一致才行。

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