ESLint 学习笔记eslint的初衷是让开发者拥有自己的验证规则。对于弱类型的 javascript来说，许多错误

简介

eslint的初衷是让开发者拥有自己的验证规则。对于弱类型的 javascript来说，许多错误是无法在编写代码时发现的。除了语法错误，我们很多时候还会建立一些约定，对接、扩展等等。但毕竟是人为约定，很可能会出现错误，使用程序帮我们去验证会更加的严谨，也不容易出错。

eslint 可以帮助我们建立自己的规则，当我们编写代码时，自动验证规则，让我们及时发现错误。使用eslint 虽然刚开始会比较痛苦, 它约束着我们，但在很大程度上保证着我们的代码质量。

概览

安装 eslint
解析 eslint 配置文件
配置注释
集成 gulp
集成 webpack
集成 react
校验 typescript

准备

安装eslint: yarn add eslint --dev ,
将eslint 安装到项目的开发依赖下，然后就是初始化了：yarn eslint --init, 初始化时，
控制台会提示让我们选择很多选项，Which style guide do you want to follow 这里我选择了 standard 这个选项可以不用强制在代码后加上;
初始化完成后会在根目录下生成.eslintrc.js 文件，这个文件包含 eslint的配置文件。我们可以通过配置这个文件，自定义自己的验证规则。

使用

验证文件

对指定文件进行规则验证, 先创建一个 index.js ，编写如下然后运行 eslint命令 yarn eslint ./src/index.js 如下信息，我们的代码规则验证发现有错误。

使用 --fix 去自动校正代码，解决绝大多数错误。运行yarn eslint ./src/index.js --fix ,其实在eslint 当中，很多提示错误都是一些关于编码规范的错误，比如没有换行、代码间隔的太远....

开启关闭校验规则

配置文件`常用属性`解析

初始化后，在项目的根目录下会生成一个默认的 eslint 配置文件.eslintrc.js, 在初始化的时候我们选择配置文件格式为javascript 文件，方便扩展。

在配置文件中，我们可以修改代码校验规则，

// 生成的默认配置文件 .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 12
  },
  rules: {
  }
}

属性解析

env

env 这个属性代表我们项目运行的环境，javascript在不同的运行环境下会有不同的api提供使用，这些api在全局中都可以访问。比如在浏览器环境下，可以访问到window、document ，在 node 环境下可以访问到许多内置的模块。

env属性值是一个对象，可配置多个环境，同时存在多个环境。配置环境后在代码中使用环境下的api 在eslint 校验时可正常运行。

当我们尝试将 env 中的浏览器环境设置为 false时，按道理讲应该不可以在代码中使用 document 、 window 属性

 {
   env: {
     browser: false, //关闭浏览器环境， 不能访问 document 、window 对象
   }
 }

但... 还是可以访问 document ，没有提示不可用这时因为我们的extends 属性中添加了standard, standard配置是一个常见的共享配置 eslint 配置，当我们配置它时，就会继承里面所有的配置选项，虽然我们将 browser 环境禁用了，当在 standard 中将 document 、window 进行了全局配置。

parserOptions

控制语法是否使用某个es版本内的语法，当我们设置为 6 时，就会开启es6 语法，这时就可以使用箭头函数 let const 等es6 的语法，相应的设置为 5 时，代码中使用这些 let const 语法就会报错。

 {
  parserOptions: {
    ecmaVersion:12, //es 版本
  }
 }

设置为 es5 时使用 let const 等语法

{
  parserOptions: {
    ecmaVersion:5, //es 版本
  }
 }

运行命令yarn eslint ./src/index.js 首先这里先提示我们 sourceType 不能配置为 module,因为 module是 es6当中的特性。我们先去 standard配置中修改 sourceType 属性为 script 然后再运行就可以看到报错中提示我们不能使用 const 关键字

rules

配置验证规则，我们可以根据自己的需求，设置不同级别的规则提示，有三个级别off、warn、error ，表示关闭规则、警告级别的提示、错误级别的提示。全部的规则查看

