ES7 之 ESLINT 的使用体验之路
前言
在前端开发中，我们经常会遇到一些 JavaScript 代码风格统一、规范与优化的问题。而 Eslint 是一款非常强大的 JavaScript 代码规范检查工具，它可以帮助我们解决很多潜在的问题，提高代码质量和可维护性。本文将讲解如何通过 ESLINT 工具来提升项目代码规范。
一、 什么是 Eslint
ESLint 是一个开源的，可支持插件化的 JavaScript 代码检查工具。ESLint 最初由 Nicholas C. Zakas 于2013年6月创建。它的设计是将来自于 JSLint 和 JSHint 的遗产，通过使其可插入的规则系统，并支持添加自定义规则，使其具有扩展性和可配置性。目前，ESLint 已经成为了 JavaScript 代码检查中的标准之一。
ESLint 可以检查 JavaScript 代码中的语法错误、潜在问题以及代码风格等，支持在命令行或者开发环境中实时对代码进行检查。另外，ESLint 还可以对代码进行自定义规则的配置，以满足不同项目的特殊需求。
二、 ESLint 的安装与设置
- 安装
全局安装：
npm install -g eslint
本地安装：
npm install --save-dev eslint
- 配置
在项目内新建 .eslintrc.js(可用 .eslintrc 或者 .eslintrc.json 代替)文件，ESLint 的配置文件支持 JavaScript、 JSON 和 YAML 格式。配置文件格式如下：
-- -------------------- ---- ------- - ------ - ---------- ----- ------- ----- ----------- ----- ------ ----- --------- ---- -- ---------------- - -------------- ----- ------------- -------- -- ---------- --------------------- -------- - ----------------- ------- ------------- ----- - -展开代码
- env: 指定环境，常用的有 browser（浏览器环境）、 node（node 环境）、 commonjs（CommonJS规范）、 es6 等。
- parserOptions:指定使用的解析器，ECMAScript 版本和模块规范
- extends: 继承某一套 ESLint 规则，比如 eslint: recommended 官方定义的一些通用规则。
- rules: 自定义规则，例如使用了未定义的变量给出警告、不允许使用 console 等等。
三、 ESLint 的使用
- 命令行
安装完 ESLint 后，我们可以使用以下命令在命令行中执行 ESLint：
eslint file.js
其中，file.js 表示要检查的文件名。
如果要对整个目录下的所有 JavaScript 文件进行检查，可以输入以下命令：
eslint .
- 检查文件
我们可以使用以下命令行检查文件：
// 检查 file.js 文件 eslint file.js // 检查 .js 后缀名的所有文件 eslint *.js // 检查目录下所有 .js 后缀名的文件 eslint .
- 检测规则
以下命令执行的将是 ESLint 预设的所有检测规则：
// --eslint短语是可选的，使用时可无需加入 eslint --eslint file.js
使用不同的参数，我们可以针对某一类规则进行检测：
// 检查变量声明是否只在 function 内部使用过 eslint --rule 'no-inner-declarations: [2, 'both']' variables.js
- 集成至编辑器
安装完 ESLint 后，我们可以利用 .eslintrc 文件使得检查规范可以集成至编辑器中，在代码编辑时实时检测规范并提示警告或错误， 例如在 VS Code 编辑器中，我们可以安装 ESLint 插件并将其与 .eslintrc 文件进行连接，使其与代码实时连接。 在 VS Code 中配置如下：
-- -------------------- ---- ------- - --------------------------- - ----------------------- ---- -- ------------------ - ------------- ------------------ ------------- ----------------- - -展开代码
四、 ESLint 高级用法
- eslint-plugin
ESLint 支持插件化，使用 eslint-plugin-XXX 可以增加一种新的规则集。例如 eslint-plugin-babel 就提供了很多和 Babel 相关的 JavaScript 代码检查规则。
npm install eslint-plugin-babel --save-dev
安装完毕，打开配置文件 .eslintrc.js 修改为如下：
-- -------------------- ---- ------- - ---------- - --------------------- -------------------------- -- ---------- - ------- - -展开代码
- eslint 配置共享
在多个项目中，我们不需要针对每一个项目都进行配置，将相同的配置表现在每个项目中十分浪费时间。这时，我们可以使用一个名为 eslint-config 的 npm 包来让多个项目共用同一套 ESLint 规则。
安装完毕，只需将相同的配置事先定义好，然后在文件中导入即可：
module.exports = { "extends": "eslint-config-unicorns" }
三、 ESLint 实战代码演示
在实际代码中，我们可以用 ESLint 帮助我们规范代码风格，开发过程中的智能提醒误操作，防止长时间代码累积成本或者是性能方面的问题：
假设现在我们添加一条规则：不允许使用 eval：
{ "rules": { "no-eval": "error", } }
接下来，我们写一段带有 eval 的代码：
function demo() { eval('console.log("hello world!")'); } demo();
运行 ESLint，该条规则规约监测输出：
ERROR: no-eval Using `eval` is not allowed. demo.js 2:12 no-eval
实际代码如下：
-- -------------------- ---- ------- ----- --- - --- -- -- -- --- ----- - - - - - -------- - ---- ------------------ -- --- -------- ------ - ------------------------ ----------- - -------展开代码
我们在命令行中执行一条命令 ESLint demo.js，则显示如下的信息：
demo.js 8:9 error Using `eval` is not allowed. no-eval ✖ 1 problem (1 error, 0 warnings)
ESLint 在检测出代码风格不符合规则之后，给出了具体的错误信息并定位到了具体的错误行数和列数，方便我们进行定位和修改。
结语
ESLint 是一款非常强大的 JavaScript 代码规范检查工具，可以帮助我们解决很多潜在的问题，提高代码质量和可维护性。本文介绍了 ESLint 的安装与配置、使用方法、高级用法，并给出了以实战演示加深对 ESLint 这个优秀工具的理解。希望本文可以在你的前端开发中提供帮助，避免重复代码以及代码质量问题出现，让开发更加高效、安全、规范。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6781da4f935627c900ed717a
