VSCode通过tasks.json配置任务结合tsc --watch实现文件保存自动编译，需安装TypeScript等工具，创建任务监听文件变化并输出到指定目录，启动默认构建任务后即可实时编译。
VSCode 本身不内置“File Watcher”功能，但可以通过 任务（Tasks） 结合外部工具或脚本实现文件保存时自动编译。常见用于 TypeScript、Sass、Less 等需要编译的文件类型。以下是具体配置方法。
1. 安装必要的编译工具
确保你已在项目中安装对应的编译器，例如：
-
TypeScript：
npm install -g typescript或npm install --save-dev typescript -
Sass：
npm install -g sass -
Babel：
npm install --save-dev @babel/cli @babel/core
以 TypeScript 为例，假设你的源文件在 src/ 目录，希望编译输出到 dist/。
2. 创建 tasks.json 配置文件监听变化
在项目根目录创建 .vscode/tasks.json，内容如下：
{
"version": "2.0.0",
"tasks": [
{
"label": "tsc: watch",
"type": "shell",
"command": "tsc",
"args": ["--watch", "--preserveWatchOutput"],
"isBackground": true,
"presentation": {
"echo": true,
"reveal": "always",
"focus": false,
"panel": "shared"
},
"problemMatcher": "$tsc-watch",
"group": {
"kind": "build",
"isDefault": true
}
}
]
}说明：
-
command：运行
tsc - --watch：监听文件变化
- --preserveWatchOutput：防止输出被清屏
- problemMatcher：捕获编译错误并显示在“问题”面板
- isDefault build：设为默认构建任务
3. 启动文件监听
按下 Ctrl+Shift+P 打开命令面板，输入：Tasks: Run Build Task，然后选择 tsc: watch。
此时终端会启动一个持续运行的任务，一旦你修改并保存 .ts 文件，就会自动编译。
4. （可选）保存时自动触发
VSCode 默认不会在保存时自动运行任务，但可以借助扩展增强体验：
- 安装插件：“Grunt”, “Gulp”, “NPM Script Runner” 或 “Live Sass Compiler”（针对 Sass）
- 或使用 “Compile Hero” 这类自动化插件，支持保存即编译
如果你使用 npm 脚本，也可以在 package.json 中定义：
然后在 tasks.json 中调用 npm run watch。
基本上就这些。配置一次后，每次打开项目只需运行一次“Run Build Task”，就能实现自动编译。关键是利用 --watch 模式和 VSCode 的任务系统配合，不需要额外插件也能高效工作。
