VS Code多根工作区基于文件夹自动检测TypeScript版本需求

核心配置逻辑 #

多根工作区的每个子文件夹可单独配置TypeScript SDK路径，VS Code会根据当前编辑文件所在的子文件夹，自动加载对应配置的TS版本。

具体操作步骤 #

1. 打开工作区配置文件
   打开多根工作区的.code-workspace文件（若未创建，可通过文件 > 将工作区另存为...生成）。

2. 为每个子文件夹配置专属TS SDK
   在文件的settings字段中，针对每个子文件夹添加typescript.tsdk规则，示例配置如下：

   {
     "folders": [
       {
         "name": "package-a",
         "path": "./packages/package-a"
       },
       {
         "name": "package-b",
         "path": "./packages/package-b"
       }
     ],
     "settings": {
       // 为package-a配置其本地TS版本路径
       "[typescript].package-a": {
         "typescript.tsdk": "./packages/package-a/node_modules/typescript/lib"
       },
       // 为package-b配置其本地TS版本路径
       "[typescript].package-b": {
         "typescript.tsdk": "./packages/package-b/node_modules/typescript/lib"
       },
       // 可选：为TSX文件添加对应规则
       "[typescriptreact].package-a": {
         "typescript.tsdk": "./packages/package-a/node_modules/typescript/lib"
       },
       "[typescriptreact].package-b": {
         "typescript.tsdk": "./packages/package-b/node_modules/typescript/lib"
       }
     }
   }
   

   注意根据实际项目结构调整路径，确保指向对应子包下的node_modules/typescript/lib目录。

3. 验证配置效果

   • 打开package-a下的TS/TSX文件，右下角状态栏会显示该包对应的TypeScript版本
   • 切换到package-b下的文件，状态栏的TS版本会自动切换为对应包的版本

额外提示 #

• 确保每个子包都已安装对应版本的TypeScript，可在子包目录执行npm install typescript --save-dev
• 若配置后未生效，可通过Ctrl+Shift+P调出命令面板，执行重新加载窗口操作

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