比如no-alart 就是一个验证规则，主要有三种值

 {
   rules: {
     'no-alart' : 'off', //off：  关闭验证规则， error: 错误级别的提示， warning: 警告提示
     
   } 
 }

去除一些不必要的提示

配置注释

以注释的方式修改当前代码的验证规则、环境、全局变量等

通过注释 eslint-disable-line 的方式让 eslint 忽略这一行代码，不进行验证

如下，使用alert 会触发no-alert规则，提示报错信息

   alert('test')

添加 eslint-disable-line 注释后 eslint 将会忽略这一行

   alert('test');// eslint-disable-line

但有时候我们只想忽略某个规则的校验，而不是全部忽略 ?

可以在eslint-disable-line后面指定忽略的规则

eslint 结合自动化工具

在项目开发过程当中，代码会经常的修改，修改过后要手动执行 eslint 的验证，这显得比较繁琐。我们更希望能够结合自动化构建工具，在进行构建任务时，自动的去验证eslint。

结合 gulp

准备工作

安装插件: yarn add gulp-eslint eslint --dev
初始化 eslint： yarn eslint --init
在gulpfile.js 中添加 eslint 插件的使用

我们主要是用于校验js代码，所以在处理js任务的script中使用。gulp是以管道的方式来一层层处理数据的，我们可以先进行eslint的验证，验证时发现错误会进行提示，然后终止任务。

  const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.eslint()) // 进行验证
    .pipe(plugins.eslint.format()) // 格式化
    .pipe(plugins.eslint.failAfterError()) //  提示错误 并终止任务
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}

运行

将 script 任务导出，然后运行yarn gulp script

这里可能会出现的问题：

QA1.版本冲突的问题，提示 es2021 unknown，

解决：yarn add eslint-config-standard@14.1.1 eslint-plugin-standard --dev，然后将本项目中的env: {es2021: true} 去除

QA1. Parsing error: Invalid ecmaVersion 就是我们的 es版本解析错误，可能是太高的原因,

解决：将 .eslintrc.js 中的 parserOptions.ecmaVersion 设置为 11 或小于 11 都可以。

结合webpack

主要通过 webpack的 loader 机制，使用 eslint-loader来实现，在其他的 loader 处理 js 之前，先使用 eslint-loader 对js文件进行校验，这里需要注意loader的先后顺序，loader是从后往前执行的~

有两种方式来实现，第一种 就是在 rules 中处理 js 规则中将里面的use 字段修改为数组， eslint-loader 放到数组的末尾确保优先执行。

第二种是另起一个 js 的 rule, 添加enfore 为 pre ，这个属性确保当前的 loader 优先于其他loader 执行。

安装插件： yarn add eslint-loader eslint --dev

第一种方式

我们在 babel-loader 之前先进行 eslint-loader

{
        test: /\.js$/, 
        exclude: /node_modules/, 
        use: ['babel-loader','eslint-loader']
      },

第二种方式

在下面的 rule 中添加 enforce:'pre' 确保eslint-loader 被优先执行。

{
        test: /\.js$/, 
        exclude: /node_modules/, 
        use: 'eslint-loader'
        enfore:"pre"
      },

应用于react 项目

需要先安装 eslint-plugin-react, 然后在.eslintrc.js 中添加 plugins 与 rules的配置

在没有配置之前可以看到 React is defined but never used , 在React 中我们页面必须要引入 React 这是必须的，我们可以在 rules 中配置'react/jsx-uses-react':2 解决

'App' is defined but never used 这个错误可以在rules 中配置'react/jsx-uses-vars': 2 解决

在现代化项目中集成 eslint

这里我们使用 vue-cli 工具创建一个包含 eslint 校验的项目

安装 vue-cli 后,使用 vue create eslint-app 创建项目，运行命令后会提示我们选择，选择第三个自定义选项

选择 eslint 之后，会提示我们eslint 的运行时机，

Lint on save ，文件发生变化时进行校验，也就是 webpack 监视到文件发生变化后就会先调用 eslint-loader 进行校验，方便我们在开始时实时查看 eslint 校验结果。
Lint and fix on commit , 不仅会在文件变化时校验，在 git 提交之前也就先进行校验，确保提交后的代码都是符合规范的。