必须手动绑定.pug扩展名到pug语法,否则始终显示plain text;正确操作是打开.pug文件→右下角选pug→再点pug→选open all with current extension as…→确认pug。

装完Pug插件,.pug 文件右下角还是显示 Plain Text?不是插件没装好,是 Sublime 根本没把后缀和语法绑定上——这一步必须手动做,跳过就永远不亮。
为什么 .pug 文件始终是 Plain Text
常见错误现象:index.pug 打开后右下角显示 Plain Text,甚至误标为 HTML;点右下角菜单也找不到 Pug 选项。
根本原因:Package Control 安装的只是 Pug.sublime-syntax 文件,它不自动注册 .pug 扩展名;Sublime 默认对未知后缀一律当 Plain Text 处理。
- 如果菜单里压根没有
Pug,说明插件未加载成功——需重启 Sublime 或重装Pug包(别选Jade,2026 年主流维护的是Pug) - 如果菜单里有
Pug但点完仍不持久,说明只改了当前文件,没执行“绑定全部”动作 - 插件安装路径必须是
Packages/Pug/,不能是Packages/pug/或Packages/Jade/——大小写敏感
如何让 .pug 文件一打开就自动高亮
最稳妥的方式是用 Sublime 自带的「按扩展名绑定语法」功能,它会自动生成正确配置,避免手写路径出错:
- 用 Sublime 打开任意一个
.pug文件 - 点击右下角显示的
Plain Text→ 在弹出菜单中选Pug - 再次点击右下角语言名(此时应显示
Pug)→ 选择Open all with current extension as…→ 确认选中Pug
这一步会在 Packages/User/Preferences.sublime-settings 中写入类似这样的映射:
{
"extensions": ["pug"],
"syntax": "Packages/Pug/Pug.sublime-syntax"
}
syntax 字段值必须严格满足三点:
以 Packages/ 开头、大小写完全匹配(Pug 不是 pug)、后缀必须是 .sublime-syntax(不能是 .tmLanguage)。
安装 Pug 插件的正确方式
绝大多数用户应走 Package Control 安装,避免手动配错 YAML 结构或 scope:
- 按
Ctrl+Shift+P(Windows/Linux)或Cmd+Shift+P(macOS)调出命令面板 - 输入
Install Package,回车后等待列表加载 - 搜索
Pug,选中并安装(2026 年主流维护的是Pug包;若搜不到,可试Jade,但注意旧版可能用source.jadescope,而新Pug推荐source.pug) - 安装完无需重启,直接打开
.pug文件,右下角应显示Pug
若后续自定义主题时发现高亮不生效,大概率是 scope 不匹配——比如插件用了 source.pug,但你的 color scheme 只定义了 source.jade 的颜色。
配套 CLI 工具:用 pug-cli 编译模板
编辑器高亮只是第一步,真正开发离不开编译。推荐全局安装官方 CLI 工具:
- 运行
npm install pug-cli -g - 验证安装:
pug --help应正常输出帮助信息 - 常用命令:
pug -P -o dist/ src/(格式化输出到dist/目录) - 监听变更:
pug -w -P -o dist/ src/,修改.pug文件后自动重新渲染
-P(--pretty)很关键——不加的话生成的 HTML 是单行,调试困难;但生产环境可去掉以减小体积。
scope 和 CLI 都得对上:如果你用 pug-cli 编译,但编辑器里用的是 Jade 插件(scope 为 source.jade),语法高亮可能漏掉新 Pug 特性(如 if 后面不加括号),这类细节容易被忽略,却直接影响开发体验。











