必须安装HTML-CSS-JS Prettify插件,它稳定轻量、兼容Sublime Text 4,支持HTML/CSS/JS三语言格式化;装错如Sublime-Beautify或CSScomb会导致失效或报错。

装错插件就白忙——认准 HTML-CSS-JS Prettify
Sublime Text 本身不带任何代码美化能力,所有“一键格式化”都依赖插件。Package Control 里搜 Beautify 会出现十几个名字相似的插件,但多数已停更或不兼容 Sublime Text 4(当前主流版本)。真正稳定、轻量、三语言通吃的只有 HTML-CSS-JS Prettify。
别装这些:Sublime-Beautify(只支持老版本)、CSScomb(Sublime Text 4 下大概率抛 AttributeError: 'NoneType' object has no attribute 'groups')、JsPrettier(侧重 JS/TS,CSS 和 HTML 支持弱且依赖 Node.js 环境)。
正确操作路径:
- 按
Ctrl+Shift+P(Win/Linux)或Cmd+Shift+P(macOS)→ 输入Package Control: Install Package→ 回车 - 输入
HTML-CSS-JS Prettify→ 点击安装 - 安装后关闭所有文件,再重新打开——避免缓存导致命令未注册
快捷键没反应?先看状态栏和语法识别
装完插件≠马上能用。90% 的“按了没反应”问题出在两处:语法未识别、快捷键被占。
检查右下角状态栏:必须显示 CSS、HTML 或 JavaScript,而不是 Plain text、SCSS 或 Vue Component。如果不是,点击状态栏 → Set Syntax → 手动选对类型。
默认快捷键是 Ctrl+Shift+H(Win/Linux)或 Cmd+Shift+H(macOS),不是 Ctrl+Alt+F 或 Ctrl+K, Ctrl+F(那是 SqlBeautifier 的)。如果仍无效:
- 按
Ctrl+Shift+P输入Prettify,看是否出现HTML-CSS-JS Prettify: Prettify Code - 若无此选项,打开控制台(
View → Show Console),查是否有ImportError或No module named报错 - 状态栏左下角偶尔会闪一下
Beautify failed——这是唯一线索,别忽略
美化效果差?只调这两个配置就够了
别一上来就改 custom_js_extensions 或 jslint_path,95% 的人根本用不到。真正影响观感的只有两个参数:
"indent_size": 2 —— 设为数字 2 或 4,别写字符串 "2"(JSON 解析失败,插件静默退出)
"wrap_line_length": 120 —— 防止 HTML 标签被硬折行;设成 80 会导致 <div class="a b c" data-id="123"> 被拆成三四行<p>修改方式:菜单 → <code>Preferences → Package Settings → HTML-CSS-JS Prettify → Set Prettify Preferences,编辑右侧用户配置文件。改完保存,不用重启。
SQL 和 JSON 怎么办?另装专用插件
HTML-CSS-JS Prettify 不处理 SQL 或 JSON。需要单独装:
- SQL:装
SqlBeautifier,快捷键Ctrl+K, Ctrl+F(Win/Linux)或Cmd+K, Cmd+F(macOS);配置项keyword_case和indent_width在Preferences → Package Settings → Sql Beautifier → Settings – User里改 - JSON:
JsFormat更轻量可靠;装好后全选 →Ctrl+Shift+P→ 输入JsFormat→ 回车;它不依赖 Node.js,也不吃掉/* prettier-ignore */这类注释
跨语言项目里混着写时,别指望一个插件全包——Sublime 的插件机制是按语法类型绑定的,.vue 文件里的 <style> 块得手动选中再运行 CSS 格式化,这是设计使然,不是 bug。

















