前言

ESLint是一款代码开发工具,能够协调和统一团队的编码风格.刚开始接触ESLint的开发者,使用时会感觉处处受挫.ESLint的本质就是提供规范,制定条条框框去限制开发者的编码.比如ESLint里定义的这样的规则,代码缩进只能用2个空格,如果你用4个空格就会报错.

作为开发者而言,不能随心所欲的写代码固然会很不舒服,但一旦过了适应期,以后书写出来的代码将会变的更加的美观和便于阅读.

多人协作的团队里,共同完成一个大型的项目,ESLint是必不可少的开发工具.本文接下来将从三个方向去解读ESLint.

从ESLint的基础配置中理解各个属性的含义
如何借助vscode编辑器自动识别并修复ESLint错误,提升开发效率
ESLint其他应用场景

基础配置

搭建一个最简单的ESLint项目

1.新建一个文件夹进入目录内执行npm init -y创建一个新项目.

2.执行npm i eslint -D安装ESLint依赖.

3.在项目根目录下创建.eslintignore文件,设置需要被ESLint忽略的文件,文件中填入下面代码.以下标注目录下的文件,ESLint不会对其做语法检查.

build
dist
src/assets
public
node_modules

4.在项目根目录下创建.eslintrc.js文件,此文件就是ESLint的核心配置文件,所有的代码约束规则都可以在该文件中编写.

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    es6: true
  },
  parser:"Espree",
  parserOptions:{
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
  },
  globals:{
    "data1":"writable",
    "data2":"readonly"  
  },
  extends: [
    'eslint:recommended'
  ],
  rules: {
    "indent": ["error", 2], //代码缩进2个空格
    'quotes': ['error', 'single'], // 字符串强制使用单引号
    'eqeqeq': ['error', 'always', { null: 'ignore' }], //比较时强制使用 === 或者 !==,但对null作比较时可以不用全等
  }
}

上述几个配置属性是最常用的配置项,下面一一解读.

root

ESLint 默认会一直往上寻找配置文件直到根目录,一旦在某一级发现配置文件配置了root参数并且为true,ESLint就会停止再往上一级寻找,它的作用域范围就会确定.

env

 env: {
    node: true,
    browser: true,
    es6: true
  },

指定脚本允许运行的环境.比如上面配置es6为false,如果代码中出现let,const关键字,ESLint检测到就会报错.再例如设置browser为true,代表该脚本允许运行在浏览器环境下,代码中出现全局变量window就不会报错.如果设置browser为false,代码中出现全局变量window就会报错.

parser和parserOptions

  parser:"Espree",
  parserOptions:{
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
  }

ESLint是一个做语法校验的程序,如果把代码交给它校验,前提是它能正确识别代码.例如不做任何配置写一段jsx的代码交给ESLint校验是肯定会报错的,因为这些代码它发现没办法运行属于非法代码.

parser指定一个代码解析器的引擎,让它去检测代码是不是正规合法的.默认的选项是Espree,如果你想换一个解析器比如babel-eslint,那需要先使用npm i babel-eslint -D安装,再填入上述配置文件parser:"babel-eslint".

parserOptions通常是配合parser一起使用,它用来指定具体如何解析代码的策略.分别有以下几个属性:

ecmaVersion:指定允许书写的js代码的版本,比如ecmaVersion设置为5.如果你的代码中出现大量es6的语法,解析器就会报错不识别.
sourceType: 它的选项有两个,分别是"module" 和 “script”,如果你这里不设置成module,那么代码中就不能出现类似于export default 或者 module.exports 模块导出导出的语法.
ecmaFeatures: 它下面设定 jsx 选项为 true 时,代码中就可以书写jsx代码了.在这里需要指出,支持jsx不代表支持react,如何让react代码也能顺利通过 ESLint 的校验,后续会讲.另外它下面还可以添加一个属性 impliedStrict:true 是否在全局开启严格模式.

extends

 extends: [
    'eslint:recommended'
 ]

继承别人写好的配置规则.比如'eslint:recommended'就是官方推荐的默认规则,在这个规则里,如果定义了变量不使用就会报错,详细的配置细节可去ESLint官网查询.

