关于ESLint的学习使用

一、安装使用ESLint

初始化package.json

yarn init --yes

安装ESLint

yarn add eslint --dev

我们先写一些有问题的代码

// 01-error.js
const foo = 123
function fn () {
  console.log('hello')

  		console.log('world')
}

fn(
syy()

安装ESLint后会给我们提供一个eslint的cli程序，我们可以通过yarn或者npx直接调用，后面需要指定检测的文件地址，也可以使用通配符的形式批量检测。

yarn eslint ./01-error.js // yarn eslint ./**.js

报出错误信息，提示我们执行eslint --init创建eslint的配置文件

yarn eslint --init

创建eslint配置文件需要回答一些问题，以下我省略了部分简单的问题。

How would you like to use ESLint? ...
  To check syntax only	//只检测语法性错误
> To check syntax and find problems // 检测语法错误并发现问题代码
  To check syntax, find problems, and enforce code style // 检测语法错误、发现问题代码、校验代码风格

What type of modules does your project use? ... // 使用哪种modules
> JavaScript modules (import/export)	// ES Module
  CommonJS (require/exports)	
  None of these	// 测试代码中没用到modules，选这个

Which framework does your project use? ...  // 使用哪种框架   
> React
  Vue.js
  None of these

How would you like to define a style for your project? ... // 使用什么代码风格
> Use a popular style guide  // 使用市面上的主流风格，一般情况下选这个
  Answer questions about your style	// 通过询问一些问题形成一个风格
  Inspect your JavaScript file(s)	// 根据你的js代码推断出你的风格

Which style guide do you want to follow? ... // 选择的主流风格后给出了三个主流风格提供选择
> Airbnb: https://github.com/airbnb/javascript // Airbnb公司的代码风格
  Standard: https://github.com/standard/standard // 开源社区中的一套规范，这套规范可以不用在语句末尾使用分号，选择这个
  Google: https://github.com/google/eslint-config-google // 谷歌的代码风格
  
What format do you want your config file to be in? ... // 你的配置文件想要以何种形式存放，这里我选javaScript
> JavaScript
  YAML
  JSON

Would you like to install them now with npm? » No / Yes // 因为刚才我们选择的Standard风格需要用到一些npm插件，这里询问是否安装，选择yes

之后项目根目录下就会多出一个.eslintrc.js文件，也就是eslint的配置文件。

重新执行yarn eslint .\01-error.js

指出了我们有一处问题代码，但并不能直接指出问题出在哪里，将问题代码中的括号补上，再次执行eslint。

发现了四个错误，并提示有两个错误可以通过加上–fix参数解决，执行yarn eslint ./01-error.js --fix

代码风格的问题自动帮我们解决了，只剩一个从未使用的变量问题和一个未定义的函数，将它们删除后，代码中就没问题了。

以上就是对eslint的简单使用。

二、ESLint配置文件解析

前面我们通过eslint --init创建了eslint的配置文件，正常情况下，我们是不会手动去修改这个文件，但是如果我们需要开启或者关闭某些校验规则的时候，这个配置文件就会非常重要。

配置文件内容如下：

// 这里是以CommonJS的形式导出了一个对象
module.exports = {
// JavaScript在不同的运行环境下是有不同的api可以调用，这些api很多时候都是以全局成员的方式去提供出来
// 例如浏览器环境中我们可以直接去使用window和document对象，而在nodeJS环境中，却不存在这些对象
// 这个env属性的作用就是标记当前代码最终的运行环境，ESLint会根据环境信息来判断某一个全局成员是否是可用的
// 从而避免代码中使用到不存在的成员
  env: {
  // 一旦开启了某环境，那么这个环境中的所有全局成员，都允许被使用
    browser: true, 
    es2021: true
  },
  extends: [
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 12
  },
  rules: {
  }
}

关于env配置

我们尝试修改env中的browser为false，然后写一段使用了document对象的代码，例如document.getELementById("#abc")，按理来说就会提示相应的错误信息。

执行eslint后，提示error Strings must use singlequote quotes，并没有报出document未定义的错误。

这是因为我们在生成ESLint配置的时候，我们选择的是standard风格，最终我们的配置也就继承了standard风格中的配置，而在standard风格中额外做了一些配置，所以这个时候document、window在任何环境都是可以使用的。

我们可以找到standard的配置，路径为：node_modules/eslint-config-standard/eslintrc.json

在其中通过globals选项，将三个对象设置为了全局只读成员，而我们当前项目的配置又继承了这里，所以修改browser：false就没办法影响到document成员的使用。

那我们就可以换一个browser环境下的全局成员去使用，例如alert。

// 02-config.js
alert("111")

执行yarn eslint ./02-config.js

提示错误信息error 'alert' is not defined no-undef 'alert’未定义，这就证明env属性的作用就是根据环境来判断全局成员是否可用。

env可以设置的环境大概有以下这些，需要注意的是，这些环境并不是互斥的，也就是说我们可以同时开启多个不同的环境。

关于extends属性

extends属性就是用来继承一些配置，例如我们这里使用的standard，这也是社区中非常常用的共享配置，很多时候如果我们需要在多个项目中共享一个ESLint配置，我们可以去定义一个公共的配置文件，然后在这里继承就可以了。

这个属性值是一个数组，也就是说我们可以继承多个共享配置。

关于parserOptions配置

这个属性的作用是用来设置我们语法解析器的相关配置。

我们都知道ESMA近几年发布了很多新的语法，例如let、const这些关键字，这个配置的主要作用就是控制是否允许某一个ES版本的语法。

我们尝试修改其为如下：

parserOptions: {
   ecmaVersion: 5
}

这样我们应该就没有办法去使用ES6中的新特性了。

// 02-config.js
// 通过const定义一个变量
const foo = 123

执行yarn eslint ./02-config.js，报出错误信息如下：

error  Parsing error: sourceType 'module' is not supported when ecmaVersion < 2015. Consider adding `{ ecmaVersion: 2015 }` to the parser options

这说的是在ECMAScript版本低于2015的情况下，sourceType不能是“module”，因为ES Module是ES2015的新特性。

出现这个错误的原因同样是因为在standard的配置中将sourceType设置为了“module”，我们将standard配置中的sourceType的值改为“script”。

然后再次运行eslint，提示Parsing error: The keyword 'const' is reserved

这就是parserOptions属性的作用，注意，parserOptions影响的只是语法的检测，不代表某个成员是否可用，如果是ES2015提供的全局成员例如Promise还是需要env中的ES6进行控制。

我们将eslint配置进行如下修改：

env: {
  es6: false
},
parserOptions: {
   ecmaVersion: 2015
}

此时es6的全局成员应该就无法使用了，而对es6新特性的语法检测是不会有问题的。

关于rules配置

rules配置就是配置eslint中每个校验规则开启或关闭，示例：

rules:{
	// 属性名都是内置的规则名称，属性值有三种，分别是off、warn、error
	// off代表关闭规则，warn表示发出警告，error表示报出错误
	"no-alert": "error" 
}

使用eslint执行此代码alert("111")，此时就会报出错误。

在eslint官网上给出了所有的内置的可用的校验规则列表，可以在需要使用的时候进行查看，而我们目前使用的standard风格当中已经开启了很多规则，基本也满足了所有需求，所以如果有需求的情况下，可以根据自己的需求来进行配置。

关于globals配置

这个配置就是用来额外声明我们可以在代码中使用的全局成员，上面我们看到standard风格中的配置就是通过globals声明了三个全局成员。

例如我们有一段代码jQuery("#abc")，然后运行eslint。会提示'jQuery' is not defined

配置globals

globals:{
    "jQuery":"readonly"
  }

再次执行eslint，就不会有报错了。

三、ESLint配置注释

配置注释就是将配置通过注释的方式直接写在js文件中，然后再去执行代码的校验。

http://eslint.cn/docs/user-guide/configuring#configuring-rules

例如我们有一段代码需要写成这样：const str = '${name} is a boy'，而standard风格是不允许这样使用字面量占用符的，执行eslint，报出错误Unexpected template string expression no-template-curly-in-string

我们就可以使用eslint提供的// eslint-disable-line禁用这一行代码中所有的规则

const str = '${name} is a boy' // eslint-disable-line

再次执行eslint，运行正常，没有报错。但是使用“eslint-disable-line”虽然可以使eslint忽略这一行代码的检测，但是如果这一行代码有多个问题存在，所有的问题代码都不会被检测了。

所以更好的办法是指定忽略这一行的特定规则

const str = '${name} is a boy' // eslint-disable-line no-template-curly-in-string

这样就只会忽略这一行代码中的no-template-curly-in-string规则，对其他的规则正常检测。

有需要的读者可以点击这里查询更多配置注释信息。