rehype-sort-attributes 是一个可以帮助你对 HTML 标签属性排序的 npm 包，它可以让你方便地按照一定规则进行属性排序，提高代码的可读性和可维护性。
安装
通过 npm 可以很方便地安装 rehype-sort-attributes 包，只需要在命令行输入以下命令：
npm install rehype-sort-attributes
使用
rehype-sort-attributes 的使用非常简单，只需要引入相应的包，然后调用排序函数即可。下面是一个基本的示例代码：
-- -------------------- ---- -------
----- -- - -------------
----- ------- - ------------------
----- ----- - -----------------------
----- --------- - ---------------------------
----- -------------- - ---------------------------------
----- ---- - ------------------------------- -------
---------
-----------
--------------------
---------------
-------------- ----- ------- -- -
-- ----- ----- ---
----------------------------
--在以上代码中，fs 是 Node.js 的内置模块，用于读取本地的 HTML 文件。unified、parse 和 stringify 则是 rehype 包中的模块，用于将 HTML 解析成 AST，并将 AST 转换成 HTML。sortAttributes 则是本文的重点，它是 rehype-sort-attributes 包中的模块，用于对 HTML 中的标签属性进行排序。
属性排序规则
rehype-sort-attributes 支持多种排序规则，包括以下几种：
- alphabetical：按属性名称的字母顺序排序
- concise：按属性名称的字母顺序排序，但排在前面的属性会先出现，使 HTML 更紧凑
- none：不进行排序
你可以在调用排序函数时设置排序规则，如下所示：
-- -------------------- ---- -------
---------
-----------
-------------------- -
------ ---------
--
---------------
-------------- ----- ------- -- -
-- ----- ----- ---
----------------------------
--在以上代码中，order 参数设置了排序规则为 concise。
自定义排序规则
除了支持预设的排序规则外，rehype-sort-attributes 还支持自定义排序规则。你可以通过定义一个属性名称数组，并根据自己的需要对数组进行排序，来实现自定义的排序规则。
以下是一个自定义排序规则的示例代码：
-- -------------------- ---- -------
---------
-----------
-------------------- -
------ --- -- -- -------------------------- - --------------------------
--
---------------
-------------- ----- ------- -- -
-- ----- ----- ---
----------------------------
--
----- --------------- - ------ -------- ------ ------- ------在以上代码中，我们定义了一个属性名称数组 customAttrOrder，它包含了我们希望排序的属性名称，并将其传递给排序函数的 order 参数。排序规则使用了一个自定义的排序函数，它会将属性名称数组 customAttrOrder 中的排序结果作为属性排序的依据。
总结
通过使用 rehype-sort-attributes 包，我们可以轻松地对 HTML 中的标签属性进行排序，提高代码的可读性和可维护性。本文介绍了该包的安装与使用方法，并详细讲解了包中提供的多种排序规则和自定义排序规则。希望本文对你有所帮助，祝愉快学习！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f0a6ea5403f2923b035c09f