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 相关文章推荐
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
js制作简易年历完整实例
Jan 28 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
Node.js连接Sql Server 2008及数据层封装详解
Aug 27 Javascript
js隐式转换的知识实例讲解
Sep 28 Javascript
原生javascript自定义input[type=radio]效果示例
Aug 27 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 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
Php获取金书网的书名的实现代码
2010/06/11 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
PHP常用的小程序代码段
2015/11/14 PHP
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
全面了解JavaScript的作用域链
2019/04/03 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
python将文本转换成图片输出的方法
2015/04/28 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
Python 多核并行计算的示例代码
2017/11/07 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
python开根号实例讲解
2020/08/30 Python
悦木之源美国官网:Origins美国
2016/08/01 全球购物
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
集团公司人力资源部岗位职责
2014/01/03 职场文书
个人委托书范本
2014/04/02 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
nginx location优先级的深入讲解
2021/03/31 Servers