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的。

如果有知道的前端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 文件

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

赞 (0)

相关推荐

  • 详解Eslint 配置及规则说明

    详解Eslint 配置及规则说明

    本文介绍了详解Eslint 配置及规则说明,分享给大家,具体如下: 中文官方网站 安装 可以全局安装,也可以在项目下面安装. 如下是在项目中安装示例,只需要在 package.json 中添加如下配置,并进行安装: "eslint": "^4.11.0" 配置 配置方式有两种,但建议使用文件配置的形式,比较独立,便于维护. 使用文件配置的方式:在项目的根目录下,新建一个名为 .eslintrc 的文件,在此文件中添加一些检查规则. 文件配置方式 env:你的脚本将要

  • js代码规范之Eslint安装与配置详解

    什么是 ESLint ESLint(中文站点)是一个开源的 JavaScript 代码检查工具,使用 Node.js 编写,由 Nicholas C. Zakas 于 2013 年 6 月创建.ESLint 的初衷是为了让程序员可以创建自己的检测规则,使其可以在编码的过程中发现问题而不是在执行的过程中.ESLint 的所有规则都被设计成可插入的,为了方便使用,ESLint 内置了一些规则,在这基础上也可以增加自定义规则. 一.Eslint安装 1.全局安装 如果你想使 ESLint 适用于你所有

  • 详解vue-cli下ESlint 配置说明

    1,关闭eslint 这里只说vue-cli脚手架的关闭方法,其实很简单,就是把 build/webpack.base.conf.js 配置文件中的eslint rules注释掉即可. module: { rules: [ // { // test: /\.(js|vue)$/, // loader: 'eslint-loader', // enforce: 'pre', // include: [resolve('src'), resolve('test')], // options: { /

  • 详解create-react-app 自定义 eslint 配置

    使用eslint和editorconfig规范代码 为什么要用这些: 代码规范有利于团队协作 纯手工规范耗时耗力而且不能保证准确性 能配合编辑器自动提醒错误,提高开发效率 eslint 随着ECMAScript版本一直更新的Js lint工具,插件丰富,并且能够套用规范,规则非常丰富,能够满足大部分团队的需求. eslint 配合 git 为了最大程度控制每个人的规范,我们可以在git commit代码的时候,使用git hook调用eslint进行代码规范验证,不规范的代码无法提交到仓库. e

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

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

    写在前面 这两种方式的配置基本相同,都是配一下node地址,Eslint执行文件的地址,Eslint的配置文件(就是.eslintrc)等,而且网上很方便就可以搜索到,就不多说了. 之所以要比较一下两者的差异,就是因为对于没有配置过的同学来说,看了诸如"怎么在webstorm下配置Eslint"的问题下面的回答,既有说用方式1,又有说方式2的,然后这两种方式配置项还差不多(都是在webstorm的一个setting页面里面设置三四个项目,然后勾上enable复选框),就容易混淆. 再加

  • 对Python中创建进程的两种方式以及进程池详解

    在Python中创建进程有两种方式,第一种是: from multiprocessing import Process import time def test(): while True: print('---test---') time.sleep(1) if __name__ == '__main__': p=Process(target=test) p.start() while True: print('---main---') time.sleep(1) 上面这段代码是在window

  • Spring中AOP概念与两种动态代理模式原理详解

    Spring中AOP概念与两种动态代理模式原理详解

    目录 1.概念 1.AOP技术简介 2.AOP的优势 3.Spring AOP术语 4.AOP 开发明确的事项 2.AOP底层实现 1.AOP 的动态代理技术: 3.基于cglib的动态代理代码 总结 1.概念 1.AOP技术简介 AOP 为Aspect Oriented Programming 的缩写,意思为面向切面编程,是通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术. AOP 是 OOP 的延续,是软件开发中的一个热点,也是Spring框架中的一个重要内容,是函数式编程的一

  • java实现图的邻接表存储结构的两种方式及实例应用详解

    java实现图的邻接表存储结构的两种方式及实例应用详解

    前言 本篇来谈一谈图的邻接表实现的两种方式,首先我们明确一点"学会图的邻接表实现的关键点在于":你所建立的图的邻接表的对象是什么! 首先我们看一下<算法导论>中关于图的邻接表的定义: 图G=(V,E)的邻接表表示有一个包含 |V| 个列表的数组Adj所组成,其中每个列表对应于V中的一个顶点,对于每一个u∈V,邻接表Adj[u]包含所有满足条件(u,v)∈E的顶点v,亦即,Adj[u]包含图G中所有和顶点u相邻的顶点.(或者他也可能指向这些顶点的指针),每个邻接表中的顶点一般

  • ThinkPHP中Widget扩展的两种写法及调用方法详解

    本文实例讲述了ThinkPHP中Widget扩展的两种写法及调用方法.分享给大家供大家参考,具体如下: Widget扩展一般用于页面组件的扩展,在页面根据需要输出不同的内容,下面介绍一下ThinkPHP中Widget的两种写法及调用 写法一: ArticlWidget.class.php文件: class ArticleWidget extends Widget { /** * * @param array $data * @return type * 调用方法:{:W('ArticleList

  • Spring依赖注入的两种方式（根据实例详解）

    Spring依赖注入的两种方式（根据实例详解）

    1,Set注入    2,构造注入 Set方法注入: 原理:通过类的setter方法完成依赖关系的设置 name属性的取值依setter方法名而定,要求这个类里面这个对应的属性必须有setter方法. Set方法注入时spring中配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans&qu

  • mybatis中批量插入的两种方式(高效插入)

    MyBatis简介 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以使用简单的XML或注解用于配置和原始映射,将接口和Java的POJO(Plain Old Java Objects,普通的Java对象)映射成数据库中的记录. 一.mybiats foreach标签 foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合.foreach元素的属性主

  • linux服务中开启防火墙的两种方式

    存在以下两种方式: 一.service方式 查看防火墙状态: [root@centos6 ~]# service iptables status iptables:未运行防火墙. 开启防火墙: [root@centos6 ~]# service iptables start 关闭防火墙: [root@centos6 ~]# service iptables stop 二.iptables方式 先进入init.d目录,命令如下: [root@centos6 ~]# cd /etc/init.d/

  • 详解Spring Boot 中实现定时任务的两种方式

    详解Spring Boot 中实现定时任务的两种方式

    在 Spring + SpringMVC 环境中,一般来说,要实现定时任务,我们有两中方案,一种是使用 Spring 自带的定时任务处理器 @Scheduled 注解,另一种就是使用第三方框架 Quartz ,Spring Boot 源自 Spring+SpringMVC ,因此天然具备这两个 Spring 中的定时任务实现策略,当然也支持 Quartz,本文我们就来看下 Spring Boot 中两种定时任务的实现方式. @Scheduled 使用 @Scheduled 非常容易,直接创建一个

  • Hibernate中获取Session的两种方式代码示例

    Session:是应用程序与数据库之间的一个会话,是Hibernate运作的中心,持久层操作的基础.对象的生命周期/事务的管理/数据库的存取都与Session息息相关. Session对象是通过SessionFactory构建的,下面举个例子来介绍Hibernate两种获取session的方式. 日志,是编程中很常见的一个关注点.用户在对数据库进行操作的过程需要将这一系列操作记录,以便跟踪数据库的动态.那么一个用户在向数据库插入一条记录的时候,就要向日志文件中记录一条记录,用户的一系列操作都要在

随机推荐