怎样使用VSCode的File Watcher自动编译文件？

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。

AI图像编辑器

使用文本提示编辑、变换和增强照片

46

查看详情

此时终端会启动一个持续运行的任务，一旦你修改并保存 npm install --save-dev typescript0 文件，就会自动编译。

4. （可选）保存时自动触发

VSCode 默认不会在保存时自动运行任务，但可以借助扩展增强体验：

• 安装插件：“Grunt”, “gulp”, “NPM Script Runner” 或 “Live Sass Compiler”（针对 Sass）
• 或使用 “Compile Hero” 这类自动化插件，支持保存即编译

如果你使用 npm 脚本，也可以在 npm install --save-dev typescript1 中定义：

```json "scripts": { "build": "tsc", "watch": "tsc --watch" } ```

然后在 npm install --save-dev typescript2 中调用 npm install --save-dev typescript3。

基本上就这些。配置一次后，每次打开项目只需运行一次“Run Build Task”，就能实现自动编译。关键是利用 npm install --save-dev typescript4 模式和 VSCode 的任务系统配合，不需要额外插件也能高效工作。