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延迟加载
Mar 09 Javascript
jQuery toggle()设置CSS样式
Nov 05 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
JS实现省市县三级下拉联动
Apr 10 Javascript
微信小程序自定义联系人弹窗
May 26 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
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
python二叉树的实现实例
2013/11/21 Python
Python3实现连接SQLite数据库的方法
2014/08/23 Python
浅析Python中的多条件排序实现
2016/06/07 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
ddl,dml和dcl的含义
2016/05/08 面试题
英语自我评价范文
2014/01/24 职场文书
网页美工求职信
2014/02/15 职场文书
机关节能减排实施方案
2014/03/17 职场文书
学雷锋月活动总结
2014/04/25 职场文书
大学活动总结范文
2014/04/29 职场文书
婚庆公司计划书
2014/09/15 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
董事长助理岗位职责
2015/02/11 职场文书
高一军训感想
2015/08/07 职场文书
社区服务活动感想
2015/08/11 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL