应安装HTML-CSS-JS Prettify插件,它轻量兼容Sublime Text 4,支持HTML/CSS/JS/JSON多语言美化;安装后需确保语法识别正确、使用默认快捷键Ctrl+Shift+H(Win/Linux)或Cmd+Shift+H(macOS),并配置indent_size和wrap_line_length参数。

别装“Prettier-HTML”,它根本不存在
Sublime Text 官方 Package Control 里搜不到叫 Prettier-HTML 的插件——这个名字是常见误传,实际稳定可用的是 HTML-CSS-JS Prettify。搜错名字会导致装上废弃插件(比如 Sublime-Beautify 或 HTMLPrettify),它们要么不支持 Sublime Text 4,要么只处理 HTML 却不兼容现代语法(如自闭合标签、data-* 属性排序)。
- 打开
Ctrl+Shift+P(Win/Linux)或Cmd+Shift+P(macOS) - 输入
Package Control: Install Package,回车 - 搜
HTML-CSS-JS Prettify,**只认这个全名**,别点带“Prettier”字样的其他结果 - 安装后不用重启,但建议关掉所有文件再重开一次,避免命令未注册
快捷键按了没反应?先看右下角语法识别
插件只对明确识别为 HTML、CSS 或 JavaScript 的文件生效,如果右下角显示的是 Plain Text,Ctrl+Shift+H 就会静默失败。
- 手动切换语法:右键编辑器底部状态栏 →
Open all with current extension as...→ 选HTML - 默认快捷键是
Ctrl+Shift+H(Win/Linux)或Cmd+Shift+H(macOS),不是Ctrl+Alt+B或其他美化惯用键 - 若仍无效,在
Preferences → Package Settings → HTML-CSS-JS Prettify → Settings – User中确认没有覆盖"enabled": false这类禁用项
美化效果奇怪?调这两个配置就够了
默认缩进是 4 空格、折行宽度是 80 字符,容易把长 class 名或内联样式硬拆成多行。真正影响观感的就两个参数,别碰其他高级项。
-
"indent_size": 2—— 设为数字2或4,别写字符串"2"(JSON 解析会失败) -
"wrap_line_length": 120—— 防止 HTML 标签属性被强行换行,设太小(如80)会让<div class="a b c d e f g h i j k l m n o p q r s t u v w x y z"> 变成一串垂直堆叠<li>改完保存配置文件,重新打开 HTML 文件再试,别指望热重载</li> <h3>想格式化局部代码,不是整文件</h3> <p><code>HTML-CSS-JS Prettify默认只处理整个文档,选中一段代码后按快捷键不会生效——这是设计行为,不是 bug。立即学习“前端免费学习笔记(深入)”;
- 临时方案:全选(
Ctrl+A)→ 按Ctrl+Shift+H→ 手动删掉不想动的部分 - 更稳做法:用命令面板(
Ctrl+Shift+P)→ 输入Pretty HTML→ 选HTML: Prettify,它支持当前选区(前提是已正确识别语法) - 注意:
HTML: Prettify命令在右键菜单里也有,路径是HTML/CSS/JS Prettify → Run Prettify
真正的麻烦不在装插件,而在 Sublime 不报错:语法识别错、JSON 多了个逗号、
wrap_line_length写成字符串,它都只是安静地不工作。盯住状态栏左下角,偶尔闪一下的Beautify failed才是唯一线索。 - 临时方案:全选(



















