在HTML开发过程中，我们经常会为一个元素添加多个class类名来实现样式控制，比如一个按钮可能同时有btn、btn-primary、active等多个类名。如果手动调整这些类名的顺序，不仅耗时还容易出现顺序不统一的问题，导致代码看起来杂乱。通过VS Code的插件功能，我们可以实现class属性的自动排序，让代码始终保持整齐规范。
适用插件选择
目前比较常用的可以实现class自动排序的VS Code插件是Headwind，这款插件专门用于重新排序和格式化HTML class属性，支持自定义排序规则，适配大多数开发场景。
插件安装步骤
- 打开VS Code，点击左侧侧边栏的扩展图标，或者使用快捷键
Ctrl+Shift+X打开扩展面板 - 在搜索框中输入
Headwind，找到对应的插件 - 点击安装按钮，等待安装完成即可
基础配置说明
插件安装完成后，我们可以通过修改VS Code的配置文件来自定义排序规则。打开设置界面，搜索headwind相关的配置项，主要配置项如下：
| 配置项 | 说明 |
|---|---|
| headwind.classRegex | 匹配class属性的正则表达式，默认已经适配大多数HTML场景，一般不需要修改 |
| headwind.removeDuplicates | 是否移除重复的类名，默认值为true |
| headwind.sortOrder | 自定义类名排序的顺序，可以设置预定义的排序规则，也可以自定义类名列表 |
自定义排序规则示例
如果我们希望按照特定顺序排序类名，比如先排布局类，再排样式类，最后排状态类，可以在VS Code的settings.json中添加如下配置：
{
"headwind.sortOrder": [
"container",
"row",
"col",
"btn",
"btn-primary",
"text-center",
"active",
"disabled"
]
}
自动排序触发方式
配置完成后，我们可以通过以下方式触发class自动排序：
- 保存文件时自动触发：在设置中开启
editor.formatOnSave选项，保存HTML文件时就会自动排序class属性 - 手动触发：打开HTML文件后，使用快捷键
Ctrl+Shift+P打开命令面板，输入Headwind: Run执行排序命令
代码示例
排序前的HTML代码片段：
<div class="active text-center btn-primary btn col row container"> 示例内容 </div>
执行自动排序后的代码片段：
<div class="container row col btn btn-primary text-center active"> 示例内容 </div>
注意事项
- 插件默认只处理HTML文件中的class属性，如果需要处理其他文件类型，可以修改插件的生效文件范围配置
- 如果自定义排序规则中没有包含某个类名，该类名会被放在排序列表的末尾
- 排序操作不会修改class的实际功能，只会调整类名的排列顺序