ESLint结合gulp使用

ESLint结合gulp使用ESLint结合gulp使用一、安装二、使用步骤1.引入库2.读入数据总结一、安装示例:pandas是基于NumPy的一种工具,该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下(示例):importnumpyasnpimportpandasaspdimportmatplotlib.pyplotaspltimportseabornassnsimportwarningswarnings.filterwarnings(‘ignore’)im

大家好,又见面了,我是你们的朋友全栈君。

ESLint结合gulp使用

一、安装

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账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号