Sublime Text 3怎么安装CSS自动补全插件？前端必备技巧-sublime-PHP中文网

sublime text 3 必须同时安装 emmet 和 aaronpowell/austinhappel 版 css3 插件，手动切换语法为“css3”，并配置 auto_complete_triggers 触发冒号，启用 enable_experimental 才能支持现代 css 属性值自动补全。

sublime text 3怎么安装css自动补全插件？前端必备技巧

Sublime Text 3 原生不支持 CSS 属性值自动补全（比如输 display: 后弹出 flex、grid），装错插件或漏配关键项，补全就永远不出现——不是“没效果”，而是根本没启动。

必须装 Emmet + CSS3（aaronpowell 版）两个插件

只装一个等于白装：Emmet 负责缩写展开（如 d:f → display: flex），CSS3（作者必须是 aaronpowell 或 austinhappel）才真正替换原生语法定义，让 gap、aspect-ratio、backdrop-filter 不标红、能进补全池。

别搜“CSS3 插件”这种词——搜到的多数是停更包（如 arokor 版），对 container 查询、scroll-behavior 完全没支持
Package Control 中搜 Emmet 和 CSS3，认准作者名和蓝色 CSS3 logo；图标带齿轮的 Autoprefixer 或 CSS Extensions 不是你要的
手动解压 zip 或 git clone 到 Packages/ 目录？90% 失败：路径大小写错（CSS3 ≠ css3）、CSS3.sublime-syntax 文件没放对位置、ST4 版本不匹配都会导致右下角始终显示 CSS

右下角必须显示 “CSS3”，否则补全全失效

插件装完不会自动切换已有文件的语法模式。哪怕你新建一个 style.css，右下角默认还是 CSS，grid-area 依然灰底、fr 单位不识别。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

新建文件后，点右下角 → 选 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）
切完语法后建议按 Ctrl+R 重载文件，否则高亮和补全可能延迟生效

补全不弹？检查 `auto_complete_triggers` 是否配了冒号

CSS3 插件本身不改 Sublime 的补全触发逻辑。它只提供词典，不控制“什么时候弹”。输 dis 不会出 display，但输完 display: 后必须立刻弹值列表——前提是触发配置正确。

在 Preferences → Settings（用户设置）里确认有以下配置：

{
  "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 补全里，结果全是错的
如果用了其他语法高亮插件（如 CSS Extended Completions），它们可能覆盖 source.css scope，导致触发器失效