使用yo code创建TypeScript扩展开发环境遇多类问题求助

1. 修复ms-vscode.extension-test-runner无法获取的核心问题 #

• 手动安装扩展：在终端执行命令直接安装测试运行器

  code --install-extension ms-vscode.extension-test-runner
  

• 检查并修复扩展推荐配置：打开项目根目录下的.vscode/extensions.json，确保包含以下条目，缺失则手动添加

  {
    "recommendations": [
      "ms-vscode.extension-test-runner"
    ]
  }
  

• 刷新扩展列表：按Ctrl+Shift+P打开命令面板，执行Extensions: Show Recommended Extensions，确认推荐扩展已安装

2. Webpack打包场景问题处理 #

• 扩展主机启动慢、断点失效：
  1. 验证launch.json的outFiles配置，确保指向正确的编译输出目录，默认应为${workspaceFolder}/dist/**/*.js
  2. 修改webpack.config.js，启用开发模式并生成正确的sourcemap：

     module.exports = {
       mode: "development",
       devtool: "source-map"
     };
     

  3. 清理缓存后重新编译：删除dist目录和node_modules/.cache，执行npm run watch

3. Esbuild打包场景问题处理 #

• 无法获取connor4312.esbuild-problem-matchers：
  手动安装该扩展并添加到推荐列表：

  code --install-extension connor4312.esbuild-problem-matchers
  

  在.vscode/extensions.json中补充：

  {
    "recommendations": [
      "connor4312.esbuild-problem-matchers"
    ]
  }
  

• 解决Error: Invalid problemMatcher reference: $esbuild-watch：
  1. 升级esbuild相关依赖：

     npm update esbuild @vscode/esbuild-watch
     

  2. 若仍报错，手动替换.vscode/tasks.json中的problemMatcher配置：

     {
       "problemMatcher": {
         "owner": "esbuild",
         "fileLocation": "absolute",
         "pattern": {
           "regexp": "^(.*?):(\\d+):(\\d+):\\s+(error|warning)\\s+(.*)$",
           "file": 1,
           "line": 2,
           "column": 3,
           "severity": 4,
           "message": 5
         },
         "background": {
           "activeOnStart": true,
           "beginsPattern": "^.*esbuild watch started.*$",
           "endsPattern": "^.*finished rebuilding.*$"
         }
       }
     }
     

4. Unbundled打包场景问题处理 #

• 扩展主机启动停滞、断点失效：
  1. 检查tsconfig.json的outDir配置，确保编译输出目录为${workspaceFolder}/out
  2. 修改launch.json，关闭首行停滞设置：

     {
       "configurations": [
         {
           "name": "Run Extension",
           "type": "extensionHost",
           "request": "launch",
           "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
           "outFiles": ["${workspaceFolder}/out/**/*.js"],
           "stopOnEntry": false
         }
       ]
     }
     

  3. 确认TypeScript编译无报错：执行npm run watch，待编译完成后再启动调试

5. 通用排查步骤 #

• 检查Node.js版本：确保使用Node.js 16及以上版本，可通过node -v验证，版本过低则升级
• 清理NPM缓存：

  npm cache clean --force
  

• 重新安装依赖：删除node_modules和package-lock.json，执行npm install

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