必须安装emmet和css3(aaronpowell版)两个插件,缺一不可:emmet负责缩写展开(如d:f→display:flex),css3替换语法定义以支持gap、aspect-ratio等现代属性高亮与基础片段补全。

装哪两个插件才真正起效
只装 Emmet 或只装某个叫“CSS3”的包,补全基本不会动。真正起效的是 Emmet + CSS3(aaronpowell 版)组合,缺一不可。
-
Emmet负责缩写展开(比如d:f→display: flex),不是补全器,但它是现代 CSS 编码流的基础 -
CSS3(作者 aaronpowell)替换默认的CSS.sublime-syntax,让gap、aspect-ratio、backdrop-filter这些属性不标红,同时提供基础属性/值片段(如输tran+ Tab →transition) - 别搜“CSS3 插件”这种关键词——90% 搜到的是停更、scope 冲突、甚至把
source.css覆盖成text.html.basic的坏包 - 安装必须用
Package Control:按Ctrl+Shift+P→ 输入Package Control: Install Package→ 分别搜Emmet和CSS3,认准作者名和蓝色 CSS3 logo
右下角显示 “CSS3” 才算生效
装完插件,文件语法仍默认是 CSS,不是 CSS3。右下角显示 CSS 就等于没配好,所有新属性照样标黄、补全还是老的。
- 新建
.css文件后,点右下角 → 选CSS3 - 已有
.css文件仍显示CSS:执行View → Syntax → Open all with current extension as… → CSS3 - 用
.module.css、.pcss等非标后缀?在Preferences → Settings – Syntax Specific里加:"syntax": "Packages/CSS3/CSS3.sublime-syntax"(注意路径里是CSS3,不是CSS) - Vue 单文件组件中
<style></style>块失效?先装Vue Syntax Highlight插件,再用Tools → Developer → Show Scope Name确认光标处 scope 是source.css
补全不弹?重点查 auto_complete_triggers
CSS3 插件本身不改 Sublime 的触发逻辑。输 display: 后不弹值列表,大概率是配置漏了或写错了。
- 打开
Preferences → Settings – User,确保有这段:
{
"auto_complete": true,
"auto_complete_selector": "source.css -comment",
"auto_complete_triggers": [
{"selector": "source.css", "characters": ":"}
]
}
auto_complete_triggers,或把 source.css 错写成 text.html.basic,会导致 HTML 标签名混进 CSS 补全,结果全是错的dis 就出 display——CSS 补全默认只在冒号后触发,这是设计使然,不是 bugsource.css 补全规则,否则得在对应插件的 settings 里手动加 "auto_complete_selector": "source.scss -comment"
路径补全要单独装 AutoFileName_ST4
background: url( 后不列文件?原版 AutoFileName 在 Sublime Text 4 上静默失效,必须用适配 Python 3 和新 API 的社区分支。
- Package Control 搜不到
AutoFileName_ST4,只能手动装:打开Preferences → Browse Packages…,进入目录后新建文件夹,**严格命名为AutoFileName**(不是AutoFileName_ST4) - 去 GitHub Releases 下载最新版
auto_file_name.py,放进Packages/AutoFileName/,确保路径是Packages/AutoFileName/auto_file_name.py - 重启 Sublime,或在 Console 里执行:
sublime_plugin.reload_plugin("AutoFileName.auto_file_name") - 补全触发有三硬条件:光标必须在**未闭合英文引号内**(
src="|✅,src=|❌),文件语法识别为CSS或含source.cssscope,且Preferences → Package Settings → AutoFileName → Settings – User中显式含"enabled": true和"auto_popup": true
CSS3、auto_complete_triggers 没配冒号、或者路径补全时引号没闭合——这三个点错一个,补全就彻底哑火。前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











