前端工具-ESlint

ESLint 是一个开源的 JavaScript 代码检查工具。它可以帮助我们去检查js代码中可能潜在的问题,并且有利于形成良好的编码习惯。无论你是不是初学者都应该尽早去使用它。

1 简介

本文介绍了ESlint的基本使用方法：安装，配置，使用。不涉及具体的开发工具和前端工程。

只要你在使用js写代码就可以按本文介绍的步骤去使用这个强大的工具了。

2 主要内容

•基本介绍•它能做什么•安装及基本使用•规则说明•应用规则

3 基本介绍

ESLint 是一个开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas 于2013年6月创建。代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。

JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。

ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别，规则本身和测试可以依赖于同样的模式。为了便于人们使用，ESLint 内置了一些规则，当然，你可以在使用过程中自定义规则。

ESLint 使用 Node.js 编写，这样既可以有一个快速的运行环境的同时也便于安装。

4 它能做什么

•对个人来说，它可以帮助你检查代码中潜在的错误（例如：使用了没有定义的变量名），还有其它更多的好处哈。•对团队来说，它可以帮助统一代码风格(例如，是否需要在代码的结束添加;)。•它还可以允许你自己定义检查规则。

5 安装

由于ESlint是基于node.js环境的，所以在你决定使ESlint之前，请先行安装node.js。你在安装完成node.js之后，就可以使用npm命令来全局安装ESlint了。

npm install eslint -g

扫描二维码关注公众号，回复： 12345256 查看本文章

这里说明两点：

1.ESlint是一个工具性质的包，可以认为对你开发的每一个项目都需要使用，所以，这里先进行全局安装。2.你可以运行npm root -g命令去查看这个包被安装到哪里了。

如果安装成功，你可以运行eslint -v 命令来查看所安装的版本。

6 基本使用

安装完成之后，我们就可以使用eslint来对我们的写的js代码进行检查了。要检查代码，事先要准备两样东西：

1.你要检查的代码文件。2.你要用什么规则去检查。这一点很朴素：你要改卷子，那你必须得有一个评分标准吧。

我们事先准备一个简单的js文件如下：假设这个文件在桌面的es目录下，文件名为1.js

var str = 'abc';
console.log(b)

注意到上面的代码中有几个问题：

1.第一行代码有;结束，第二行没有2.第二行中使用的变量是没有定义过的3.使用了单引号把字符串包起来。4.str定义之后，从未使用过。

接下来，我们在命令行中进入到这个目录下，并运行命令如下：

eslint 1.js --rule 'quotes:[2,double]'

上面这句命令的含义是：让eslint 对1.js文件使用规则 'quotes:[2,double]'去检查。这个规则是什么含义，我们稍后再说。先看得到结果如下：

PS C:\Users\fanyoufu\Desktop\es> eslint 1.js --rule 'quotes:[2,double]'
C:\Users\fanyoufu\Desktop\es\1.js  1:9  error  Strings must use doublequote  quotes
✖ 1 problem (1 error, 0 warnings)  1 error and 0 warnings potentially fixable with the `--fix` option.

这个检查结果说明你的1.js文件中有一个错误：第一行第9字符处，你使用了单引号来表示字符串，而你的规则要求字符串必须使用双引号。注意，ESlint只是指出了你的错误，而并没有帮你去修正这个错误，但它在给出的建议中还告诉你可以加上--fix 来解决这个错误。

你可以再试下这个命令。

eslint 1.js --rule 'quotes:[2,double]' --fix

运行完成，如果没有报什么错误的话，你应该可以发现你的源代码中的 单引号应该已经变成了双引号了。

是不是很神奇哈。

下面，我们来学习一下上面用到的规则： quotes:[2,double]

7 ESlint的规则

主要内容：

•规则构成及格式•应用规则

7.1 规则构成及格式

ESlint中的规则有三个维度的设置：

1.规则名称2.规则错误级别3.规则参数

基本的格式是：

规则名称:[规则错误级别,规则参数]

以下为例

quotes:[2,dobule]

1.quotes表示规则名称。ESlint内置了很多规则。2.2表示错误级别。对代码使用这条规则时，应该如何处置：

•off 或者 0 。表示不要这个规则，相当于是关闭这条规则了。•warn 或者 1 。表示当代码不符合这条规则时，ESlint把它当作一个警告来处理（并不会导致检查不通过）•error 或者 2。表示当代码不符合这条规则时，ESlint把它当作一个错误来处理（会导致检查不通过）

3.dobule。表示对本条规则的参数项。对于不同的规则这个值也是不一样的。

下面我们来试验一下：请还保持1.js中的双引号，然后运行如下的命令（注意由2，改成了1）​​​​​​​

PS C:\Users\fanyoufu\Desktop\es> eslint 1.js --rule 'quotes:[1,double]'
C:\Users\fanyoufu\Desktop\es\1.js  1:9  warning  Strings must use doublequote  quotes
✖ 1 problem (0 errors, 1 warning)  0 errors and 1 warning potentially fixable with the `--fix` option.

可以看到，原来的错误级别下降到了警告级别。

值得注意的是 规则一般会有自己的默认参数。例如qutoes这条规则默认是使用双引号，即：

quotes:[2]  === quotes:[2,double]

7.2 规则的详细设置

ESlint中有很多的规则，参考官网[1] 。每条规则 的应用场景和设置都不一样。

我们以quotes为例来介绍一下：你可以打开网页 http://eslint.cn/docs/rules/，然后在网页中搜索`quotes`，就应该可以看到这个关键字啦

