背景
现今，网页开发已经成为不可缺少的技术，然而常常会出现一些奇怪的 bug 导致网页无法正常运作。为了改善这种问题，使用 html linter 工具对网页进行检查已经成为一种流行的方式。这篇文章将会介绍如何使用 npm 包 @htmllinter/basic-rules 这个 html linter 工具来规范代码，减少 bug 的出现。
什么是 @htmllinter/basic-rules
@htmllinter/basic-rules 是一个基于 HTML 的规则型 linter 工具，它能够帮助开发者检查自己写的 HTML 代码是否存在常见的错误和不规范的写法。同时它还能够帮助开发者遵循最佳实践，提高代码的可读性和可维护性。
如何使用
以下是使用 @htmllinter/basic-rules 的方法：
安装 package
首先，我们需要全局安装 @htmllinter/basic-rules 包。在命令行中输入以下命令：
npm install @htmllinter/basic-rules -g
-g的意思是全局安装，这样我们就能在任何地方使用这个包。创建 HTML 文件
创建一个 HTML 文件，名为
test.html，并将以下代码复制到文件中：-- -------------------- ---- ------- --------- ----- ------ --------- ---- ------------ ------- ------ --------- ---------- ------- -- -- ---- --------- ------- -------
运行命令
在命令行中，输入以下命令：
html-linter test.html
检查结果
命令会在命令行中输出检查结果，我们可以根据返回信息进行修改。
常用规则
@htmllinter/basic-rules 支持许多规则。以下是其中一些常用的规则：
require-sri-for-scripts：禁止使用没有 SRI 标记的<script>标签加载 JavaScript。require-closing-tags：强制要求使用对应的闭合标签。disallow-attr-banned：禁止使用某些属性。require-alt-text：强制要求所有的<img>标签都有alt属性。disallow-heading-indent：禁止<h1>标签缩进。
示例
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------------
-------
------
--------
-------- ----------
---------
------
-------- -------------
------- --------
-------
-------
-------- --------
----
------ ------------- ----------
------ ------------- ----------
-----
--------
--------
--------- ---- --- ------ -------------
---------
-------
-------检查结果如下：
-- -------------------- ---- -------
---------
--- ----- ---------- ---- ---------- ------ ------- -- --- ---- ------- -----------------------------------------
--- ------- ------- ----- ------ ---- -------- -- --- -----------------------------------------------
--- ------- ---- ------- ---- --- ------- - ------- ---- ---------------------------------------------
--- ------- ---- ------- ---- --- ------- - ------- ---- ---------------------------------------------
--- ------- ---- ------- ---- --- ------- - ------- ---- ---------------------------------------------
--- ------- ---- ------- ---- --- ------- - ------- ---- ---------------------------------------------
---- ------- -------- ----- --------- --- ------- --- ----------------------------------------
----- ------- ------ ---- --- ------ ------ -------------------------------------
---- ------- -------------- --- ---- ------- ------- ----- ----------- ------- -------- ----------------------------------------------------
---- ------- ---- ------ ---- --- ----- ----------------- ------ --- --------------------- --------------------------------------------结论
@htmllinter/basic-rules 是一款很棒的 HTML 代码检查工具，它能够帮助我们有效避免常见 bug 和不规范写法，提高编写 HTML 代码的质量。在工作中，也应当更加严格地按照 HTML 规范和最佳实践，才能写出更加优质的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f01c446403f2923b035bced