必须装package control作为插件系统启动器,再依次安装emmet+vue syntax highlight、sublimelinter+eslint/stylelint、autofilename+converttoutf8等十大必备插件,每个解决一个高频开发痛点,漏掉任一都会导致编码卡顿或功能失效。

Sublime Text 装完不装插件,等于只用了 30% 的能力。真正让它从“文本编辑器”变成“前端开发主力工具”的,是那几个精准解决高频痛点的插件——不是越多越好,而是这十个里漏掉任何一个,你都会在写代码时反复卡顿、手抖、查文档、重试。
Package Control:没它,其他九个全白装
它不是功能插件,是整个插件系统的启动开关。ST4 必须用官网带 hashlib.sha256 校验的 Python 3 脚本安装,旧版 urllib2 或 ST3 脚本会静默失败——控制台看似输出 Success!,但重启后 Ctrl+Shift+P 输入 Package Control: Install Package 没反应,就是栽在这儿。
- 打开控制台:
Ctrl + `,粘贴 packagecontrol.io 页面标为 “Sublime Text 4” 的完整脚本(含h = 'df21e130...' + 'eea76'这类校验值) - 看到
Successfully installed后必须重启,再按Ctrl+Shift+P能调出空白搜索框才算真正就位 - 若仍无响应,先执行
Package Control: Synchronize Sources;公司网络开了代理时,临时关闭再试
Emmet + Vue Syntax Highlight:写 HTML/CSS/.vue 不开这俩等于裸写
Emmet 默认只在 .html 或 .css 文件生效;.vue 的 <template></template> 区域缩写(如 div.card>ul>li*3)按 Tab 没反应,90% 是因为缺了 Vue Syntax Highlight 插件,导致 Sublime 没识别出语法上下文。
-
Vue Syntax Highlight安装后需重启,并手动点击右下角状态栏切换语法为Vue(别留在HTML或Plain Text) - JS/JSX 文件想用 Emmet 缩写,得进
Preferences → Package Settings → Emmet → Settings,加一行:"syntax_scopes": {"javascript": "source.js"} - 别同时开
HTMLBeautify和JsBeautify处理同一文件,它们规则冲突,可能把 Emmet 生成的嵌套缩进全抹平
AutoFileName + ConvertToUTF8:路径补全和中文乱码不是“体验优化”,是刚需
AutoFileName 在 <img src=""> 引号里按 Ctrl+Space 弹不出文件列表?大概率是项目根目录没通过 Project → Add Folder to Project 加入——它默认只扫描项目根目录下的子路径,不会递归搜整个磁盘。
-
ConvertToUTF8解决的是真实协作场景:同事传来的.js文件含中文注释,打开全是 ,保存后别人再打开还是乱码——这不是字体问题,是编码层未自动识别 GBK/GB2312 -
AutoFileName不扫描node_modules,也不理解 Webpack 别名(如@/components),这类路径补全得靠ESLint提前报错拦截 - 如果项目里混用多种编码(比如部分文件是 UTF-8 BOM,部分是 GBK),
ConvertToUTF8的fallback_encoding配置要设成GBK,否则打开时仍乱码
SublimeLinter + ESLint/Stylelint:标红不是炫技,是防止上线前才发现 undefined is not a function
SublimeLinter 本身不检查任何东西,它只是个调度器。只装它,编辑器界面静默得像没装一样;必须配套装 SublimeLinter-eslint 和 SublimeLinter-stylelint,且项目根目录要有 .eslintrc.js 或 package.json 里定义 eslintConfig,否则提示 No config found。
- 全局安装的
eslint版本和项目本地node_modules冲突时,优先配置SublimeLinter使用项目内二进制路径:"executable": "${project_path}/node_modules/.bin/eslint" -
ESLint规则里若启用了no-unused-vars,但你在 React 函数组件里解构了 props 却没全用,它会立刻标黄——比运行时报错早几秒,但省去十次刷新 - 别指望它替代
prettier:格式化交给保存钩子或外部命令,SublimeLinter只管语义和风格错误
最常被忽略的其实是“项目上下文”:插件是否生效,高度依赖 Project → Add Folder to Project 是否正确设置、右下角语法模式是否手动切对、以及配置文件是否放在真正的项目根目录——而不是某个子文件夹里。这三个动作做错一个,插件就形同虚设。











