webstorm中配置Eslint的两种方式及差异比较详解


Posted in Javascript onOctober 19, 2018

写在前面

这两种方式的配置基本相同,都是配一下node地址,Eslint执行文件的地址,Eslint的配置文件(就是.eslintrc)等,而且网上很方便就可以搜索到,就不多说了。

之所以要比较一下两者的差异,就是因为对于没有配置过的同学来说,看了诸如“怎么在webstorm下配置Eslint”的问题下面的回答,既有说用方式1,又有说方式2的,然后这两种方式配置项还差不多(都是在webstorm的一个setting页面里面设置三四个项目,然后勾上enable复选框),就容易混淆。

再加上笔者自身在使用的时候,也是在一番摸索,比较差异之后,才选定了适合自己的那一种方式。特留下此文,以示记录。

方式一:webstorm自带Eslint

两种方式配置都很简单,就都简单说了。

用webstorm自带Eslint这种方式的话,只需要打开setting,找到eslint设置页面,填完几个项目,勾选enable复选框就行了。

webstorm中配置Eslint的两种方式及差异比较详解

方式二:使用插件Eslint

这种方式呢,分两步,第一步:需要先到plugin插件库,找到eslint插件,点击install。如下图:

webstorm中配置Eslint的两种方式及差异比较详解

第二步:插件安装完成后,去setting页面,搜索eslint,这时你会发现,除了方式一那个eslint设置页面外,还多了一个设置页面,在setting对话框最下面的菜单。里面的设置项和方式一差不多。

差异比较

差异1:使用方式。

自带的使用方式是在左侧项目目录列表上,选中某个你想eslint自动修复的文件夹或文件,右键,会出现fix eslint problems菜单。如下图。

webstorm中配置Eslint的两种方式及差异比较详解

当然你也可以在右侧,代码编辑区域,选中某个要自动修复eslint监测出来有bug的文件,右键,点击fix eslint problems菜单。如下图。

webstorm中配置Eslint的两种方式及差异比较详解

这是第一种,webstorm自带eslint方式的使用。

下面说第二种,用了第三方插件eslint的使用。

第二种配置好以后,会在webstorm的code菜单多一个子菜单,叫做:Eslint Fix。下面两张图,一个是用第二种方式配置前,一个是用第二种方式配置后。可以发现code菜单多出来的子菜单。

webstorm中配置Eslint的两种方式及差异比较详解

webstorm中配置Eslint的两种方式及差异比较详解

这两种配置方案在使用方案上的差别,看起来相似,实则不同,第二种方式在code菜单下选eslint Fix 子菜单会把你整个webstorm当前加载的所有项目,检测出来不符合你在setting里面设置的那个.eslintrc的文件都自动修复了。而webstorm自带的,则可以自由选择想修复哪个目录。因此,第一种方式在修复哪些文件这件事上的定制化对我们比较友好。

当然了,第二种配置方案的自动修复方式的最大问题在于,一旦你点了code菜单下eslint Fix 子菜单,所有webstorm下项目自动修复,会带来很多问题,因为很多时候你只是想给webstorm下的某个项目设置eslint功能。

差异2:对vue文件是否检测上

方式一直接支持检测出vue文件中的不合eslint规则的代码区域,并且用红色波浪线标识,而第二种方式在不多加配置的情况下,不支持检测出vue文件的代码不合.eslintrc规则的代码区域。

下图是第一种方式,在一个空行,打了几个空格,就显示了红色波浪线,说不符合规则,然后右击文件,选择fix eslint problems子菜单,就能把红色波浪线去除。

webstorm中配置Eslint的两种方式及差异比较详解

最后

目前没找到可以只对webstorm单个项目起作用的配置项。这两种方式,都会对webstorm加载出来的所有项目适用。这用起来就有点不爽了,因为毕竟不是所有项目都需要eslint的。

如果有知道的前端er可以交流一下。

我的GitHub

补充:sublime自动修复eslint报错

 1.安装全局安装eslint

npm install eslint -g

全局安装eslint插件

npm install eslint-plugin-html -g
npm install babel-eslint -g

在需要用到eslint的项目生成eslint文件

eslint --init

2、在sublime编辑器上安装插件ESLint-Formatter

菜单栏找到 Tools > Build System > New Build System,新建一个 eslint-fix.sublime-build 文件,然后里面内容如下:

{
  "shell_cmd": "eslint --fix $file" 
}

或者

{
  "cmd": "D:\\dev\\nvm\\npm\\eslint.cmd --fix $file" 
}

3、用快捷键 ctrl+b 运行刚刚创建的 build 文件

webstorm中配置Eslint的两种方式及差异比较详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript使用eval或者new Function进行语法检查
Oct 16 Javascript
javascript模块化简单解析
Apr 07 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
php中and 和 &&出坑指南
Jul 13 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
微信小程序实现工作时间段选择
Feb 15 Javascript
jQuery实现高级检索功能
May 28 jQuery
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 Javascript
clipboard在vue中的使用的方法示例
Oct 19 #Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 #Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 #Javascript
js中自定义react数据验证组件实例详解
Oct 19 #Javascript
值得收藏的八个常用的js正则表达式
Oct 19 #Javascript
深入理解移动前端开发之viewport
Oct 19 #Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 #Javascript
You might like
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
IE下JS读取xml文件示例代码
2013/08/05 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
AngularJS之自定义服务详解(factory、service、provider)
2017/04/14 Javascript
深入理解vue Render函数
2017/07/19 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
基于jquery实现多选下拉列表
2017/08/02 jQuery
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
Less 安装及基本用法
2018/05/05 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
python zip文件 压缩
2008/12/24 Python
python写日志封装类实例
2015/06/28 Python
python实现web方式logview的方法
2015/08/10 Python
让python在hadoop上跑起来
2016/01/27 Python
Django框架模板的使用方法示例
2019/05/25 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
python实现简单猜单词游戏
2020/12/24 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
餐饮加盟计划书
2014/01/10 职场文书
班级体育活动总结
2014/07/05 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS