webstorm 本身不编译 pug，仅通过 file watchers 调用本地 pug-cli；白底黑字因未关联 .pug 到 pug 文件类型，需在 settings→editor→file types 中添加 pug 类型并注册 .pug 模式，否则语法高亮、缩进、emmet 全失效。
直接说结论：WebStorm 本身不编译 Pug，它只调用你本地安装的 pug-cli 工具完成编译；能否自动编译、输出路径是否正确、是否实时监听，全取决于 File Watchers 的配置是否匹配你的项目结构和 pug 命令行行为。
为什么新建的 .pug 文件全是白底黑字？
这不是插件没装，而是 WebStorm 根本没把文件当 Pug 处理。默认按纯文本渲染，语法高亮、缩进、Emmet 全失效。
- 打开
Settings/Preferences → Editor → File Types - 在左侧列表找
Pug—— 如果没有，点右上角+→Add Recognized File Type→ 选Pug - 在右侧
Registered Patterns里加一行：*.pug - 检查其他类型（比如
Text或HTML）是否也注册了*.pug，删掉冲突项 - 改完点
Apply，新开一个.pug文件验证：写p(class="btn") #{title}，看各部分是否分色
File Watchers 配置中 Program 和 Arguments 怎么填？
填错路径或参数，File Watchers 就静默失败，不报错也不生成 HTML —— 这是最常卡住的地方。
-
Program必须指向可执行的pug命令：- Windows：用项目内路径更稳，填
$ProjectFileDir$\node_modules\.bin\pug.cmd - macOS/Linux：填
/usr/local/bin/pug（如果全局安装）或$ProjectFileDir$/node_modules/.bin/pug
- Windows：用项目内路径更稳，填
-
Arguments推荐组合（兼顾可读性与可靠性）：-P -w $FileName$ -o $FileParentDir$/$FileNameWithoutExtension$.html-
-P美化输出 HTML；-w监听变更；-o明确指定输出路径 - 避免用
$ContentRoot$拼路径，它可能指向错误目录；优先用$FileParentDir$相对当前文件位置
-
Working directory设为$FileDir$，确保include、extends路径解析正确
编译后 HTML 不更新或路径错乱怎么办？
常见现象是保存 .pug 后没反应，或 HTML 生成到了奇怪位置（比如项目根目录下），甚至覆盖了其他文件。
- 检查
Output paths to refresh是否填了：$FileParentDir$/$FileNameWithoutExtension$.html—— 缺这个，WebStorm 不知道该刷新哪个文件，预览就不同步 - 如果用了
include ./layouts/base.pug却标红，不是语法错，而是 WebStorm 找不到base.pug；确认路径相对于当前文件，且目标文件真实存在 - 全局安装的
pug-cli版本太老（比如 v2.x）会不兼容新语法；建议统一用项目内安装：npm install pug pug-cli --save-dev - Windows 下若提示
'pug' is not recognized，说明node_modules\.bin没进环境变量 —— 此时必须用完整路径填Program，不能依赖命令行搜索
真正容易被忽略的是：pug 命令的路径、-o 输出路径、Working directory 三者必须协同一致；少一个对齐，编译就“看起来正常”，实际产物错位或静默失败。
