最新公告
  • 欢迎您光临编程知识分享网 加入我们
  • 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)
    编程知识分享网,一个有趣的平台,小心有毒!

    发表评论

    提供最优质的资源集合

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