前言
前端工程师经常会在编写 HTML 和 CSS 代码时遇到一些规范问题，如代码缺失了必要的标签、标签的属性使用不符合标准等。这些问题不仅会降低代码的可读性和可维护性，还会影响代码在各个浏览器中的兼容性。当代码量较大时，这些问题更加显著。
为了解决这些问题，有一种工具可以帮助我们在编写代码时及早地发现规范问题——ESLint。ESLint 是一个自动化的代码质量工具，它可以帮助我们在开发过程中遵循一定的规范。本文介绍如何使用 ESLint 解决 HTML 和 CSS 的规范问题，让代码更加清晰易读。
ESLint 基础
安装
首先，我们需要安装 ESLint。在命令行中输入以下命令即可完成安装：
npm install --save-dev eslint
配置文件
接下来，我们需要创建一个 ESLint 的配置文件。在项目根目录下创建一个 .eslintrc 文件并写入以下代码：
-- -------------------- ---- -------
-
---------- -
--------------------
--
---------------- -
-------------- -
--
-------- --
-此处的配置文件使用了 ESLint 推荐的规则集 eslint:recommended，并且指定了使用的 ECMAScript 版本为 6。在 rules 中可以自定义规则。
使用
对于 HTML 和 CSS 代码，我们可以使用 eslint-plugin-html 和 eslint-plugin-css 来解决规范问题。我们可以在项目中安装这两个插件：
npm install --save-dev eslint-plugin-html eslint-plugin-css
安装完成后，在 .eslintrc 中加入以下配置：
-- -------------------- ---- -------
-
---------- -
---------------------
--------------------------
------------------------
--
---------------- -
-------------- -
--
-------- --
-注意，使用以上配置之前，需要先在项目中创建 .htmlhintrc 配置文件和 .csslintrc 配置文件，用于配置 eslint-plugin-html 和 eslint-plugin-css 插件的规则和选项。
HTML 规范
下面我们来看一些 HTML 规范问题，以及怎么使用 ESLint 解决这些问题。
缺少 DOCTYPE 声明
在 HTML5 中，所有的 HTML 页面都应该以 <!DOCTYPE html> 声明开头：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------- --------------
-------
------
---------- -----------
-------- ----- ----- --- ---------
-------
-------如果缺少了这个声明，一些浏览器可能会将文档渲染成其他版本的 HTML，导致一些问题。
使用 ESLint，我们可以在 .htmlhintrc 中添加以下规则：
{
"doctype-first": true
}这条规则可以强制要求在 HTML 文件的开始位置包含 DOCTYPE 声明。
大小写混用
在 HTML 标签中，应该全部使用小写字母。如：
<!-- 正确的写法 --> <div id="test"></div> <!-- 错误的写法 --> <DIV id="test"></DIV>
使用 ESLint，我们可以在 .htmlhintrc 中添加以下规则：
{
"tag-name-lowercase": true
}这条规则可以强制要求所有的 HTML 标签都使用小写字母。
空标签结尾
在 HTML5 中，不需要为没有内容的标签添加结束标记。如：
-- -------------------- ---- ------- ---- ----- --- ---- ---- ------ ------------ ---- ----- --- --------- --------- ------ --------------------
使用 ESLint，我们可以在 .htmlhintrc 中添加以下规则：
{
"tag-self-close": true
}这条规则可以要求所有没有内容的标签都使用自关闭格式。
多余的空格
在 HTML 标签中，应该避免出现多余的空格。如：
<!-- 正确的写法 --> <div class="test"></div> <!-- 错误的写法 --> <div class="test"></div>
使用 ESLint，我们可以在 .htmlhintrc 中添加以下规则：
{
"attr-no-duplication": true,
"attr-value-double-quotes": true,
"attr-value-not-empty": true,
"space-after-attr-name": true,
"space-in-brackets": true
}这些规则可以要求 HTML 标签中避免出现多余的空格。
CSS 规范
下面我们来看一些 CSS 规范问题，以及怎么使用 ESLint 解决这些问题。
缺少单位
在 CSS 中，应该给数值类型的属性添加单位。如：
/* 正确的写法 */ font-size: 16px; /* 错误的写法 */ font-size: 16;
为了解决这个问题，我们可以使用 ESLint 中的 unit-blacklist 规则，将不带单位的属性加入黑名单：
{
"unit-blacklist": ["font-size": true]
}这条规则可以要求给所有属性添加单位。
使用 !important
在 CSS 中，应该避免使用 !important。如：
-- -------------------- ---- ------- -- ----- -- -- - ---------- ----- - -- ----- -- -- - ---------- ---- ----------- -
使用 !important 可能会破坏其他样式规则的层叠顺序，因此应该避免使用。为了解决这个问题，我们可以使用 ESLint 中的 no-important 规则：
{
"no-important": true
}这条规则可以要求避免使用 !important。
颜色缩写
在 CSS 中，可以使用颜色缩写来减小样式表的大小。如：
/* 等价于 color: #003366 */ color: #036;
然而，如果颜色缩写使用不当，将会使代码难以阅读和调试。比如：
/* 颜色缩写有歧义 */ color: #123;
在这种情况下，如果我们想要设置一个浅蓝色的样式，可能会把 color: #123 当做合法的样式写进去，使得样式出现问题。为了解决这个问题，我们可以使用 ESLint 中的 color-hex-length 规则：
{
"color-hex-length": "long"
}这条规则可以要求将所有颜色缩写改写成六位数的形式。
总结
在本文中，我们介绍了如何使用 ESLint 来解决 HTML 和 CSS 代码的规范问题。通过使用 ESLint，我们可以在编写代码时及早地发现规范问题，从而使代码更加清晰易读。我们介绍了一些常见的 HTML 和 CSS 规范问题，以及如何使用 ESLint 来解决这些问题。我们希望这些方法对你有所帮助，让你的代码更加规范化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651e5f3a95b1f8cacd606b35