答案是通过安装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 手动触发也很方便。
以上就是Mac VS Code插件怎么自动排序HTML中的CSS类名的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1596927.html
微信扫一扫 
支付宝扫一扫 
