必须装package control作为插件系统启动器，再依次安装emmet+vue syntax highlight提升前端编码效率、sublimelinter+eslint/stylelint实现实时代码质量检查、autofilename+html-css-class-completion解决路径与类名补全、gitgutter+terminus+sidebarenhancements闭环开发流。
想让Sublime Text从轻量编辑器变成真正能写项目、查Bug、跑命令的开发主力工具，必须装对插件——不是越多越好，而是每个都解决一个高频痛点，比如写HTML时重复敲结构、引CSS路径手抖输错、JS变量名记不住、Git改了哪几行全靠肉眼扫。
第一步：装好Package Control，否则所有插件都进不来
打开Sublime Text，按 Ctrl + `（反引号）调出控制台；
访问 packagecontrol.io，复制标有“Sublime Text 4”字样的Python 3安装脚本（含 hashlib.sha256 校验段），粘贴进控制台后回车执行；
执行完毕后必须重启Sublime Text；
重启后按 Ctrl + Shift + P，输入 Package Control: Install Package 并回车——如果弹出空白搜索框，说明安装成功；若无响应，大概率是脚本版本不匹配，需删掉 Packages/Package Control.sublime-package 后重装。
前端编码提速：Emmet + Vue Syntax Highlight
方法一：用Emmet写HTML/CSS结构
在HTML或.vue文件的区域输入 div.card>ul>li*3，按 Tab 键立即生成嵌套列表；
CSS中输入 m10p → Tab，自动展开为 margin: 10%;；
方法二：Vue文件语法高亮必须手动激活
装完Vue Syntax Highlight后必须重启Sublime；
打开.vue文件，看右下角状态栏——如果显示的是 HTML 或 Plain Text，点击它，手动切换为 Vue；否则<script setup="">里的变量和<style scoped>中的选择器全是灰色，括号不配对、颜色不区分。</script>
代码质量实时把关：SublimeLinter + ESLint/Stylelint
第一步：通过Package Control依次安装 SublimeLinter → SublimeLinter-eslint → SublimeLinter-stylelint；
第二步：确认项目根目录存在 .eslintrc.js 和 .stylelintrc 配置文件，否则插件只会显示“no config found”，不报错也不标红；
第三步：避免与LSP-eslint冲突——如果你同时装了LSP插件，不要启用SublimeLinter-eslint，二者监听同一事件会重复报错或卡顿。
路径引用不手抖：AutoFileName + HTML-CSS-Class-Completion
AutoFileName在HTML中写 " 时自动列出当前项目文件夹下的所有图片；但前提是已通过 Project → Add Folder to Project 正确设置项目根目录，否则它只扫当前打开文件所在目录；
HTML-CSS-Class-Completion用于class=""里补全项目内自定义类名；触发方式是输入双引号后按 Ctrl + Space（不是Tab），且仅在语法模式为 HTML 时生效；
它默认不识别 xxx.module.scss 中的类，如需支持，需手动编辑插件用户设置，加入 "extensions": ["scss", "sass"]。
开发流闭环：GitGutter + Terminus + SideBarEnhancements
GitGutter会在行号旁用绿色+、黄色!、红色-标记Git新增、修改、删除行，无需切终端就能一眼看清变更范围；
Terminus按 Ctrl + Shift + T 呼出内置终端，直接运行 npm run dev 或 yarn build，不用来回切窗口；
SideBarEnhancements给侧边栏右键菜单加了20+功能，包括“在终端中打开”、“复制文件路径”、“新建文件夹”、“在资源管理器中打开”——原生Sublime连“刷新文件夹”都要手动关再开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
