在HTML文件使用Emmet时如何获取自定义CSS类的自动补全提示

以下是主流前端编辑器的配置方法：

VS Code（适用范围最广） #

1. 调整基础配置 #

• 打开VS Code设置界面：快捷键Ctrl+,（Windows系统）/Cmd+,（Mac系统），或点击左下角齿轮图标选择「设置」
• 搜索配置项emmet.showExpandedAbbreviation，将值设置为always
• 搜索配置项editor.suggest.showClasses，确保该选项处于开启状态
• 可选配置：开启emmet.triggerExpansionOnTab，按下Tab键即可快速确认补全的Emmet代码片段

2. 配置自定义样式文件扫描路径 #

如果你的项目自定义CSS/LESS/SCSS文件存放在子目录下，需要手动指定扫描路径让编辑器识别自定义类名：

• 找到项目根目录下的.vscode/settings.json文件，不存在则手动新建
• 添加如下配置，路径可根据你的项目结构调整，支持glob匹配规则：

{
  "css.styleSheets": [
    "./styles/**/*.css",
    "./src/assets/css/**/*.less"
  ]
}

如果使用SCSS预处理器，将配置项css.styleSheets替换为scss.styleSheets即可。

Sublime Text #

• 先安装Emmet和CSS Class Completion两个插件
• 打开Emmet插件设置，找到enable_class_completions选项，设置为true即可生效
  配置完成后重启编辑器，在HTML文件中输入div.即可触发自定义CSS类名补全，效果和在<div class="">属性内输入的补全提示完全一致，参考效果如下：
  

内容的提问来源于stack exchange，提问作者Erorr 404