答案是通过安装Sorter或Sort Attributes插件并配置Prettier实现class自动排序：先安装插件，再用npm添加prettier-plugin-sort-classnames，配置.prettierrc文件启用插件，保存时即可自动按字母顺序排列class名称，适合团队统一风格。
在 Mac 上使用 VS Code 编辑 HTML 时，想自动排序 class 名称，可以通过安装专门的插件并配置格式化规则来实现。核心思路是借助支持类名排序的扩展，结合保存时自动格式化功能。
推荐插件：Sort Attributes / Sorter
这两个插件都支持对 HTML 中的属性（包括 class）进行排序：- Sort Attributes：专注于按字母顺序排列 HTML 属性，也支持 class 内部类名的排序。
- Sorter：功能更全面，支持多种语言和排序方式，可配置按字母排序 class 列表。
以 Sorter 为例，安装后无需额外设置即可通过右键菜单手动排序。若想自动排序，需进一步配置。
启用保存时自动排序 class
要实现保存文件时自动整理 class 顺序，需结合 Prettier 或自定义快捷键：- 安装 Prettier - Code formatter 插件。
- 安装 prettier-plugin-sort-classnames（需项目本地安装）：
在项目根目录运行：
npm install --save-dev prettier-plugin-sort-classnames
然后创建或修改 .prettierrc 配置文件：
{
"plugins": ["prettier-plugin-sort-classnames"]
}
这样 Prettier 在格式化 HTML 时会自动按字母顺序排列 class 名称。
直接使用快捷键快速排序
如果不希望全局自动格式化，也可以用快捷键触发：- 安装 Sorter 插件后，默认支持选择一段 class 字符串，按 Cmd+Shift+P 打开命令面板，输入 “Sorter: Sort” 即可排序。
- 可为该命令绑定快捷键，比如设为 Ctrl+S 快速整理选中内容。
基本上就这些方法。最实用的是结合 Prettier 和 prettier-plugin-sort-classnames，保存即生效，适合团队统一代码风格。单人项目用 Sorter 手动触发也很方便。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
