写在前面

这两种方法的配置基本相同，都是匹配节点地址、Eslint执行文件的地址、Eslint的配置文件(即。eslintrc)等。而且在网上搜索很方便，所以我就不多说了。

之所以要比较两者的区别，是因为对于没有配置过的同学，看完“如何在webstorm下配置Eslint”这个问题下面的答案，有两种说法，然后这两种说法的配置项是相似的(在webstorm的一个设置页面中设置三四项，然后勾选启用复选框)，容易混淆。

除此之外，我自己使用的时候，也是自己摸索，比较差异，才选择适合自己的方式。这篇文章是专门留下来记录的。

方法1: webstorm自带Eslint

两种模式的配置都很简单，所以就简单说一下。

使用webstorm自带的eslint，只需打开设置，找到Eslint设置页面，填写几个项目，勾选enable复选框即可。

方法2:使用插件Eslint

这个方法分为两步。第一步：首先需要去插件插件库，找到eslint插件，点击安装。下图：

第二步：插件安装完成后，转到设置页面，搜索eslint。这时，你会发现除了模式1中的eslint设置页面外，设置对话框底部的菜单中还有一个设置页面。里面的设置项和第一种方法类似。

差异比较

区别1:用法。

独立使用模式是从左侧的项目目录列表中选择一个您希望eslint自动修复的文件夹或文件，然后右键单击它以显示“修复eslint问题”菜单。下图。

当然，你也可以在右侧的代码编辑区选择一个有eslint检测到的bug要自动修复的文件，右键点击，点击修复eslint问题菜单。下图。

这是第一个。webstorm有自己的eslint模式。

先说第二个，使用第三方插件eslint。

第二个配置好之后，在webstorm的代码菜单中会有一个名为Eslint Fix的子菜单。下面两个图，一个是之前的，一个是第二个配置之后的。您可以在代码菜单中找到额外的子菜单。

两种配置方案在使用方案上的差异看似相似，但实际上是不同的。第二种方法是，选择代码菜单下的eslint Fix子菜单，将自动修复整个webstorm当前加载的所有项目，以及不符合的文件。eslintrc由您在设置中设置。另一方面，Webstorm可以自由选择修复哪个目录。因此，以第一种方式定制修复哪些文件对我们来说是友好的。

当然，第二种配置方案的自动修复方法最大的问题是，一旦点击代码菜单下的eslint Fix子菜单，webstorm下的所有项目都会被自动修复，这会带来很多问题，因为很多时候你只是想为webstorm下的某个项目设置eslint功能。

区别2:是否检测到vue文件

第一种方法直接支持检测vue文件中不符合eslint规则且标有红色波浪线的代码区域，第二种方法不支持检测vue文件中不符合的代码区域。eslintrc规则，无需太多配置。

下图是第一种方法。空行打几个空格，显示红色波浪线，表示不符合规则。然后，右键单击该文件并选择修复eslint问题子菜单以删除红色波浪线。

最后的

目前还没有一个配置项只能在webstorm的单个项目上工作。这两种方法都适用于webstorm加载的所有项目。这个用起来有点不舒服，因为毕竟不是所有的项目都需要eslint。

如果有前端er知道的，可以说说。

我的GitHub

补充：威震自动修复eslint报告的错误

1.安装全局安装软件

Npm安装eslint -g全局安装eslint插件

NPM install eslint-plugin-html-gnpm install babel-eslint-g在需要eslint的项目中生成eslint文件

Eslint-init 2。在崇高编辑器上安装插件ESLint-Formatter

在菜单栏上，找到工具构建系统新建构建系统，新建一个eslint-fix.lime-build文件，内容如下：

{ ' shell _ cmd ' : ' eslint-fix $ file ' }或

{ ' cmd ' : ' d : dev nvm NPM eslint . cmd-fix $ file ' } 3。用快捷键ctrl B运行刚刚创建的生成文件。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。