Sublime提高前端开发效率方法_Sublime插件常用组合推荐【汇总】-sublime-PHP中文网

Emmet在Sublime中Tab失灵主因是文件未识别为HTML/CSS语法，需确认右下角显示HTML/CSS、正确配置Tab键绑定、严格遵循缩写格式（如ul>li*3无空格），三者缺一不可。

sublime提高前端开发效率方法_sublime插件常用组合推荐【汇总】

Emmet

是前端在 Sublime 中提速最直接有效的插件，但光装它远远不够——真正提效靠的是几个插件的协同动作，且每一步配置稍有偏差，就容易卡在“好像能用又总不灵”的状态。

不是插件没装好，大概率是文件语法模式没识别对。Sublime 的补全行为严格绑定当前语法作用域：Emmet 只在 HTML 或 CSS 语法下才监听 Tab 键。

右下角查看当前语法是否显示为 HTML（不是 Plain Text），若不对，按 Ctrl+Shift+P → 输入 Set Syntax: HTML 回车
新建文件后默认是 Plain Text，必须手动切换；也可保存为 .html 后缀，Sublime 通常会自动识别
部分项目中 .vue 单文件组件的区域不会触发 Emmet，需安装 Vue Syntax Highlight 或 Babel 插件，并确保光标落在内且语法被识别为 HTML

它默认只扫描当前打开的文件夹（即 Project 根目录），如果只是用 File → Open File 打开单个文件，AutoFileName 就看不到任何子目录。

务必使用 Project → Add Folder to Project 把整个项目根目录加进来
检查侧边栏是否显示完整目录树，没显示说明项目未正确加载
在 url( 或 @import " 后触发补全，不要在引号外或空格后按
若仍不出现子目录，确认 AutoFileName 设置中 "follow_symlinks": true 和 "show_hidden_files": false 是否合理（隐藏文件过多会拖慢响应）

原生 Sublime 的 CSS 补全默认不监听冒号后场景，CSS3 插件只提供语法定义，不自动开启补全触发器。

企业级前端设计系统，支持多页面应用、React/Vue组件、品牌一致性与高级动效编排。

下载

打开 Preferences → Settings – User，确认含以下三项：
"auto_complete": true
"auto_complete_selector": "source.css -comment"（注意不是 source.css-comment，中间是空格）
"auto_complete_triggers": [{ "selector": "source.css", "characters": ":" }]
装完 CSS3 插件后，需重启 Sublime 或关闭再重开 CSS 文件才能加载新语法定义
验证方式：新建 test.css，输入 display: 后按 Ctrl+Space，应立刻列出值候选

这是常见误解：SublimeLinter 只负责调用校验器并解析结果，是否高亮、在哪高亮、用什么图标，全由 SublimeLinter 自身的 UI 配置控制。

确保已通过 Package Control 安装了 SublimeLinter 和 SublimeLinter-eslint（不是仅装 ESLint CLI）
检查 Preferences → Package Settings → SublimeLinter → Settings 中 "gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme" 是否启用
"lint_mode": "background" 必须开启，否则只在保存时校验
若用 .eslintrc.js，确认它位于项目根目录，且 SublimeLinter-eslint 能读取到（可临时在命令行运行 npx eslint . --ext .js 验证配置有效性）