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 相关文章推荐
js 颜色选择器(兼容firefox)
Mar 05 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
jquery.ui.draggable中文文档(原文翻译)
Nov 15 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
微信小程序实现购物车小功能
Dec 30 Javascript
vue路由实现登录拦截
Mar 24 Vue.js
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图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
jQuery中detach()方法用法实例
2014/12/25 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
基于zepto.js实现登录界面
2017/10/09 Javascript
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
python实现批量改文件名称的方法
2015/05/25 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
Python打包可执行文件的方法详解
2016/09/19 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
python join方法使用详解
2019/07/30 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
高校生生产实习自我鉴定
2013/09/21 职场文书
中专毕业生自我鉴定范文
2013/11/09 职场文书
学习党课思想汇报
2013/12/29 职场文书
学校运动会开幕演讲稿
2014/01/04 职场文书
毕业横幅标语
2014/10/08 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
六年级学生评语大全
2014/12/26 职场文书
英文自荐信范文
2015/03/25 职场文书
红楼梦读书笔记
2015/06/25 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python