一、安装

yarn add eslint gulp-eslint --dev

创建配置文件

yarn eslint --init

配置文件内容

module.exports = { 
   
  env: { 
   
    browser: true,
    es2021: true
  },
  extends: [
    'standard'
  ],
  parserOptions: { 
   
    ecmaVersion: 12
  },
  rules: { 
   
  }
}

二、使用

在gulp中，我们需要将eslint添加到编译js的构建任务当中，例如我这里的script任务

const script = () => { 
   
  return src('src/assets/scripts/*.js', { 
    base: 'src' })
    .pipe(plugins.eslint())
    .pipe(plugins.babel({ 
    presets: ['@babel/preset-env'] }))
    .pipe(dest('temp'))
    .pipe(bs.reload({ 
    stream: true }))
}

这个任务使用了babel转换源代码，我们需要做的就是将eslint集成进去，因为gulp是一种管道机制，所以集成eslint就应该在babel之前，因为这里使用了自动加载gulp插件的gulp-load-plugins，所以直接通过plugins.eslint()使用gulp-eslint。

// gulp-load-plugins使用方式
const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins()

在打包入口文件中写一些问题代码，例：

const a = 1

执行script任务，yarn gulp script

在这里插入图片描述
提示es2021的错误，可能是版本问题导致，这里找到node_modules/eslint-config-standard/eslintrc.json和根目录下的.eslintrc.js，将其中env配置中的es2021都改成2020。

再次执行yarn gulp script

在这里插入图片描述
提示array-callback-return规则的值不能是这种格式，手动将值修改为error，接下来会有几个同类型的报错，都这样修改。

再次执行script任务。

在这里插入图片描述
任务运行正常，并没有检测出我们写的问题代码。这是因为，默认情况下，eslint只会去检测代码中的问题，而并不会根据检查结果做出任何反馈，所以正确的做法应该实在eslint处理完毕之后，我们去使用eslint的format方法在控制台中打印错误信息。之后再使用eslint的failAfterError方法，让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 }))
}