VSCode怎么在保存时自动编译TypeScript为JavaScript-VSCode-PHP中文网

vscode保存不会自动编译，需手动配置tsc --watch任务；它依赖tsconfig.json正确设置outdir/rootdir、tasks.json中isbackground:true和problemmatcher:"$tsc-watch"，并首次手动运行任务才能监听文件变化持续编译。

vscode怎么在保存时自动编译typescript为javascript

VSCode 保存时不会自动编译，必须手动配 tsc --watch 任务

VSCode 自带 TypeScript 语言服务，只做语法检查、跳转和补全，tsc 编译器是独立工具，不装就不会生成 .js 文件。所谓“保存即编译”是错觉——你看到的绿色波浪线消失，不代表代码被编译了。

真正起作用的是 tsc --watch 进程，它监听文件变化并触发编译。这个进程必须通过 VSCode 的 tasks.json 显式配置，且需设 "isBackground": true，否则任务一跑完就退出，无法持续监听。

必须先确保 tsc 命令可用：运行 tsc --version，若报 command not found，说明没装 TypeScript 编译器
推荐本地安装：npm install --save-dev typescript（比全局安装更可控，避免多项目版本冲突）
tsc --init 生成的 tsconfig.json 默认不启用编译输出，要显式设置 "outDir" 和 "rootDir"，否则会报 error TS18003: No inputs were found

tsconfig.json 必须正确配置 outDir 和 rootDir

outDir 指定 JS 输出目录，rootDir 告诉编译器“源码从哪开始算”，两者不匹配会导致路径混乱或编译失败。比如你的 .ts 全在 src/ 下，却把 outDir 设为 dist/，但没设 rootDir: "src"，tsc 可能误把 node_modules 或 test/ 也当输入源。

OpenJDK 24

下载

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

"include" 比注释掉的默认 "files" 更可靠，尤其当你有子目录时；不写 "include" 又没 "files"，tsc 会找不到任何输入

别用 "outFile"：它强制打包成单个 JS，和自动编译场景不匹配，且与 "outDir" 冲突

tasks.json 要启用 isBackground 并绑定到保存事件

VSCode 的任务系统默认是“一次性执行”，而 --watch 是长时进程，必须标记为后台任务，否则保存后任务结束，后续修改不再触发编译。

在项目根目录建 .vscode/tasks.json，内容如下：

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "shell",
      "label": "tsc: watch",
      "command": "./node_modules/.bin/tsc",
      "args": ["--watch", "--preserveWatchOutput"],
      "isBackground": true,
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "silent",
        "focus": false,
        "panel": "shared",
        "showReuseMessage": true,
        "clear": false
      },
      "problemMatcher": "$tsc-watch"
    }
  ]
}

"problemMatcher": "$tsc-watch" 是关键，它让 VSCode 解析编译错误并高亮在编辑器里；漏掉这个，出错你也看不到红波浪线

不要用全局 tsc 路径（如 /usr/local/bin/tsc），优先调用本地 ./node_modules/.bin/tsc，避免版本不一致导致行为差异

配好后按 Ctrl+Shift+B → 选 tsc: watch 启动，终端里应显示 Starting compilation in watch mode...，之后改 .ts 文件再保存，dist/ 下对应 .js 就会更新

常见失败现象和绕不过去的坑

最常卡在“点了任务没反应”或“改了文件但 JS 没变”，本质不是 VSCode 问题，而是配置链断了一环。

tsc --watch 启动后立即退出？检查 tsconfig.json 是否有语法错误，或 outDir 路径不可写（比如设成 /usr/xxx）
改了 .ts 文件，dist/ 里没新 .js？确认 tasks.json 里 "isBackground": true 和 "problemMatcher" 都写了，且任务已真正运行中（终端窗口不能关）
编译出的 .js 里还有 import/export？那是 "module" 没配对，比如目标环境是浏览器，却用了 "module": "commonjs"；改用 "module": "esnext" 或加 "moduleResolution": "bundler"
想保存就触发一次编译（非 watch）？可以配 "type": "shell" + "command": "npx tsc"，但这样每次保存都全量编译，大项目明显卡顿，不推荐