sublime怎么在HTML中自动补全CSS类名？ (CSS Completions)

Sublime Text 可通过 AutoFileName 和 CSS Class Completions 插件实现 HTML 中已定义 CSS 类名的自动补全：前者辅助定位 CSS 文件路径，后者从项目 CSS/SCSS/LESS 文件提取类名并支持 BEM 风格，需手动刷新缓存。

Sublime Text 默认不直接读取项目中的 CSS 文件来补全 HTML 里的 class 值，但可以通过插件和简单配置实现“在 HTML 中自动补全已定义的 CSS 类名”。

安装 AutoFileName 插件（基础路径/文件补全）

它本身不补全 CSS 类名，但为后续插件打基础，且能帮你快速定位 CSS 文件路径：

• 按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（Mac），输入 Install Package，回车
• 搜索 AutoFileName，安装后重启 Sublime
• 在 HTML 的 link 标签中写 href="css/，会自动列出 css/ 目录下的文件

使用 CSS Class Completions 插件（核心方案）

这是专为 HTML 中补全 CSS 类名设计的轻量插件，支持从项目内所有 .css、.scss、.less 文件中提取类名：

• 同样通过 Package Control → Install Package，搜索并安装 CSS Class Completions
• 安装后无需额外设置，默认生效：在 HTML 的 class="" 或 class='' 内，输入字母（如 btn），按下 Ctrl+Space（或自动触发）即可看到匹配的类名
• 支持嵌套语法（如 .header .nav-item），也识别 BEM 风格（btn__icon、btn--primary）

手动刷新类名索引（当新增 CSS 类没出现时）

该插件不会实时监听文件变化，类名更新后需手动重建缓存：

标签： css linux html sublime node windows mac win