除了官方推荐的规则,我们还可以使用别人发布到npm上的规则,比如使用airbnb公司发布的规则.

npm install -D eslint-config-airbnb-base eslint-plugin-import 安装依赖包
在.eslintrc.js的extends字段的数组加上一项

 extends: [
      'eslint:recommended',
      'airbnb-base'
 ],

以上配置方式都在eslint-config-airbnb-base的githup主页有详细说明.如果想使用其他的配置规则,也可以在githup上面去搜索.

rules

rules是我们自定义的规则,它的优先级是最高的.比如上述我们在extends里面继承了第三方的规则,但是对某些规则不满意,就可以在rules重新定义覆盖原规则

 rules: {
    "indent": ["error", 2], //代码缩进2个空格
    'quotes': ['error', 'single'], // 字符串强制使用单引号
    'eqeqeq': ['error', 'always', { null: 'ignore' }], //比较时强制使用 === 或者 !==,但对null作比较时可以不用全等
  }

rules对象下的属性名代表哪些规则.数组的第一个值对应违背该规则的处理方式,可填的值如下:

off或者0: 不验证规则(如果想直接关闭 ESLint 对某条规则的校验,可以填写off)
warn或者1: 验证规则但只发出警告
error或者2: 验证规则发现不符合报错

上面rules里面定义一个规则 "indent": ["error", 2].indent规定代码缩进的空格数.数组的第一个值填error表示如果违反直接报错.数组的其他值(可能有多个值)是传递参数.比如上面的indent只允许代码缩进两个空格,否则ESLint就会报错.

ESLint的规则有成千上万个,碰到不认识的可去官网查询,但常用的如下:

indent： 代码缩进
no-mixed-spaces-and-tabs： 代码缩进不能混用空格和tab。
no-mixed-spaces-and-tabs： 代码缩进不能混用空格和tab。
camelcase： 变量和函数名必须遵循驼峰命名法。
quotes： 字符串使用什么类型的引号
curly： 在 if，else if，else或 while 的代码块中，即使只有一行代码，也要用写在{} 中。
eqeqeq： 比较用 === 或 !==。
no-cond-assign： 不允许在 if 中使用赋值操作。
no-undef： 变量和函数在使用前必须先声明。全局变量或函数除外。
no-unused-vars：变量定义后一定要使用。
no-alert： 禁止使用 alert,confirm 和 prompt。
max-params： 函数允许最多有几个参数。默认是3个。
max-statements： 函数允许最多有几条语句。
max-depth：代码块中默认嵌套深度

plugins

plugins里面配置的是插件,插件都是需要通过npm来安装的.插件的作用就是对规则进行补充,例如 'eslint:recommended' 里面就没有包含与 react 相关的规则,接下来就配置一下让 ESLint 兼容react的语法.

npm install eslint-plugin-react --save-dev安装依赖
在extends中加入 "plugin:react/recommended"

"extends": [
    "eslint:recommended",
    "plugin:react/recommended"
]

在plugin字段加入"react"

"plugins": [
    "react"
 ]

开启规则

 "rules": {
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
  }

如此一来ESLint就能正确识别react代码并且依据eslint-plugin-react提供的规则去校验语法错误了.以上的配置方法都在 eslint-plugin-react 的githup主页上写的十分详细.

再举个例子,配置ESLint对ts语法的支持

npm i -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin安装依赖
为什么要安装 @typescript-eslint/parser ,因为ESLint默认是使用 Espree 进行语法解析,它是无法识别 ts 的某些语法,故我们需要安装 typescript-eslint-parser,替代掉默认的解析器,同时还要安装 typescript.
配置文件加上下面的配置

{
  "parser": "@typescript-eslint/parser",
  "extends": ["eslint:recommended","plugin:@typescript-eslint/recommended"],
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/rule-name": "error"
  }
}

以上配置方法都在@typescript-eslint/eslint-plugin插件的主页上有详细的描述.

如果想配置vue,可以直接搜索 eslint-plugin-vue ,官网也有相应的配置方法.

globals

globals用来定义全局变量的,使用下述方法配置后,各个文件内就可以不用定义data1和data2直接使用了.如果不配置直接使用,ESLint检测到变量没有定义就会报错.

