安装Package Control后,通过它安装html/css/JS Prettify插件,依赖node.js实现HTML、CSS、JS代码一键格式化,支持自定义缩进、引号等风格,提升代码可读性与开发效率。

sublime Text 虽然轻量,但通过插件可以很好地格式化 HTML、CSS、JS 代码。默认情况下 Sublime 不带代码美化功能,需要借助第三方工具实现。以下是常用且高效的格式化方法。
安装 Package Control(若未安装)
Package Control 是 Sublime 的插件管理器,绝大多数插件都通过它安装。
按下 Ctrl+` 打开控制台,粘贴以下代码并回车:
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'https://packagecontrol.io/' + pf.replace(' ', '%20')).read())
重启 Sublime 后,可通过 Preferences → Package Control 搜索安装插件。
立即学习“前端免费学习笔记(深入)”;
推荐插件:HTML/CSS/JS Prettify
这是最常用的前端代码格式化插件,基于 JavaScript 的 Prettier 实现,支持 HTML、CSS、JavaScript、json 等格式化。
安装步骤:
- 按 Ctrl+Shift+P 打开命令面板
- 输入 Package Control: Install Package
- 搜索并安装 HTML-CSS-JS Prettify
使用方法:
- 打开一个 .html、.css 或 .js 文件
- 全选代码(Ctrl+A)或只选中要格式化的部分
- 按 Ctrl+Shift+P,输入 Prettify Code 回车
- 或右键选择 HTML/CSS/JS Prettify → Prettify Code
配置 Prettify(可选)
你可以自定义缩进、引号风格、换行等规则。
菜单栏选择:Preferences → Package Settings → HTML/CSS/JS Prettify → Set Prettify Preferences
例如设置 2 个空格缩进、使用双引号:
{ "indent": 2, "quoteProps": "as-needed", "bracketSpacing": true, "semi": true, "singleQuote": false }
注意事项
- 确保系统已安装 node.js,因为 Prettify 插件依赖 Node 运行
- 如果格式化无反应,检查是否正确安装 Node,或尝试重启 Sublime
- 对于 .vue 或 .jsx 文件,可能需要额外配置或使用其他插件如 JsFormat
基本上就这些。装好插件后,格式化前端代码只需一键操作,大幅提升编码效率和代码可读性。


