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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 Javascript
禁止你的左键复制实用技巧
Jan 04 Javascript
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
AngularJS中table表格基本操作示例
Oct 10 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 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
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
Firefox中autocomplete="off" 设置不起作用Bug的解决方法
2011/03/25 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
vue init失败简单解决方法(终极版)
2017/12/22 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
python实现文法左递归的消除方法
2020/05/22 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
python中的django是做什么的
2020/07/31 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
若干个Java基础面试题
2015/05/19 面试题
护士个人简历自荐信
2013/10/18 职场文书
大专应届生个人的自我评价
2013/11/21 职场文书
文明教师事迹材料
2014/01/16 职场文书
运动会广播稿80字
2014/01/23 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
工商管理专业自荐信
2014/06/03 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js
DE1107机评
2022/04/05 无线电