webstorm中配置Eslint的两种方式及差异比较

这两种方式的配置基本相同,都是配一下node地址,Eslint执行文件的地址,Eslint的配置文件(就是.eslintrc)等,而且网上很方便就可以搜索到,就不多说了。

之所以要比较一下两者的差异,就是因为对于没有配置过的同学来说,看了诸如“怎么在webstorm下配置Eslint”的问题下面的回答,既有说用方式1,又有说方式2的,然后这两种方式配置项还差不多(都是在webstorm的一个setting页面里面设置三四个项目,然后勾上enable复选框),就容易混淆。

再加上笔者自身在使用的时候,也是在一番摸索,比较差异之后,才选定了适合自己的那一种方式。特留下此文,以示记录。

方式一:webstorm自带Eslint
两种方式配置都很简单,就都简单说了。
用webstorm自带Eslint这种方式的话,只需要打开setting,找到eslint设置页面,填完几个项目,勾选enable复选框就行了。

方式二:使用插件Eslint
这种方式呢,分两步,第一步:需要先到plugin插件库,找到eslint插件,点击install。如下图:

第二步:插件安装完成后,去setting页面,搜索eslint,这时你会发现,除了方式一那个eslint设置页面外,还多了一个设置页面,在setting对话框最下面的菜单。里面的设置项和方式一差不多。

差异比较
差异1:使用方式。
自带的使用方式是在左侧项目目录列表上,选中某个你想eslint自动修复的文件夹或文件,右键,会出现fix eslint problems菜单。如下图。

当然你也可以在右侧,代码编辑区域,选中某个要自动修复eslint监测出来有bug的文件,右键,点击fix eslint problems菜单。如下图。

这是第一种,webstorm自带eslint方式的使用。
下面说第二种,用了第三方插件eslint的使用。
第二种配置好以后,会在webstorm的code菜单多一个子菜单,叫做:Eslint Fix。下面两张图,一个是用第二种方式配置前,一个是用第二种方式配置后。可以发现code菜单多出来的子菜单。

 

这两种配置方案在使用方案上的差别,看起来相似,实则不同,第二种方式在code菜单下选eslint Fix 子菜单会把你整个webstorm当前加载的所有项目,检测出来不符合你在setting里面设置的那个.eslintrc的文件都自动修复了。而webstorm自带的,则可以自由选择想修复哪个目录。因此,第一种方式在修复哪些文件这件事上的定制化对我们比较友好。
当然了,第二种配置方案的自动修复方式的最大问题在于,一旦你点了code菜单下eslint Fix 子菜单,所有webstorm下项目自动修复,会带来很多问题,因为很多时候你只是想给webstorm下的某个项目设置eslint功能。

差异2:对vue文件是否检测上
方式一直接支持检测出vue文件中的不合eslint规则的代码区域,并且用红色波浪线标识,而第二种方式在不多加配置的情况下,不支持检测出vue文件的代码不合.eslintrc规则的代码区域。

下图是第一种方式,在一个空行,打了几个空格,就显示了红色波浪线,说不符合规则,然后右击文件,选择fix eslint problems子菜单,就能把红色波浪线去除。

最后
目前没找到可以只对webstorm单个项目起作用的配置项。这两种方式,都会对webstorm加载出来的所有项目适用。这用起来就有点不爽了,因为毕竟不是所有项目都需要eslint的。

 

 

在项目中我们为了代码书写更规范,在项目中安装ESlint帮助我们检查语法,那么下面介绍下在webstorm中如何配置ESlint规范

 

步骤如下:

1.快捷键:ctrl+alt+s打开设置,找到Code Style,将Indents Detection和EditorConfig下的去掉勾选,具体看下图

 

 

2.在Code Style子文件下找到你想修改的文件类型,将缩进全部改为2

 

 

3.标签识别,找到HTML,点击进入找到Do not indent children of:,然后点击右边的文件夹,在打开的小窗口中点击“+”,将“script”添加进去。

 

 

4.检查是否选择的是es6,新版的webstorm默认选择的是es6语法

 

 

5.webstorm2019的eslint默认没有禁用,检查只要没勾选Disable Eslint就行

 

6.上面所有设置完之后点击”ok”,在你的项目下找到“.eslintrc.js”文件,右键—–>Apply ESlint Code Style Rules。

 

7.最后一步,我们发现export default上面是灰色的提醒,鼠标移上去后发现提示unused export default,这是因为没有具体的使用这个导出,是JavaScript的一个语法提示。快速的方法是:点击右下角的小人头,将进度条拖到none,点击“ configure inspections”找到“unused global symbol”去掉勾选,然后就可以看到灰色的提醒消失了。在格式化代码的时候用快捷键ctrl+alt+L就可以自动整理成符合ESlint风格的代码了。

 

 

 

 

扩展 :

设置webstorm主题

1.选择主题,webstorm默认主题是白色的,如果觉得白色太亮,可根据你的喜好在这里设置成暗一点的颜色

 

2、设置字体大小,webstorm默认字体是12号,如果你觉得字体太小可在Font里进行设置

 

 

 

 

上面这些便是我查找资料后总结的完整版,写下来作为笔记备忘
————————————————
版权声明:本文为CSDN博主「siyi_blog」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/siyi_blog/article/details/89489832

赞赏

微信赞赏支付宝赞赏

编程知识分享网,一个有趣的平台!
编程知识分享网|编程教程|资源下载|源码下载 » webstorm中配置Eslint的两种方式及差异比较

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
找不到素材资源介绍文章里的示例图片?
对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
关于编程知识分享网(www.ittce.com)
编程知识分享网,一个有趣的平台,小心有毒!

发表评论

  • 23会员总数(位)
  • 180资源总数(个)
  • 0本周发布(个)
  • 0 今日发布(个)
  • 1308稳定运行(天)

提供最优质的资源集合

立即查看 了解详情
升级SVIP尊享更多特权立即升级