介绍
htmlhint-stylish 是一个基于 htmlhint 的命令行报告输出工具，它能够将 htmlhint 检测结果以可视化的方式展示出来。这个工具可以让前端开发者更加便捷地定位 HTML 代码中的问题，并提高代码质量。
安装
在使用 htmlhint-stylish 之前，需要先安装 htmlhint 和 htmlhint-stylish 两个 npm 包，可以通过以下命令来进行安装：
npm install htmlhint htmlhint-stylish --save-dev
使用方法
配置文件
在项目的根目录下创建一个名为 .htmlhintrc 的配置文件，用于配置 htmlhint 规则和 htmlhint-stylish 的输出格式。这个文件的内容如下：
-- -------------------- ---- -------
-
---------- -------------------------
-------- -
-- -------------
-- ---- ------------------------------------------------------ ------------
--
---------------------- -----------------------
------------ ------------------
-其中 extends 字段表示配置文件会继承 "htmlhint:recommended" 中预定义的规则。用户也可以根据自己的需求添加额外的规则。更多规则配置参见 HTMLHint Rules Index。
formattersDirectory 字段表示 htmlhint-stylish 的输出格式所在的目录路径。如果不设置该字段，htmlhint-stylish 将会使用默认的输出格式。
formatter 字段表示要使用的输出格式。这里我们指定为 htmlhint-stylish。
运行命令
配置文件编写完毕后，我们就可以使用 htmlhint 命令来检测 HTML 文件了。可以像下面这样运行命令：
htmlhint <path-to-html-file>
如果需要检测多个文件，可以使用类似下面的通配符：
htmlhint <path-to-folder>/**/*.html
结果展示
htmlhint-stylish 将会以可视化的方式展示 htmlhint 的检测结果。例如，在使用以下配置文件的情况下：
{
"extends": ["htmlhint:recommended"],
"rules": {
"alt-require": true,
"attr-lowercase": ["viewBox"]
},
"formatter": "htmlhint-stylish"
}当检测到一个含有违反规则的标签时，htmlhint-stylish 会将其用红色高亮，并在左侧列出具体的错误信息和位置，如图所示：
总结
htmlhint-stylish 是一个方便实用的命令行报告输出工具，它能够帮助前端开发者更快更准地定位 HTML 代码中的问题。在使用过程中，我们需要通过 .htmlhintrc 文件来配置 htmlhint 规则和输出格式，然后通过 htmlhint 命令来运行检测。希望这篇文章能够对大家有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/51146