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)
blank

相关推荐

  • python中的缩进规则_什么叫代码缩进

    python中的缩进规则_什么叫代码缩进引言python对缩进是敏感的,而大多教程对缩进规则,往往就几句话带过,对于没有其他语言基础的初学者,十分不友好,本文就把python常见的缩进问题做了一些整理。一、Python缩进长度及缩进字符常看到一些Python缩进错误的解读,“tab符和空格做为缩进不能混用”、“缩进一定是4个空格”。实际上并没有这些限制,例如图中的示例就可以正常运行。a=1ifa==1:print(a)else:print(1)k=1;whilek<5:

    2022年10月11日
  • Go Modules 详解

    Go Modules 详解

  • logback使用

    logback使用

  • goland激活码永久 3月最新注册码[通俗易懂]

    goland激活码永久 3月最新注册码,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • bool类型_bool类型什么为真

    bool类型_bool类型什么为真转自:http://www.vcgood.com/archives/3709我们知道在C++里有专门的bool类型,用来表示真或假。但是在C语言里没有这样的类型(至少我是一直这么认为的),表达式的值0

  • 矩阵范数与向量范数关系_矩阵范数的定义

    矩阵范数与向量范数关系_矩阵范数的定义范数是距离在向量和矩阵上的推广,在研究收敛性、判断矩阵非奇异等方面有广泛应用。本节包括以下内容:(1)向量范数;(2)矩阵范数;(3)从属范数;(4)谱半径;(5)矩阵的非奇异条件。1向量范数从向量到实数的映射/函数。定义(1)条件:非负性、齐次性、三角不等式(∥x+y∥≤∥x∥+∥y∥\|x+y\|\leq\|x\|+\|y\|)。

发表回复

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

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