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开发包大全整理
Dec 22 Javascript
JavaScript中的Location地址对象
Jan 16 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 Javascript
JS前端笔试题分析
Dec 19 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
基于zepto.js实现登录界面
Oct 09 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 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 flv视频时间获取函数
2010/06/29 PHP
php实现word转html的方法
2016/01/22 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
2018/05/08 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
决策树的python实现方法
2014/11/18 Python
Python网站验证码识别
2016/01/25 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
python获取多线程及子线程的返回值
2017/11/15 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
介绍下Java中==和equals的区别
2013/09/01 面试题
幼儿园毕业教师感言
2014/02/21 职场文书
创卫工作总结2015
2015/04/22 职场文书
MySQL 视图(View)原理解析
2021/05/19 MySQL