前言
任何事物都是不断发展的，而在前端开发中，ESLint作为一款强大的代码检查工具，它也在不断的迭代，改进，增强其功能，使其更加高效，严谨。本文将介绍ESLint7.0的新特性并讲述怎样正确地使用它。
新特性
链式运算符
ESLint7.0新增了针对链式运算符的检查规则，可以帮助我们更好地检查代码中链式调用的风格问题。链式运算符是指多个点操作符组成的表达式，如 a.b.c，a().b 等。链式运算符常常出现在比较复杂的业务逻辑中，如果不小心写出了一些糟糕的代码，可能会使得整个应用程序出现错误，难以调试。
我们可以使用ESLint7.0中新增的规则来有效地避免链式运算符的问题，这里的例子展示了如何正确地使用这个规则。
-- -------------------- ---- -------
-- --------------
-
-------- -
------------------------ ------
----------------- ------
------------- ------
----------------------- ------
----------------------- ------
------------------- ------
----------------------- ------
--------------------- ------
----------------- ------
------------------ ------
------------------ ------
------------------------------- ------
------- ------
-------- --------- - ------------------- ---- --
-
-在这个例子中，我们关闭了其他的规则，只启用了链式运算符检查的规则。这个规则是 chain。我们可以看到，除了 error 以外，还有一个可选参数 considerNullable，它是为了解决一些编码特别复杂、可能导致歧义的情况。例如：
const foo = { bar: null };
const baz = foo?.bar?.baz;运用 considerNullable 参数，上面的代码可以被认为是非链式调用的正常语法，而不会报错。
自定义文件扩展名
在ESLint7.0中，我们可以通过设置 overrides 属性来为某些文件指定一个特定的扩展名，这样就能够让ESLint识别它们并且应用特定的规则。这个特性尤其适用于业务逻辑和测试用例，它可以让我们在自定义扩展名的文件中使用自定义规则。
这里是一个示例配置：
-- -------------------- ---- -------
-- --------------
-
------------ -
-
-------- -----------------
-------- -
------------------------ ------
------------- ------
----------- -----
-
--
-
-------- ------------------------
-------- -
------- --------- ----------
--------------- --------- ----------
----------------- ------
------------- -----
-
-
-
-在这个例子中，我们通过定义两个 overrides 来为测试文件和整合文件分别设定特殊配置。其中，测试用例（.test.js）可以使用 no-unused-expressions、no-console 和 no-undef 这三个规则；而整合文件（.integration.js）则需要遵循我们设定的更严格的规则，如必须加分号、箭头函数必须加小括号等等。
使用
使用ESLint有很多不同的方法，下面我将介绍两种最常见的方法。
局部安装并配合 IDE 来使用
局部安装是将ESLint安装在项目根目录下并在本地使用。这样做的好处是可以方便地添加、删除插件，发现坑并及时修复。而配合 IDE 效果则是可以在写代码的过程中实时检测错误。
安装
在终端中，输入以下命令：
npm install eslint --save-dev
安装完成后，会在 node_modules 目录中生成ESLint相关的文件。
配置
在安装完成后，需要为你的项目进行配置，以便ESLint能够检查和修复你的代码。一般情况下，你需要新建 .eslintrc 文件，并将你的代码风格指南写在这个文件中。
以下是一个最基本的 .eslintrc 配置文件：
{
"rules": {
"semi": "error",
"quotes": ["error", "double"]
}
}运行
安装和配置完成后，就可以运行ESLint了。一般情况下，你可以在项目文件夹下使用以下命令：
./node_modules/.bin/eslint yourfile.js
绑定到 Git 钩子
为了更好地保证代码质量，我们可以将ESLint绑定到Git钩子中，以便在代码提交之前检查JavaScript代码。一旦检查出错误，修改之后再进行提交。这里是一个例子：
-- -------------------- ---- -------
-- --------- --------------------- -
---------
-
- ------- ---------------------------
- -- -------------------------- - -- -
----- ------- ---------- --- ------
----- -
-
- ------------ ------
- ----------------------
-------------------------- --------------------
-- - -- --- - -- ----
---- -
--
---- -配合 Webpack 使用
Webpack是一个JavaScript模块打包工具，它支持将所有的JavaScript代码打包成一个文件。利用Webpack的JSX、ES6、TypeScript等特性打包时，我们还可以使用ESLint来检查你的代码并给出错误提示。
安装
首先，你需要安装webpack、ESLint，以及一个webpack/ESLint的插件以便使用它们。
npm install webpack webpack-cli eslint eslint-webpack-plugin --save-dev
配置
配置Webpack时需要使用插件。安装完成插件后，就可以在webpack配置文件中配置ESLint插件了。
const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
plugins: [
new ESLintPlugin()
]
};当运行 webpack 命令时，Webpack会自动检测你的代码，给出错误提示。
结论
ESLint是一个强大的工具，用它可以节省大量时间和精力。但是，ESLint也只是一个指导工具，合格的程序员需要不断地深化知识，追求更佳的代码风格。
希望本文能够帮助读者，理解并熟练掌握ESLint7.0的新特性及其使用方法，并以此进一步提升自己的技能水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673254840bc820c5823cdfa1