vscode需插件或任务配置实现pug实时编译；推荐compile hero pro插件，注意输出路径、保存触发和文件监听；或配tasks.json自定义任务，排查需检查pug-cli版本、权限及语言模式。
VSCode 本身不提供 Pug/Jade 到 HTML 的实时编译能力，必须依赖插件或任务配置；直接装个插件开箱即用最省事，但要注意输出路径、保存触发逻辑和文件监听范围这三点，否则会“改了没反应”或“编译到错地方”。
用 Compile Hero Pro 插件实现保存即编译
这是目前最轻量、最贴近“实时”体验的方案：保存 .pug 文件时自动调用 pug-cli 编译为 HTML，无需终端手动执行。
- 在 VSCode 扩展市场搜索并安装
Compile Hero Pro（注意带 “Pro” 后缀，旧版Compile Hero已停更） - 打开设置（
Ctrl+,），搜compile-hero.pug-output-directory，设为相对路径如"./dist"—— 不要写绝对路径，否则跨机器失效 - 确认启用保存触发：
"compile-hero.disable-compile-files-on-did-save-code": false（false表示开启，不是“禁用”） - 首次使用前，确保系统已全局安装
pug-cli：npm install -g pug-cli；否则插件会静默失败，控制台也不报错 - 插件默认只监听
.pug文件，不处理.jade（已废弃格式），若项目仍用.jade，需额外配"compile-hero.jade-output-directory"并确保文件关联语言模式为 Jade
用 tasks.json 配置自定义编译任务（适合多环境或 CI 兼容）
当需要精确控制编译参数（比如加 --pretty、指定 include 路径）或集成进构建流程时，tasks.json 更可靠，但得手动触发或绑定快捷键。
- 在项目根目录创建
.vscode/tasks.json（注意是点开头、小写、严格路径） - 写入以下最小可用配置：
{ "version": "2.0.0", "tasks": [ { "label": "pug: compile current", "type": "shell", "command": "pug", "args": ["${file}", "--out", "./dist", "--pretty"], "group": "build", "presentation": { "echo": true, "reveal": "silent", "focus": false, "panel": "shared" }, "problemMatcher": [] } ] } -
${file}是当前打开的.pug文件；若想编译整个目录，把${file}换成"src/views/*.pug"（注意 shell 通配符是否生效，Windows cmd 下可能需改用 PowerShell） - 运行方式：按
Ctrl+Shift+P→ 输入Tasks: Run Task→ 选pug: compile current；也可设为默认构建任务，用Ctrl+Shift+B快速触发 - 不配
problemMatcher就无法跳转错误行；Pug 错误格式不标准，官方无内置 matcher，建议先用--trace参数看原始报错再决定是否手写正则
为什么改了 Pug 文件，HTML 没更新？常见卡点
不是插件坏了，大概率是这三个地方没对上：
-
pug-cli版本太老（pug --version查看）：v3.x 开始默认禁用include和extends的相对路径解析，需加--basedir ./参数，否则编译直接报ENOENT - 输出目录被 Git 或其他工具占用/权限拒绝：检查
./dist是否存在且可写；VSCode 在 Windows 上以管理员启动时，普通用户权限的 Node 进程可能无法写入 - VSCode 语言模式识别错误：右下角状态栏显示 “Plain Text” 而非 “Pug”，说明文件没被识别为 Pug；点击该处 → 选择 “Configure File Association for '.pug'” → 设为
pug - 插件冲突：如果同时装了
Pug (Jade) Snippets和Compile Hero Pro，后者可能因语法检测失败而跳过编译；可临时禁用 Snippets 插件验证
真正“实时”的关键不在工具链多炫，而在路径、权限、语言模式三者闭环——少一个，就卡在“看起来应该动，但就是不动”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
