大家好,又见面了,我是你们的朋友全栈君。
一、安装
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任务,就不会有任何错误了。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/150488.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...