Sublime Text安装并配置Pug模板引擎高亮支持

P粉328763957

P粉328763957

2026-08-04

765人浏览

原创

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

sublime text安装并配置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)。

Sublime Text Build Linux版
Sublime Text Build Linux版

Sublime Text Linux x86-64 deb 安装包。官方也提供 rpm、tar.xz 和软件源安装方式。

下载

安装 Pug 插件的正确方式

绝大多数用户应走 Package Control 安装,避免手动配错 YAML 结构或 scope:

  • Ctrl+Shift+P(Windows/Linux)或 Cmd+Shift+P(macOS)调出命令面板
  • 输入 Install Package,回车后等待列表加载
  • 搜索 Pug,选中并安装(2026 年主流维护的是 Pug 包;若搜不到,可试 Jade,但注意旧版可能用 source.jade scope,而新 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 后面不加括号),这类细节容易被忽略,却直接影响开发体验。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
li是什么元素
li是什么元素

li是HTML标记语言中的一个元素,用于创建列表。li代表列表项,它是ul或ol的子元素,li标签的作用是定义列表中的每个项目。本专题为大家li元素相关的各种文章、以及下载和课程。

2023.08.03

596

5

墨刀AI提示词教学
墨刀AI提示词教学

本合集由PHP中文网精心整理,为您提供全面的墨刀AI提示词教学。内容涵盖高质量原型撰写公式与实操窍门,助您轻松掌握AI设计工具。无论是零基础入门还是进阶技巧,都能让您快速上手,大幅提升产品设计与协作效率。

2026.08.04

8

21

墨刀AI完整入门
墨刀AI完整入门

PHP中文网为您倾力打造墨刀AI保姆级入门指南完整版!本合集从零基础讲起,涵盖AI生成原型、提示词优化、图片转原型及多轮对话等核心功能。无论您是新手还是进阶用户,都能轻松掌握产品设计全流程。快来PHP中文网,一键解锁高效设计技巧,让想法即刻成型!

2026.08.04

1

20

墨刀AI进阶技巧
墨刀AI进阶技巧

本合集由PHP中文网精心整理,为您提供墨刀AI核心进阶策略指南。内容涵盖高效提示词写作、原型智能生成与微调、结构化导图制作及行业分析报告输出等实战技巧。助您轻松掌握AI设计工具,大幅提升产品设计与团队协作效率。

2026.08.04

7

14

火山引擎实名认证失败怎么办
火山引擎实名认证失败怎么办

火山引擎实名认证失败可能与证件信息填写错误、姓名或企业信息不一致、证件照片不清晰、营业执照状态异常、手机号验证失败或审核资料不完整有关。本专题整理个人认证、企业认证、资料上传、审核退回、重新提交和认证不通过的常见处理方法。

2026.08.04

4

10

火山引擎域名备案流程详解
火山引擎域名备案流程详解

火山引擎域名备案适合需要在火山引擎云服务器、对象存储、CDN或网站服务上绑定域名的用户参考。本专题整理备案入口、账号实名认证、备案类型选择、主体信息填写、网站信息提交、资料上传、初审核验、管局审核和备案失败排查,帮助用户完成网站上线前的备案流程。

2026.08.04

0

10

火山引擎DNS解析配置步骤
火山引擎DNS解析配置步骤

使用火山引擎DNS解析网站域名时,需要确认域名已完成管理接入,并正确配置服务器IP、CNAME地址或验证记录。本专题整理域名添加、记录类型选择、TTL设置、解析状态检查、备案和访问测试等流程,适合新手搭建网站时参考。

2026.08.04

2

10

火山引擎对象存储使用教程
火山引擎对象存储使用教程

火山引擎对象存储适合用于网站图片、视频文件、备份数据、静态资源和应用附件管理。本专题整理TOS控制台入口、存储桶创建、地域选择、权限设置、文件上传、访问链接生成、CDN加速、费用查看和常见上传或访问失败问题,帮助用户快速掌握对象存储基础操作。

2026.08.04

1

10

火山引擎云服务器使用教程
火山引擎云服务器使用教程

火山引擎云服务器使用教程适合第一次购买、部署和管理云服务器的用户参考。本专题整理控制台入口、实例创建、地域和配置选择、系统镜像设置、安全组放行、远程连接、网站部署、续费计费和常见连接失败问题,帮助用户快速完成云服务器基础使用流程。

2026.08.04

5

10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程