前端开发在不断迭代的过程中，代码规范是保证代码质量的重要一环。而 ESLint 可以帮助我们规范化，它内置了大量的规则，也可以通过插件来扩展规则。
本文将介绍如何利用 ESLint 中每一个 rule 与 plugin，构建自己的代码规范。
ESLint 原理
ESLint 是一个以 ECMAScript 代码为基础的静态检查工具，它通过采用纯 JavaScript 实现的插件和扩展规则来实现代码检查和提示。
语法解析的过程中，对于经过本地已配置规则的代码，对于违反规则的部分，都将提供相应的错误和警告信息。
在运行时，ESLint 将会使用 CLI 或脚本文件配置，实现对应用程序的检查与修复。
如何为 ESLint 自定义规则
以上文提到的运行时维护 ESLint 的检查与修复，我们可以通过自定义规则来帮助我们约束代码。
ESLint 的一个最大的特点，就是你可以为其编写自定义规则来满足与标准规则不一样的需求。
每一个规则均可以用唯一的标识符命名，可以用于判断命名冲突。规则通常由一个或多个模式组成，模式表示了相应规则在源代码中所检查的内容。
ESLint 规则分为三个级别：off、warn 和 error，其中 off 表示关闭这个规则，而 warn 和 error 则表示开启这个规则，并提示警告或错误。
一般情况下，严格要求的规则都是使用 error 级别，一般提示的规则使用 warn 级别。
为 ESLint 编写自定义规则的步骤
- 编写规则实现。需要实现
RuleTester与规则函数，必须 export 一个函数，接受一个简单的对象参数，返回一个对象，必须包含一个RuleTester和一个规则函数。 - 编写测试用例。
RuleTester能够自动生成测试用例，要求您为它提供样例代码、规则名称和期望实际错误信息。 - 导出规则和测试用例。您的规则在代码中定义，而测试用例则必须在文件中。
以上三个步骤就是为 ESLint 定义自定义规则的通用方式。
一个例子
-- -------------------- ---- -------
----- ---------- - -----------------------------
----- ---- - -------------------------
----- ---------- - --- ------------
-------------- -
------------ -
-
---
------------------------- ----- -
------ -
------ --- - ---
--
-------- -
-
----- ------ --- - - --- - ----
------- --
-------- ------- ------ -- -------- ----------
----- -----------------------
---
--
--
---这里定义的自定义规则，如下：
'no-constant-assign': [
'error',
{
// 这个规则应用于内建常量也应该报错
'consts': true,
},
],如何为 ESLint 安装插件
ESLint 内置了许多规则，但是我们还需要更多的规则，供我们使用。插件能够扩展规则，提供其他的规则以帮助我们约束代码。
ESLint 插件本质上就是一组规则（或者是一个规则）。插件能够扩展规则，提供其他的规则以帮助我们约束代码。
安装插件的方式
推荐的方式是使用 npm，npm install xxx，即可安装。安装完毕之后，在 .eslintrc.js 中添加：
module.exports = {
plugins: ['xxx'],
rules: {
// 在此添加由你的插件定义的所有规则
'xxx/rule': 'error'
}
}如何为 ESLint 编写插件
插件的目录结构
ESLint 插件要求我们遵循一定的目录规范，所以，我们需要创建一个目录来保存项目，这个目录至少要有以下文件：
node_modules/ lib/ README.md package.json
其中 lib 目录要求至少存在一个 index.js 文件。在 index.js 中，我们可以指定我们的规则以及其他的配置项。
如何定义插件规则
定义插件规则跟上面的自定义规则有些类似，但是有一些不同的地方。
ESLint 规则分为三个级别：off、warn 和 error，其中 off 表示关闭这个规则，而 warn 和 error 则表示开启这个规则，并提示警告或错误。
一般情况下，严格要求的规则都是使用 error 级别，一般提示的规则使用 warn 级别。
-- -------------------- ---- -------
-- ------------------------------
-------------- - -
----- -
----- -
------------ ------- ------
--------- ----- -----------
------------ -----
--
------- --
----- ---------
----------- -
------- -
----- ---------
------------ ----------- --------
--
--
---
--
------- ----------------- -
------ -
-------- -------------- -
-- ------- ---------- --- -------- -- -------------------------------- --- --- -
----------------
-----
-------- -------- -------------------
---
-
--
--
--
--这个规则函数检查代码中是否包含值为 mysite.com 的字符串。如果是，则会触发错误。
插件的安装与使用
安装：
npm install my-plugin
修改 .eslintrc.js 文件：
module.exports = {
plugins: ['my-plugin'],
rules: {
'my-plugin/my-rule': ['error', { domain: 'mysite.com' }],
},
};如何结合插件和自定义规则
自定义规则和插件可以一起使用，更好地实现约束代码的目的。
以 eslint-plugin-import 为例，它可以帮助我们管理模块导入的定义规则，提高模块引用的可维护性。
安装选项：
npx install-peerdeps --dev eslint-plugin-import
配置选项，增加规则：
-- -------------------- ---- ------- -------- ----------- ------ - --------------------- ------ ----------------------- -------- --------------- -------- ----------------- -------- ------------------- -------- ---------------- ------- -
注意：当使用到这个插件时，您必须自行添加 compatible AMD & global 语句，具体请参考该插件的规则。
总结
本文介绍了如何利用 ESLint 中的自定义规则和插件来规范代码。自定义规则和插件扩展了官方的 ESLint 规则集，可以轻松地实现约束代码的目的。
作为一个合格的编程师，应当注重代码规范，并利用 ESLint 等工具来规范代码，为我们的代码保驾护航，增加代码的可读性、可维护性和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651c179d95b1f8cacd3a9dd4