webstorm中配置Eslint的两种方式及差异比较详解
作者:云荒杯倾 发布时间:2024-04-17 10:38:22
写在前面
这两种方式的配置基本相同,都是配一下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 文件
来源:https://blog.csdn.net/u014390748/article/details/79477652
猜你喜欢
- 本文实例演示了Python生成pdf文件的方法,是比较实用的功能,主要包含2个文件。具体实现方法如下:pdf.py文件如下:#!/usr/b
- 成品效果 <body> <div id="game" style="p
- 【前言】 之前由于小编的错误操作误删了注册表中的一项关于sql的内容,具体删了什么,也忘
- 一、 迪杰斯特拉算法思想Dijkstra算法主要针对的是有向图的单元最短路径问题,且不能出现权值为负的情况!Dijkstra算法类似于贪心算
- 用 ASP (using jscript) 在服务端创建 GUID 的代码如下:function GUID(){ ret
- 1.Django实现WebSocket在线聊天室1.1 安装pip install channels==2.3(saas) F:\Deskt
- 在Centos中安装完MySQL数据库以后,不知道密码,这可怎么办,下面给大家说一下怎么重置密码1、修改配置文件my.cnf 按i编辑[ro
- 内联优化是一种常见的编译器优化策略,通俗来讲,就是把函数在它被调用的地方展开,这样可以减少函数调用所带来的开销(栈的创建、参数的拷贝等)。当
- 很神奇的一个晚上,居然在以前老同事的群里跟同事讨论起CSS的东西来了,不过很意外的还是有收获。在IE中常常会碰到如果将容器定位后,出现容器内
- 问题描述:使用指令 python -m pip install --upgrade pip 升级pip时,Pycharm报错:Attribu
- 1.使用Management Studio Express,用“Windows身份验证”登录,选中SQL服务器名,右击鼠标选择属性,在服务器
- 适合各种浏览器的js拖动层,ie,firefox等,调用方便!<!DOCTYPE HTML PUBLIC "-//W3C//
- SocketServer创建一个网络服务框架。它定义了类来处理TCP,UDP, UNIX streams 和UNIX datagrams上的
- 一、常用按键按键说明Keys.BACK_SPACE回退键(BackSpace)Keys.TAB制表键(Tab)Keys.ENTER回车键(E
- 前言:NoxfileNox 默认在一个名为noxfile.py的文件中查找配置。在运行 nox 时,你可以使用 --noxfile参数指定其
- 删除一,你可以先把类型为varchar的字段该名,再加以个字段为要该为date的字段名相同,二,1,测试表create table TEST
- 如何一行输入多个数,并存入列表在python里,如果你仅使用input()的话是输入一行的内容并将该行的内容以字符串的形式存到变量中,但如果
- 使用MySQLdb连接数据库执行sql语句时,有以下几种传递参数的方法。1.不传递参数conn = MySQLdb.connect(user
- 学习目标1.掌握pytorch模型转换到onnx模型2.顺利运行onnx模型3.比对onnx模型和pytorch模型的输出结果学习大纲pyt
- 多进程&多线程服务端:多进程和多线程的开启方式相同。缺点:<1> 由于Cpython的GIL,导致同一时间无法运行多个线