VS Code扩展开发extension.ts修改后extension.js未同步更新问题

F5调试时确实默认加载out目录下编译产出的extension.js文件，修改源码不更新本质是TypeScript自动编译监听流程没有正常触发，按以下顺序排查修复即可：

• 先确认项目依赖安装完整。克隆协作者仓库后必须先在项目根目录执行npm install，仓库不会提交node_modules目录，缺少typescript、@types/vscode等核心依赖时编译流程根本无法启动。依赖装完先手动执行一次npm run compile，如果命令行报类型错误、路径错误，先把这些编译错误解决，错误状态下tsc不会产出新的js文件。
• 检查package.json中的脚本配置。支持自动热更新编译的项目，scripts字段必须包含正确的编译、监听命令，标准配置如下：

"scripts": {
  "vscode:prepublish": "npm run compile",
  "compile": "tsc -p ./",
  "watch": "tsc -watch -p ./",
  "pretest": "npm run compile",
  "lint": "eslint src --ext ts"
}

如果缺失watch脚本，或者tsc启动参数被改坏，就无法启动文件监听模式，保存ts文件时不会自动触发编译。

• 检查.vscode目录下的tasks.json配置。F5启动调试时，VS Code靠预启动任务拉起编译监听进程，配置错误的话根本不会启动监听。正确的监听任务配置如下：

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "script": "watch",
      "problemMatcher": "$tsc-watch",
      "isBackground": true,
      "presentation": {
        "reveal": "never"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}

协作者的仓库很可能漏提交这个配置文件、或者把problemMatcher、后台运行标记改坏了，你之前本地单独创建的项目能正常同步，就是因为官方脚手架默认生成了正确的tasks.json配置。

• 检查tsconfig.json的路径配置。确认compilerOptions里的outDir字段值为out，rootDir字段指向存放extension.ts的src目录，同时include配置覆盖了所有源码路径，标准配置片段如下：

"compilerOptions": {
  "module": "commonjs",
  "target": "ES2020",
  "outDir": "out",
  "rootDir": "src",
  "lib": ["ES2020"],
  "sourceMap": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", ".vscode-test"]

如果outDir配置错误，编译出来的js文件会输出到其他路径，你在out目录下自然看不到更新。

• 快速验证方法：每次修改完ts文件手动执行npm run compile，如果执行后out目录下的extension.js更新了，就可以确定是watch脚本或者tasks.json配置的问题，把缺失的配置补上，重启VS Code窗口再启动调试即可。配置正常的情况下，保存ts文件时VS Code底部终端会显示tsc的编译日志，修改会自动同步到out目录的js文件。

注意：不要直接修改out目录下的js文件，下次编译时所有手动修改都会被覆盖，所有代码改动必须在src目录下的ts源码中完成。

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