大家好，又见面了，我是你们的朋友全栈君。
一、安装
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 }))
}
再次执行script任务。提示错误Parsing error: Invalid ecmaVersion
这是因为我们前面修改了env中的es版本到es2020，而ecmaVersion还是12，将其修改为对应版本也就是11。
修改好后再次执行script，成功检测到代码问题并报出错误信息。
前面四个规则可能是因为版本问题找不到具体规则信息，我这里是到node_modules/eslint-config-standard/eslintrc.json文件中将这四个规则删除了。
再次执行任务。
主要的错误就是$和a的错误，另外的是代码风格的问题，例如空格之类的。可以通过fix自动处理代码风格问题，但这里不能使用 –fix的方法，需要将fix作为配置属性添加到plugins.eslint中
plugins.eslint({
fix: true
})
再次执行script任务
终于得到了我们想要的结果了，提示”$”未定义，”a”从未使用。
只需要将从未使用的a变量删除即可。
‘$’就是因为没有设置全局成员，解决办法就是在eslint配置中添加：
globals:{
"$":"readonly"
}
再去执行script任务，就不会有任何错误了。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/150488.html原文链接：https://javaforall.net
