写在前面
这两种方式的配置基本相同, 都是配一下 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 的
如果有知道的前端 er 可以交流一下
我的 GitHub https://github.com/cunzaizhuyi
来源: https://juejin.im/entry/5a9ff879f265da239d48dabf