webstrom 配置eslint 自动修复错误

作者: 疯狂的冰块 | 来源:发表于2017-05-06 13:58 被阅读4434次

1、展示效果

如何给vue项目添加eslint呢，如何自动修复呢？

先展示一下效果：

GIF.gif

2、配置步骤

1、安装插件ESLint plugin

webstrom 其实有个非常好用的插件，ESLint plugin(如果在先安装不来可以手动下载，下载地址https://plugins.jetbrains.com/plugin/7494-eslint)

image.png

2、配置插件

安装完毕后在这里几个地方配置一下：

要注意两点

第二个框是你的项目地址/node_modules/.bin/eslint.cmd
第三个框是.eslintrc.js

image.png

如果是linux的话，其实和window类似，参考配置如下：

image.png

配置好后就可以使用了！

image.png

特别是这里面的eslint fix 可以自动修复非常好用！！！

3、参考

如果想了解eslint详细的配置可以参考我的另一篇博文：
http://www.jianshu.com/p/11ef5cf15d90

甚至你可以更方便的配置一个eslint 自动修复的快捷键，我使用的Alt+L

image.png

网友评论

wkylin:快捷键：Alt+ Enter

痛苦的信仰_2018:找遍全网唯一一篇真正解决了这个问题的文章无限顶up主再请问下Eslint fix这个快捷键我在哪里可以配置喃现在每次都只能通过菜单点选修复

ougi:你好，我按照你的设置，找不到othersetting这一栏。安装了插件后，在setting里搜索也只有language&framework》JavaScript》code quality tools》eslint里有找到，应该是之前默认带的。之后点击修复，出现一个浮窗，叫hihighliting level。没有修复。想请教下你有么有遇到这种情况

疯狂的冰块:新版本的webstorm,没有other setting这一项了。而是直接移到了顶级，与Appearance &Behavior ,Keymap, Plugin等同一级别。

“之后点击修复，出现一个浮窗，叫hihighliting level”，这个应该是点错的缘故，点击菜单栏--Code--Eslint Fix

believedream:说的不明白！不太懂能详细点吗，怎么执行eslint fix

疯狂的冰块:安装插件配置完成后，点击菜单栏-Code-Eslint Fix

疯狂的冰块:第一张动态图展示了如何执行eslint fix，可以仔细观察一下操作步骤，下面是配置方法

6ed30913770a:厉害了我的哥

wkylin:快捷键：Alt+ Enter
痛苦的信仰_2018:找遍全网唯一一篇真正解决了这个问题的文章无限顶up主再请问下Eslint fix这个快捷键我在哪里可以配置喃现在每次都只能通过菜单点选修复
ougi:你好，我按照你的设置，找不到othersetting这一栏。安装了插件后，在setting里搜索也只有language&framework》JavaScript》code quality tools》eslint里有找到，应该是之前默认带的。之后点击修复，出现一个浮窗，叫hihighliting level。没有修复。想请教下你有么有遇到这种情况
疯狂的冰块:新版本的webstorm,没有other setting这一项了。而是直接移到了顶级，与Appearance &Behavior ,Keymap, Plugin等同一级别。

“之后点击修复，出现一个浮窗，叫hihighliting level”，这个应该是点错的缘故，点击菜单栏--Code--Eslint Fix
believedream:说的不明白！不太懂能详细点吗，怎么执行eslint fix
疯狂的冰块:安装插件配置完成后，点击菜单栏-Code-Eslint Fix
疯狂的冰块:第一张动态图展示了如何执行eslint fix，可以仔细观察一下操作步骤，下面是配置方法
6ed30913770a:厉害了我的哥

webstrom 配置eslint 自动修复错误

1、展示效果

2、配置步骤

1、安装插件ESLint plugin

2、配置插件

3、参考

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端成长之路