quotes[2] 用来约定强制使用一致的反勾号、双引号或单引号。在js代码中，程序员有三种定义字符串的方式：双引号，单引号，反引号（es6）​​​​​​​

var a = "abc";var b = 'abc';var c = `abc`; // es6中支持的模板字符串

选择太多，反而不好：一个项目中，多人共同写代码，风格就不统一了嘛。此时，可以使用这条规则来强制大家共同遵守一种写法，或者达成某个共识。

该规则有两个选项，一个是字符串，一个是对象。

字符串选项：

•"double" (默认) 要求尽可能地使用双引号•"single" 要求尽可能地使用单引号•"backtick" 要求尽可能地使用反勾号

对象选项：

•"avoidEscape": true 允许字符串使用单引号或双引号，只要字符串中包含了一个其它引号，否则需要转义•"allowTemplateLiterals": true 允许字符串使用反勾号

在具体的使用过程中，可以这样来用：

eslint 1.js --rule 'quotes:[2,single,{ "avoidEscape": true }]'

8 应用规则

在具体应用规则的过程中，我们可以有如下三种选择：

•通过命令行•在文件内使用特殊的注释•通过配置文件

8.1 命令行的方式

8.1.1 针对单个文件使用多条规则

假设你的文件是1.js，内容是如下：​​​​​​​

var a = 'abc';console.log(b)

对这个文件使用ESlint来检查，命令如下 ：

eslint 1.js --rule 'quotes:[2] semi:[2] no-unused-vars:[2]'

注意，我们应用了三条规则，错误级别都是2（不符合规则就报错），采用其默认参数。

•quotes:[2] 。必须使用双引号，否则报错。•semi:[2]。必须加上必要的双引号，否则报错。•no-unused-vars: [2]。定义的变量必须要使用，否则报错。

这三条规则的作用下，我们得到的检查结果如下：​​​​​​​

PS C:\Users\fanyoufu\Desktop\es> eslint 1.js --rule 'quotes:[2] semi:[2] no-unused-vars:[2]'
C:\Users\fanyoufu\Desktop\es\1.js  1:5   error  'a' is assigned a value but never used  no-unused-vars  1:9   error  Strings must use doublequote            quotes  2:15  error  Missing semicolon                       semi
✖ 3 problems (3 errors, 0 warnings)  2 errors and 0 warnings potentially fixable with the `--fix` option.

8.1.2 对整个目录使用规则

假设在es目录下有1.js,2.js两个文件，则可以通过如下命令对这两个文件进行校验。

eslint es --rule 'quotes:[2] semi:[2] no-unused-vars:[2]'

8.2 在文件内使用注释

在文件内部，通过添加一些特殊格式的注释，也可以来控制ESlint的行为。

8.2.1 临时禁止规则出现警告​​​​​​​

/* eslint-disable */var a = 'abc';/* eslint-enable */console.log(b)

第一行代码属于免检范围。

8.2.2 对指定的规则启用或禁用警告​​​​​​​

/* eslint-disable quotes */
var a = 'abc';
/* eslint-enable quotes */console.log(b)

第一行代码中的引号问题属于免检问题。

8.2.3 在整个文件范围内禁止规则

将 /* eslint-disable */ 块注释放在文件顶部：​​​​​​​

/* eslint-disable */var a = 'abc';console.log(b)

这个文件全部免检

8.2.4 某一特定的行上禁用所有规则：​​​​​​​

var a = 'abc';// eslint-disable-line
// eslint-disable-next-lineconsole.log(b)

ESlint在检查第一行代码时，所有问题都被忽略。而第二行代码中的所有问题也被忽略，因为它有一个eslint-disable-next-line。

8.2.5 在某一特定的行上禁用某个指定的规则：​​​​​​​

var a = 'abc'; // eslint-disable-line quotesconsole.log(b)

ESlint在检查第一行代码时，其中的引号问题将会忽略。

8.2.6 在某个特定的行上禁用多个规则：​​​​​​​

var a = 'abc'; // eslint-disable-line quotes,no-unused-varsconsole.log(b)

ESlint在检查第一行代码时，其中的引号问题和定义了变量却没有使用 这两个问题将会忽略。

8.3 通过配置文件

上述两种方式不太方便。在实际开发中， 我们希望有一个地方可以集中对规则进行管理。那我们就可以通过ESlint的配置文件来统一设置。具体操作是在你在项目根目录下创建一个名为.eslintrc.json的文件，并在这个文件中进行规则的设置。具体目录结构如下：​​​​​​​

|-es|--1.js|--2.js|--.eslintrc.json

注意这个文件名的前面有一个.。也是一个特殊的文件名，ESlint在运行时会自动去找这个文件。在.eslintrc.json这个文件中，录入如下内容：

​​​​​​​

{
   
       "rules":{
   
           "semi":[2],        "no-console": [2],        "no-unused-vars":"error",        "quotes":["error", "double"]    }}

以上我们配置了4条规则：（1）必须加; （2）不允许使用console， （3）不允许定义变量不使用， （4）对字符串必须使用双引号。

这四条规则都是错误级别。

好了，下面你可以通过：

eslint es

来检查你的代码啦。注意此时并没有在命令行中指定规则，但是ESlint会自动去找.eslintrc.json这个文件中的rules所定义的规则。

接下来，建议你花一点时间去官网上看看每一条规则表示的不同含义，并根据自己的实际情况添加到rules中。

9 小结

•ESlint是一个非常有用的工具，使用也非常简单。作为js初学者你现在就可以使用，而不必非要与某个具体的开发工具及开发框架结合起来。•关于它如何与vscode及vue-cli一起使用，我将在某个单独的文章中列出。

每天进步一点点，希望对你有帮助哈。