什么是 ESLint ？
ESLint 是一个 JavaScript 代码静态检查工具，它可以用来检查 ECMAScript/JavaScript 代码，不仅可以检查语法正确性，而且可以检查代码风格、错误和潜在的 Bug 等。ESLint 可以根据自定义的规则对代码进行检查，规则可以通过插件扩展或自行编写。
引入 ESLint 的优点
- 提高代码质量：ESLint 可以根据规则检查代码质量，代码质量得到提升。
- 统一代码风格：ESLint 可以规范代码风格，使得团队内成员编写的代码风格保持一致，降低阅读代码的难度，提高开发效率。
- 避免潜在的 bug：ESLint 可以检测代码中可能存在的 bug，避免出现一些无法预知的 runtime bug。
- 学习新技能：使用 ESLint 可以学习与了解更多的编程规范和技能.
如何引入 ESLint
ESLint 是基于 Node.js 运行的，因此需要使用 npm 进行安装。在安装之前，需要确保本地已安装 Node.js 环境.
- 全局安装 ESLint
npm install -g eslint
- 在项目中引入 ESLint
npm install eslint --save-dev
PS：--save-dev表示将依赖项安装到 devDependencies，因为浏览器并不认识 ESLint，它只是在开发环境中使用。
配置 ESLint
安装完成后，需要在项目根目录中创建 .eslintrc 文件，并在文件中配置规则。
规则主要包括以下两种:
- ESLint 自带的规则：eslint.org/docs/rules/
- 第三方规则库：例如 airbnb，standard，google 等。
那具体怎么写规则呢！下面是我工作中的一个项目里面用户存储 Session 的代码片段，一来看看具体代码的规范应该怎么设定。
-- -------------------- ---- ------- ------ ----- ---- --------- ----- ----- - --- ------- ------ ------- ----- ------- - ------ ----- --- ----- - ----- ---- - ----- --------------------------- -- ------- - ------ ---- - --- - ------ ---------------- - ----- --- - ------ ---- - - ------ ----- --- ----- ----- ---- - ----- --------------------------- --------------------- ----- ---- - ------ ----- ------- ----- - ----- --------------------------- - -展开代码
根据项目需求对代码风格和规范进行了一定的制定，有关规范部分文件中会给出，这儿主要介绍 eslint-config-airbnb-base 配置规则。
首先，需要在项目中安装 eslint-config-airbnb-base：
npm install eslint-config-airbnb-base eslint-plugin-import --save-dev
然后在 .eslintrc.json 中写入如下内容：
-- -------------------- ---- ------- - ---------- ---------------- ---------- ----------- -------- - ------------- ------ -------------------- - -------- -------- - ----- ------- - -- ----------------------- - -- - --------- ------ - - -- ----------- - ------------------ - ------- - -------- -------- ------------- ------- - - - -展开代码
extends: ['airbnb-base']：继承了eslint-config-airbnb-base的规则，并做了合理修改。plugins: ['import']：ESLint 默认不支持对 ES6 的模块语法进行检查，通过引入eslint-plugin-import插件来支持。no-console: 'off'：允许在代码中使用 console。import/extensions: 'never'：禁止在导入语句中使用文件扩展名。import/no-unresolved：确定导入的模块是否可以解析，可以通过设置一个正则忽略掉某些导入路径。import/resolver：将项目中的每一个目录配置为一个根目录，并设置必要的解析规则。
效果呈现
有了 ESLint 工具的帮助，我们只需要静静地等待着它悄悄地默默地运作。下面就来展示一下 ESLint 检测过后的代码是否合乎规范。
$ eslint ./src/storage/session.js
结语
使用 ESLint 可以帮助开发者提高代码质量，保证代码规范性和一致性，减少潜在的 Runtime Bug，大致配置步骤也已经介绍完毕，是时候开启 ESLint 代码检查的新篇章了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bf6c120c976d473a408c82