globals:{
    "data1":"writable",
    "data2":"readonly"  
}

writable设置该变量可以赋值,而readonly设置该变量只能读取不能修改.

至此为止配置的内容就讲完了.

利用注释忽略ESLint检查

如果想对单个 js 文件禁用 ESLint 语法校验,但整个项目依然保留校验规则,可以文件的头部加上一行注释.ESLint碰到此条注释就会跳过后面的注释.

/* eslint-disable */

如果想在某块代码处避开某条检验规则,可以在代码上方加一行注释.no-console指的是禁止使用console.log语句.想避开某条检验就把no-console换成对应的规则名.

/* eslint-disable no-console */
 function test(){
   console.log(123);
 }

执行ESLint检测

上述配置的内容讲了那么多,最终还是要执行ESLint,让它去检测我们写的代码到底符不符合上面配置的那些规则.

例如在当前项目下创建src/main.js文件,在里面写一段js代码.

打开项目根目录,启动命令行工具执行npx eslint ./src/**/*.js.ESLint就会去src根目录下找到所有以js结尾的文件,随后依据上面配置的规则一一检测代码的语法.

vscode协助

上面使用命令行的工具检测ESLint错误实在是效率太低,我们可以借助vscode编辑器通过一些配置在写代码的时候实时爆出ESLint错误,并且按下 ctrl+s 保存代码时还能自动修复错误,这样就大大提升了开发效率.

vscode本身只是一个编辑器,默认是不能做ESLint语法检测的.通过给它增加插件扩展,vscode就有能力读取项目中的 .eslintrc.js 的配置,并且按照配置的规则来对书写的代码进行语法校验.具体配置步骤如下.

vscode中搜索ESLint安装插件
找到setting.json文件.键盘输入快捷键 ctrl +shift + p (适用于windows用户),输入open settings.
添加画红框的代码

笔者当前安装的ESLint版本v2.1.13,配置方法只需要加上述一段画红框的代码即可.红框代码是直接在ESLint插件文档上copy过来的,往上第三个图右下角部分可以看到.

如果发现配置不生效很可能是ESLint版本不一致,需要在vscode打开ESLint插件的文档,里面会包含详细的配置说明.

完成上述配置后,键盘按下ctrl+s,安装的vscode的ESLint扩展插件会自动格式化代码以符合 .eslintrc.js文件下定义的规则,不用自己再去一一的修复代码格式.

但这里需要额外指出,vscode它只能帮我们自动修复格式类的错误,比如多写了几个空格,缩进,单双引号之类的.如果是逻辑性的错误,比如定义了变量却没使用vscode按保存是修复不了的,需要手动修改.

其他场景

webpack中如何集成ESLint

npm i eslint eslint-loader -D 安装依赖
在 webpack.config.js加入下面配置

module: {
  rules: [
    {
        test: /\.js$/,
        exclude: /node_modules/, 
        loader: 'eslint-loader',
        options: {
          fix: true // 自动修复某些eslint问题
        }
    }
  ]
}

在项目根目录下创建 .eslintrc.js 和 .eslintignore配置文件,并填写好自己的配置

如果webpack集成了babel,eslint-loader的配置写在 babel-loader之后,它的执行顺序是从下往上的.

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        }, 
        {
          loader: 'eslint-loader',
          options: {
            fix: true,
          },
        },
      ],
    },
  ],
},

git集成ESLint

git自身有一种钩子机制,我们可以通过下述配置在git提交之前触发ESLint语法检查.

npm install eslint -D安装依赖
在项目根目录下创建 .eslintrc.js 和 .eslintignore配置文件,并填写好自己的配置
npm install pre-commit -D
安装完毕后在.git/hooks里面会多出一个pre-commit的文件.它里面会存储git提交之前将会执行的命令行代码.
注册命令行代码.在package.json文件里加下面代码.

{
   "scripts": {
         "eslint": "npx eslint ./src/**/*.js ./src/**/*.ts ./src/**/*.vue"
  	},
   "pre-commit": [
       "eslint"
   ]
}

上述配置后,git提交之前会执行npm run eslint命令,随后ESLint会检测src下面的所有js、ts和vue文件的语法.如果发现错误会阻止提交.

ESLint全方位解析

前言