sublime怎么实现HTML属性自动排序_sublime安装CSSComb插件【技巧】

cssComb 不适用于 html 属性排序，因其不解析 HTML 结构且易破坏属性值；推荐使用 sort HTML Attributes 插件，它按字母序排列标准属性并将 data-、aria- 等自定义属性统一置后，稳定轻量且专为 HTML 设计。

HTML 属性自动排序靠 CSSComb 不靠谱

CSSComb 本质是为 CSS 设计的格式化工具，它 不解析 HTML 结构，也不处理 class、id、data-* 这类属性的顺序。强行用它排 HTML 属性，大概率会失效，甚至破坏属性值（比如把 onclick="alert(1)" 里的引号或括号误判为 CSS 规则）。

真正可用的方案：安装 Sort HTML Attributes 插件

sublime Text 下唯一稳定、轻量、专注 HTML 属性排序的插件是 Sort HTML Attributes。它按字母序排列标准属性（class、id、src、href 等），并把自定义属性（data-*、aria-*）统一放在后面。

• 通过 Package Control → Install Package → Sort HTML Attributes 安装
• 选中一段 HTML 标签（如
  ），右键 → Sort HTML Attributes

• 默认排序规则不可配置，但已覆盖绝大多数工程场景；若需自定义顺序（如强制 class 永远第一），得换用其他编辑器或外部脚本

为什么不用 Emmet 或 Pretty jsON 类插件凑合？

Emmet 的 Emmet: Balance (expand abbreviation) 和 Pretty json 都不识别 HTML 属性语义——它们要么只展开缩写，要么只格式化 JSON 字符串。对 这种片段：

• Emmet: Reindent Lines 只调整缩进，不动属性顺序
• HTML-CSS-JS Prettify 可能重排换行，但属性顺序完全随机
• 任何基于正则的“手动排序宏”在遇到属性值含空格、引号嵌套（title='say "hello"'）时极易出错

排序后要注意的细节

属性排序本身不改变运行行为，但会影响 diff 可读性和团队协作一致性。实际使用中容易忽略三点：

立即学习“前端免费学习笔记（深入）”；

• 插件只处理「当前选中范围」，全文件排序需先 Ctrl+A 再操作，否则漏掉未选中的标签
• 它不处理模板语法混写，比如 vue 的
  中的 :class 会被当成普通属性排到前面，而实际上应归类为指令

• 如果 HTML 文件里夹着内联 或


  ，插件会跳过这些块，但不会报错——得人工确认是否所有目标标签都被覆盖