在前端开发中，我们常常需要处理 HTML 文件。而为了让 HTML 文件更好地被搜索引擎理解，我们需要遵循一些规范，如添加一些标签和属性。这时候，一个好用的 HTML 处理工具能够大大提高我们的工作效率。本篇文章将介绍一个名为 @hashml/cli 的 npm 包，它可以快速、简单地处理 HTML 文件，使其符合 HTML 规范。
安装
要使用 @hashml/cli，我们首先需要将它安装在本地环境中。可以使用 npm 来进行安装：
npm install -g @hashml/cli
安装成功后，我们可以通过运行下面的命令来检查是否安装成功：
hashml --version
如果能够输出版本号，则说明安装成功。
使用
@hashml/cli 提供了多种指令来处理 HTML 文件。下面将逐一介绍这些指令。
hashml lint
hashml lint 指令可以检查 HTML 文件是否符合规范。这里我们使用示例文件 index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例</title>
</head>
<body>
<h1>示例</h1>
<p>这是一篇示例文章。</p>
</body>
</html>运行下面的命令，我们可以看到输出的错误信息：
hashml lint index.html
输出：
Line [6:5]: The document should have a body tag
可以看到，这里提示我们缺少了一个 body 标签。我们可以在 HTML 中添加该标签后重新运行 hashml lint，即可看到输出正常。除了提示缺少标签，@hashml/cli 在提示错误信息时还会附带行号和列号，便于我们查找和修复错误。
hashml format
hashml format 指令可以格式化 HTML 文件，使之符合规范。继续使用上面的示例文件 index.html：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>示例</title></head><body><h1>示例</h1><p>这是一篇示例文章。</p></body></html>
我们可以运行下面的命令格式化该文件：
hashml format index.html
此时，该文件的内容已被格式化为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例</title>
</head>
<body>
<h1>示例</h1>
<p>这是一篇示例文章。</p>
</body>
</html>可以看到，@hashml/cli 已帮我们格式化了 HTML 文件，使它们更易于理解和维护。
hashml validate
hashml validate 指令可以验证 HTML 文件是否符合 W3C 标准。同样使用示例文件 index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>示例</title>
</head>
<body>
<h1>示例</h1>
<p>这是一篇示例文章。</p>
</body>
</html>我们可以运行下面的命令验证该文件：
hashml validate index.html
如果该文件符合 W3C 标准，则输出内容为空。如果该文件不符合标准，则输出错误信息。例如，如果我们在文件中添加如下内容：
<img src="example.png">
则运行 hashml validate 将提示错误：
index.html:8:7: Error: Attribute “src” not allowed on element “img” at this point.
除了上述三种指令，@hashml/cli 还提供其他指令来处理 HTML 文件。例如，使用 hashml beautify 指令可以美化 HTML 文件；使用 hashml remove 指令可以删除 HTML 文件中的某些元素等。
结语
通过本文，我们了解了如何使用 @hashml/cli 来处理 HTML 文件，使其符合规范。这不仅可以提高我们的开发效率，还可以让我们的网站更好地被搜索引擎发现和理解。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673e2fb81d47349e53e16