前言
作为一门前端技术，JavaScript 语言不仅有其方便与快速的优点，同时也会有其内置对象不一致、快速构建项目出现重构困难等缺点。ESLint 是一个灵活的 JavaScript 代码检查工具，用于标准化项目中的代码风格和发现常见的编码错误。ESLint 通过插件机制，提供了对 JavaScript 语言更高级别的语法检测功能，还提供了自定义规则的机制，以弥补标准规则无法覆盖的部分。
本文将简要介绍 ESLint 的使用方法及其在项目中的应用，并深入探讨如何自定义规则，使项目代码规范更加严谨。
ESLint 使用指南
安装
安装 ESLint 可以用 npm 直接安装：
npm install eslint --save-dev
配置
安装之后，需要配置 deslint, 一般在项目根目录下新建 .eslintrc 文件进行配置。该文件可以是 JSON 格式，也可以是 YAML 格式等，这里以 JSON 为例：
{
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}其中， rules 字段定义了由 ESLint 检测的规则，使用的格式是 key-value 对，其中 key 是规则名，value 是一个数组，第一个元素表示错误等级（0 表示关闭此规则，1 表示输出警告，2 表示输出错误）、第二个元素表示修正方式以下为三种格式：
- "off" 或 0 - 关闭规则
- "warn" 或 1 - 规则打开，当存在问题时，输出警告
- "error" 或 2 - 规则打开，当存在问题时，输出错误
同时，规则名后跟着的参数将被传递给规则，用于进一步更改其行为。例子中的 "semi" 规则强制执行一行结束时需要分号， "quotes" 规则强制双引号。
执行
执行 ESLint，检查单个文件：
./node_modules/.bin/eslint example.js
或者一个目录递归地检查
./node_modules/.bin/eslint src/**/*.js
或者在 package.json 中使用 npm scripts：
{
"scripts": {
"lint": "eslint src/**/*.js"
}
}然后在终端中输入 npm run lint 即可。
深度探索
通过上面几段的介绍，我们已经知道 ESLint 能够快速检测我们的代码，并能够通过 .eslintrc 文件定义自己要用的规则。但是，在实际开发过程中，有时可能需要我们自定义规则，以适应项目的特殊情况。这时候，ESLint 提供了 extendRoutes 方法和自定义规则的制定来帮助我们快速解决问题。
extendRoutes
ESLint 提供了 extendRoutes 钩子方法来让我们在项目运行过程中添加解析扩展规则。这只需要创建一个钩子函数并在注册时覆盖 extendRoutes 选项即可。
-- -------------------- ---- -------
----- ------ - --- ---------------
----------- ------ ------
------------- -------- --------------- -- -
----- --------- - -----------------------------------
-- ------
-------------
------ ------------------------------------------------
-------- --
---
-- -------
-------------
------- ---------------------------------------------
-------------- -
----------- ---------
---------------------------- -----
------------ -----
-------- -----------------
--
-------- ---------------------- -----------
------ -
-------------------------------------------
------------------------------------ --------
---------------------- ------
------------------------------ --------
--------------------------------- -------
-
---
-- --------
----------------
-------- ----------
------ -
---------------------- --------- ------------ -------- -------------------- ------
-
---
-
---以上代码中， extendRoutes 返回一个数组，其中含有一组规则。每组规则包含 parser、parserOptions、plugins、rules 等选项。其中 rules 选项是我们定义规则的关键。
自定义规则
自定义规则需要自己定义规则并添加到 rules 配置中即可。
-- -------------------- ---- -------
-- ----
----- ------------ - -
--------------- -
----- ---------- - ------
-------- --------------- -
-- ---------------------------- -
----------------
-----
-------- ----------- ------- ---------- -- -------- ---- ----------------
---
-
-
------ -
-------------------- ----------
------------------- ----------
------------------------ ---------
--
-
--
-- ----
-------------- - -
------ -
----------------- ------------
-
--等到项目使用自定义规则时便可以增加规则名到 .eslintrc 文件中进行使用。
{
"rules": {
"my-custom-rule": "error"
}
}结论
ESLint 作为前端项目开发的一个必需工具，其提供了更加灵活自定义的插件机制来解决实际开发过程中遇到的问题，并且能够方便快速的对项目代码风格进行规范检测和错误输出。自定义规则能够更好地适应项目的特殊情况，与其他前端工具，如 Stylelint 和 Prettier 进行协作，进一步实现前端项目代码的规范性，可读性和可维护性。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/677216c56d66e0f9aad48425