在前端开发中，我们经常需要处理 HTML 文件。如果一个 HTML 文件在生成后存在一些格式或语法上的问题，那么它将很难在浏览器中正确地解析和渲染，这将导致 HTML 页面出现错误、页面样式错乱等问题。因此，在输出 HTML 文件之前，我们需要将其进行格式和语法修正。本文将介绍一个非常优秀的 npm 包 metalsmith-html-tidy，它可以帮助我们轻松实现 HTML 文件的格式和语法修正。
metalsmith-html-tidy 简介
metalsmith-html-tidy 是一个用于构建静态网站的插件。它是基于 HTML Tidy 的一个 npm 包，可以自动地将 HTML 文件进行格式整理，使得 HTML 文件在输出前更加整洁、清晰。metalsmith-html-tidy 使用简单，可以轻松集成到对应的构建流程中，是前端开发者不可或缺的一款实用工具。
安装 metalsmith-html-tidy
要使用 metalsmith-html-tidy，您需要先安装 Node.js 和 metalsmith。然后，您可以使用 npm install 命令安装 metalsmith-html-tidy，命令如下：
npm install metalsmith-html-tidy --save-dev
配置 metalsmith-html-tidy
在配置文件中添加 metalsmith-html-tidy 插件。这里以 metalsmith 为例，其他构建工具配置方法类似。
-- -------------------- ---- -------
----- ---------- - ----------------------
----- -------- - --------------------------------
---------------------
--------------
--------------------
----------------
------------ -- -
-- ----- -
----- ----
-
---此处的配置会将 src 文件夹下的所有 HTML 文件进行格式整理，并输出到 dist 文件夹下。
参数设置
metalsmith-html-tidy 默认使用 HTML5 规范对 HTML 进行整理。但是，如果需要对 HTML 进行更加精细化的整理，则需要设置参数。
-- -------------------- ---- -------
---------------------
-----
---------------
-------- --------
------- -----
----- --
----------------- -----
---
------------ -- -
-- ----- -
----- ----
-
---- doctype：要整理的文档类型
- indent：是否缩进
- wrap：每行最多的字符数，0 表示不折行
- preserveEntities：是否保留实体字符
实战
接下来，我们就用一个实例来看看 metalsmith-html-tidy 的具体应用。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---- --------- ------------------------------- ---
-----------------------
-------
------
---- -- --------
-------- ---------
------
-------
-------针对上述 HTML 文件进行整理，我们可以使用如下代码：
-- -------------------- ---- -------
---------------------
--------------
--------------------
---------------
-------- --------
------- -----
----- --
----------------- -----
---
------------ -- -
-- ----- -
----- ----
-
---运行后的输出结果如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---- --------- ---
-------
--------
--------
-------
------
---- ----------
---
----- -----
----
------
-------
-------我们可以看到，整理后的 HTML 文件样式更加整齐，注释和文本之间加上了适量的空格等等，这样，我们的 HTML 页面就更加规范井然了。
总结
本文就是介绍了一个非常实用的 npm 包 metalsmith-html-tidy，该 npm 包可以帮助我们快速高效地进行 HTML格式和语法整理，让我们的页面代码更加清晰、规范。在实践过程中，我们不仅可以根据项目的需求进行配置它，还可以将其集成到对应的构建流程中，让我们的前端项目变得规范、高效起来。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f3f1d8e776d08040bd9