Sublime Text高效开发需安装Package Control和Emmet插件，配置浏览器预览与ESLint检查，专注写-存-刷-看四步极简流程，避免过度插件化拖慢响应。
Sublime Text 本身就能直接写 HTML/CSS/JS，不需要额外配置就能高亮、缩进、自动补全基础语法。但要真正高效开发，关键在插件和少量设置，而不是折腾 IDE 式功能。
安装 Package Control 是所有后续操作的前提
没装 Package Control，就等于没打开 Sublime 的插件世界。它不是可选项，是必经一步。
- 按
Ctrl + `（反引号）调出控制台，粘贴官方安装脚本（2026 年仍有效），回车执行 - 重启 Sublime，左下角出现
Package Control提示才算成功 - 如果命令面板里搜不到
Install Package，说明安装失败，重试或检查网络代理 - 别手动下载
.sublime-package文件拖进目录——容易路径错、版本不匹配、后续更新失效
Emmet 是写 HTML/CSS 最不能省的插件
不用 Emmet，等于放弃一半效率。它不是“锦上添花”，而是把重复劳动直接砍掉。
- 输入
!+Tab→ 生成完整 HTML5 骨架，含<meta charset="UTF-8"> -
div.container>ul>li*3+Tab→ 一键输出带结构的列表代码 - CSS 中输入
m10+Tab→ 展开为margin: 10px;；bd1s#f00→border: 1px solid #f00; - 确保 Emmet 设置里
html5模式已启用（默认开启），否则!可能只生成旧版 HTML
浏览器预览不能靠“右键打开”，得用插件链路打通
前端开发中频繁切窗口、手动刷新，会打断思维流。Sublime 做不到热更新，但可以最小化操作成本。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 装
View In Browser插件后，Ctrl+Shift+P输入view in browser即可唤起默认浏览器打开当前文件 - 如果需要保存即刷新，推荐配合外部工具：用
Live Server扩展（Chrome）或BrowserSyncCLI，Sublime 只负责保存文件 - 别依赖
LiveStyle：它早已停止维护，新版 Chrome 不兼容，强行启用会导致 CSS 修改不生效且无报错提示 - HTML 文件必须有
.html后缀、且已保存（未保存文件无法被浏览器读取）
JS 语法检查和调试得交给浏览器，Sublime 只管写得规范
Sublime 没有内置 JS 调试器，强行配 Node 调试插件既不稳定又偏离设计初衷。正确姿势是分工明确。
- 装
ESLint（比 JSHint 更现代），配合项目根目录的.eslintrc.js实时标红错误 -
debugger;语句照常写，保存后直接切到 Chrome DevTools 的 Sources 面板，断点自然生效 - 避免在 Sublime 里装
SublimeCodeIntel类智能提示插件——对 JS 支持弱、卡顿、常误报，不如专注写好console.log()和注释 - 若需压缩 JS/CSS，用
HTML-CSS-JS Prettify或命令行terser，别指望编辑器自动做构建流程
最易被忽略的一点：Sublime 的“快”建立在轻量之上，一旦堆砌过多实时校验、悬浮文档、自动 import 等功能，反而拖慢响应。前端开发的核心动作是写、存、刷、看，把这四步链路压到最短，比追求功能齐全重要得多。
