vscode需安装pug扩展和prettier-plugin-pug才能支持.pug文件的语法高亮、补全、格式化；vue中pug模板需volar配合配置启用，且缩进必须统一为空格。
VSCode 默认不识别 .pug 文件，必须手动装扩展 + 配置格式化链路，否则连基础高亮都没有，更别说缩进、属性排序或保存自动格式化。
安装 Pug 语法支持扩展
VSCode 自身不带 Pug 语言服务，光靠文件关联（"files.associations": {"*.pug": "pug"}）只能触发极简高亮，没补全、没错误检查、没悬停提示。
- 打开扩展面板（
Ctrl+Shift+X），搜Pug (Jade) Snippets（作者 DigitalBrain79），安装并重启 VSCode - 确认新建
test.pug后，关键词如doctype、if、each有颜色，且输入div.能弹出类名补全 —— 这才是真正生效 - 别装名字带 “Jade” 但发布时间早于 2023 年的扩展，它们已停止维护，对 Pug 3.x 的新语法（如
case表达式、attributes展开）支持不全
用 Prettier 格式化 Pug 文件
prettier 原生不支持 Pug，直接配成默认格式化器会导致保存时卡住或报错 Cannot parse file: unknown extension .pug。
- 先在项目里装解析器：
npm install --save-dev prettier-plugin-pug（注意是--save-dev，不是全局） - 确保 VSCode 已装
Prettier扩展（作者 Esben Petersen），并在设置里把Editor: Default Formatter设为esbenp.prettier-vscode - 项目根目录加
.prettierrc，内容至少包含：{ "tabWidth": 2, "useTabs": false, "semi": false, "singleQuote": true, "plugins": ["prettier-plugin-pug"] } - 如果格式化后缩进错乱，大概率是
prettier-plugin-pug版本太低 —— 查package.json里该插件版本是否 ≥ 1.15.0（2025 年后发布）
解决 Pug + Vue 混合场景的冲突
在 .vue 文件的 <template lang="pug"></template> 区块里，Volar 和 Pug 扩展容易打架：Volar 抢占模板解析权，导致 Pug 缩进失效、属性补全消失。
- 禁用所有旧 Vue 插件（
Vetur、Vue 2 Snippets），只留Volar（Vue 3 官方推荐） - 在
settings.json中显式启用 Pug 支持："vue.volar.usePugSyntaxForCustomElements": true
- 如果仍不生效，检查项目是否有
tsconfig.json或jsconfig.json；没有的话，Volar 可能无法正确加载语言服务器，生成的类型定义会缺失 - 别指望
prettier-plugin-pug处理<template lang="pug"></template>内容 —— 它只管独立.pug文件；Vue 模板里的 Pug 由 Volar 内部处理，格式化行为受vetur.format.*配置项控制（即使你禁用了 Vetur）
最易被忽略的一点：Pug 的缩进语义极其严格，prettier-plugin-pug 会按空格数推导嵌套层级，但如果你混用空格和 Tab（哪怕只有一行），它可能直接放弃格式化。务必统一设为纯空格，并在 .prettierrc 里明确 "useTabs": false。
