Sublime Text 保存时自动格式化需装HTML-CSS-JS Prettify插件并启用format_on_save，配置正确node_path；Emmet失效多因语法模式非HTML；CSS旧属性补全是因内置词典陈旧，建议装CSS3或框架专用插件；预览用live-server构建系统实现保存即刷新。
怎么让 Sublime Text 保存时自动格式化 HTML 和 CSS
Sublime Text 默认不带保存即格式化功能，得靠插件 + 正确配置。核心是用 HTML-CSS-JS Prettify 或更轻量的 JsPrettier（配好后也能处理 HTML/CSS），但很多人装完发现按 Ctrl+S 没反应——问题通常出在“保存时触发”没打开，或者解析器路径没填对。
- 先装插件：
Package Control → Install Package → HTML-CSS-JS Prettify，装完重启 - 打开
Preferences → Package Settings → HTML-CSS-JS Prettify → Set Plugin Options，确保"format_on_save": true是true（不是字符串） - 如果报错
Could not find node.js，说明插件找不到node命令：Mac/Linux 在终端运行which node，Windows 运行where node，把结果路径填进插件配置里的"node_path"字段 - 注意：该插件依赖
js-beautify，如果本地全局没装，它会尝试用自带副本，但某些 CSS 新语法（比如clamp()、container查询）可能被错误换行——此时建议全局装新版：npm install -g js-beautify
为什么 Emmet 在 .html 文件里不生效
Emmet 是 Sublime 自带功能，但默认只对 html 语法高亮的文件生效。常见问题是文件刚新建时后缀是 .txt，或你手动改了后缀但没同步切换语法模式，导致 div.container 按 Tab 没反应。
- 检查右下角状态栏是否显示
HTML；如果不是，点它 →Open all with current extension as... → HTML - 确认
Preferences → Package Settings → Emmet → Settings里没有禁用"enable_tab_expand": false - 如果用了自定义构建系统或项目配置，留意是否有
"syntax": "Packages/Text/Plain text.tmLanguage"类似覆盖项，会强行关掉 Emmet - Emmet 的缩写匹配是大小写敏感的：
Div不展开，div才行；flex能转成display: flex，但FLEX不行
CSS 自动补全为什么总推荐旧属性（比如 -webkit-box-shadow）
Sublime 自带的 CSS 补全是基于内置词典，版本停留在较老规范，不会随浏览器演进更新。它不读 caniuse，也不看你当前项目用的 PostCSS 插件，所以补全列表里一堆带前缀的老属性，反而漏掉 aspect-ratio、scroll-behavior 这类新东西。
- 别指望靠改
Packages/CSS目录下的completions文件来“升级”——改了下次升级包就重置 - 更实际的做法是装
CSS3插件（Package Control里搜到的那个），它会覆盖默认补全，加入 Flexbox/Grid/现代动画等条目 - 如果你用 Tailwind 或 Bootstrap，单独装对应插件（如
Tailwind CSS Autocomplete），它们能识别 class 名并补全 utility，比原生 CSS 补全有用得多 - 注意：补全触发时机是输入
.、:或空格后，不是输一半就弹——所以backgro不会提示background，得打完再按Ctrl+Space
怎么快速预览 HTML 修改效果（不用切浏览器）
Sublime 没内置浏览器预览，但通过配置 Build System 可以用命令行工具（比如 live-server）实现保存即刷新，比手动 F5 强太多。关键不是“能不能”，而是“怎么避免每次改完都卡住等刷新”。
立即学习“前端免费学习笔记（深入）”；
- 先全局装
live-server：npm install -g live-server - 新建 Build System：
Tools → Build System → New Build System，贴入：
{
"cmd": ["live-server", "$file_path", "--no-browser", "--quiet"],
"selector": "source.html",
"working_dir": "$file_path",
"variants": [
{
"name": "Kill",
"cmd": ["killall", "live-server"]
}
]
}
- 保存为
LiveServer.sublime-build，然后在 HTML 文件里按Ctrl+Shift+B选它，第一次运行会开终端窗口并启动服务；之后改保存就自动刷新 - 容易踩的坑：
live-server默认监听localhost:8080，如果端口被占，它会静默失败——可以加--port=3000参数指定；另外它不支持file://协议直接双击打开，必须走 HTTP - 如果只是临时看，用
Browser Refresh插件也行，但它依赖你已打开的 Chrome/Firefox 并开启调试端口，稳定性不如live-server
真正麻烦的从来不是装几个插件，而是每个插件背后都有自己的路径逻辑、Node 版本依赖、语法作用域开关——哪怕只改一行配置，也可能让 Emmet 失效或格式化崩掉。调的时候盯住控制台：View → Show Console，报错信息里带 node、syntax、scope 的字眼，基本就是突破口。
