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 相关文章推荐
jQuery 注意事项 与原因分析
Apr 24 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
VUEX-action可以修改state吗
Nov 19 Javascript
js实现登录拖拽窗口
Feb 10 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
Nov 24 Javascript
javascript的var与let,const之间的区别详解
Feb 18 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
Dedecms常用函数解析
2008/02/01 PHP
PHP面向对象法则
2012/02/23 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
在JavaScript中调用Java类和接口的方法
2016/09/07 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
python+os根据文件名自动生成文本
2019/03/21 Python
python面试题之列表声明实例分析
2019/07/08 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
Python如何实现线程间通信
2020/07/30 Python
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
个人债务授权委托书范本
2014/10/05 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis