pug语法高亮需安装pug(jade)snippets扩展并正确关联.pug文件到pug语言id；编译功能不内置，须依赖pug-cli、构建工具或任务配置。
Pug 语法高亮在 VSCode 中默认不生效，必须安装扩展并确保文件关联正确；编译则完全不内置，需额外配置构建工具或命令行工具。
VSCode 安装 Pug 扩展后仍不高亮？检查这三件事
很多用户装完扩展就以为完事了，但实际高亮失败常因以下原因：
- 扩展名拼写错误：必须是
.pug（不是.jade或.pugjs），VSCode 默认只识别.pug - 语言模式未绑定：打开一个
.pug文件，右下角显示 “Plain Text” 时，点击它 → 选 “Configure File Association for ‘.pug’…” → 选 “Pug” - 扩展冲突或未启用：确认已安装的是
Pug (Jade) Snippets（作者 DigitalBrain79），而非过时的Jade扩展；禁用其他同名插件再重启 VSCode
如何让 .pug 文件自动识别为 Pug 语言（免每次手动点）
靠手动切换太慢，直接写入全局配置最稳：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 打开 VSCode 设置（
Ctrl + ,），搜索files.associations - 点击 “Edit in settings.json”，添加这一行：
"files.associations": { "*.pug": "pug" } - 注意：
"pug"是语言 ID，不是扩展名；大小写敏感，不能写成"Pug"或"jade" - 改完保存，新建或重开
.pug文件即可立即高亮
VSCode 本身不支持 Pug 编译，别指望“一键转 HTML”
语法高亮 ≠ 编译能力。VSCode 没有内置 Pug 编译器，所有“保存即生成 HTML”的需求都得靠外部工具链：
- 推荐用
pug-cli：终端运行npm install -g pug-cli，然后用pug index.pug -o ./dist手动编译 - 配合 VSCode 任务（
tasks.json）可半自动化：定义一个shell类型任务调用pug命令，绑定到Ctrl+Shift+B - 不要装“Pug Compile”类扩展：2026 年主流维护的 Pug 扩展（如 DigitalBrain79 版）明确不提供编译功能，避免被误导
- 若项目已有 Webpack/Vite，应配
pug-loader或vite-plugin-pug，而非依赖编辑器
最容易被忽略的一点：Pug 的缩进敏感性不会被任何高亮扩展缓解——空格/Tab 混用、少缩进一级，VSCode 只会高亮，不会报错；真正校验必须靠运行时编译或 Linter（如 pug-lint）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
