VS Code自动补全TypeScript路径别名时被替换为反斜杠的问题求助

问题背景 #

用Expo开发React Native应用，已配置TypeScript路径别名，编译和导入解析均正常，但在VS Code中编写import语句时，别名能被正确提示，接受自动补全后别名会被替换为反斜杠，需手动修正完整别名。

项目tsconfig.json配置：

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "$components": ["App/components/index"],
      "$components/*": ["App/components/*"],
      "$constants": ["App/constants/index"],
      "$constants/*": ["App/constants/*"],
      "$helpers": ["App/helpers/index"],
      "$helpers/*": ["App/helpers/*"],
      "$navigators": ["App/navigators/index"],
      "$navigators/*": ["App/navigators/*"],
      "$screens": ["App/screens/index"],
      "$screens/*": ["App/screens/*"],
      "$services": ["App/services/index"],
      "$services/*": ["App/services/*"],
      "$api/*": ["App/services/api/*"],
      "$state": ["App/state/index"],
      "$state/*": ["App/state/*"],
      "$themes": ["App/themes/index"],
      "$themes/*": ["App/themes/*"],
      "$types": ["App/types/index"],
      "$types/*": ["App/types/*"],
      "$tests/*": ["tests/*"]
    }
  }
}

继承的expo/tsconfig.base.json：

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "display": "Expo",

  "compilerOptions": {
    "allowJs": true,
    "esModuleInterop": true,
    "jsx": "react-native",
    "lib": ["DOM", "ESNext"],
    "moduleResolution": "node",
    "noEmit": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "target": "ESNext"
  },

  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

问题原因 #

核心原因是VS Code使用的TypeScript版本与项目本地版本不匹配，导致路径别名的解析逻辑出现偏差；其次是TS服务缓存未及时更新，无法正确读取tsconfig的路径配置。

解决方案 #

1. 强制VS Code使用项目本地TypeScript版本

打开VS Code命令面板（Ctrl+Shift+P / Cmd+Shift+P），输入TypeScript: Select TypeScript Version，选择Use Workspace Version。

Expo项目会在node_modules中自带适配的TypeScript版本，全局版本可能存在解析规则差异，切换到工作区版本即可对齐项目的路径解析逻辑。

2. 重启TS服务并清除缓存

同样打开命令面板，输入TypeScript: Restart TS Server重启服务；如果问题仍存在，可删除项目根目录的.vscode文件夹（若存在），重新打开项目让VS Code重新生成配置缓存。

3. 补充Babel路径别名配置（可选）

若上述步骤无效，确认babel.config.js中是否同步配置了路径别名（确保TS服务与Babel解析逻辑一致）：

首先安装依赖：

npm install --save-dev babel-plugin-module-resolver

修改babel.config.js：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          root: ['./'],
          alias: {
            '$components': './App/components',
            '$components/*': './App/components/*',
            '$constants': './App/constants',
            '$constants/*': './App/constants/*',
            // 复制tsconfig中所有别名配置到此处
          }
        }
      ]
    ]
  };
};

4. 锁定VS Code的TS SDK路径

在项目的.vscode/settings.json中添加以下配置，强制指定TS SDK路径为项目本地版本：

{
  "typescript.tsdk": "./node_modules/typescript/lib",
  "typescript.preferences.importModuleSpecifier": "non-relative"
}

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