1、展示效果

如何给vue项目添加eslint呢,如何自动修复呢?

先展示一下效果:

2、配置步骤

1、安装插件ESLint plugin

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

2、配置插件

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

要注意两点

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

配置好后就可以使用了!

第二种方式:全局修复

项目使用的是Vue.js框架,自动校验代码只需要在项目工程下的package.json文件中寻找scripts关键字,

scripts下面有lint关键字

在lint中加入--fix如

然后再打开cmd,在cd到工程目录下,运行:npm run lint

便可自动修改格式,但是也有一些是没法修改的,例如"=="在要求使用"===",还有各种拼写错误啥的这些手动修改一下就好了。

webstrom 配置eslint 自动修复错误的更多相关文章

  1. 配置 ESLint 自动格式化自闭合标签(Self closing tag)

    对于没有子元素或不需要子元素的 HTML 标签,通常写成其自闭合的形式会显得简洁些, - <SomeComponent></SomeComponent> + <SomeC ...

  2. vscode webstrom 配置 eslint 使用 airbnb 规范

    1.安装eslint npm eslint-plugin-react eslint-plugin-import babel-eslint -g 2.全局配置文件,放到c:/user/***/ { &q ...

  3. webstrom配置一键修复ESLint的报错

    因为项目本身有用eslint,而我这边没用,我这边提交上去别人update后就会提示很多eslint的格式错误提示,所以就在该项目里使用了eslint. 发现一般有两种安装方式,我使用的是webstr ...

  4. Webpack 2 视频教程 010 - 配置 ESLint 实现代码规范自动测试 (下)

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  5. Webpack 2 视频教程 009 - 配置 ESLint 实现代码规范自动测试 (上)

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  6. webstorm配置eslint【标记错误,修复错误】

    项目中经常用到eslint语法,结合个人经验,用webstorm配置eslint "文件"->"默认设置"->"语言&框架&quo ...

  7. VSCode配置eslint

    在Vue.js项目中,使用的是eslint检查. 而在我写完代码后,cnpm run dev运行命令...然后悲剧了,一大堆报错!╮(╯▽╰)╭ 安装插件:Vetur:这是vscode上一个vue.j ...

  8. vscode 使用ESLint 自动检查,保存时自动格式化

    1:全局安装eslint `npm install -g eslint`2: 打开vscode 点击 “文件”----->“首选项”---->“设置”,在右侧“用户设置/settings. ...

  9. webpack中配置eslint

    首先安装eslint npm install eslint --save-dev 安装好这个工具后,初始化eslint npx eslint --init 这个时候会自动生成.eslintrc.js ...

随机推荐

  1. 什么是Http无状态?Session、Cookie、Token三者之间的区别

    一.什么是HTTP无状态? 1.1定义: HTTP无状态协议,是指协议对于交互性场景没有记忆能力. 1.2举个例子: 在点击一个纯的html网页,请求获取服务器的html文件资源时,每次http请求都 ...

  2. intellij-idea+maven搭建scala环境

    一 . 安装JDK 1. 下载地址: http://download.oracle.com/otn-pub/java/jdk/8u181-b13/96a7b8442fe848ef90c96a2fad6 ...

  3. JAVA学习笔记之JAVA 对象引用以及赋值

      关于对象与引用之间的一些基本概念. 初学Java时,在很长一段时间里,总觉得基本概念很模糊.后来才知道,在许多Java书中,把对象和对象的引用混为一谈.可是,如果我分不清对象与对象引用, 那实在没 ...

  4. U盘中了磁碟机病毒怎么办

    问题: U盘在中毒了的电脑上使用后,里面的文件夹均消失了,这是因为里面的文件夹属性被改为隐藏属性.通过查看显示隐藏文件夹发现,所有隐藏了的文件夹的隐藏属性被锁定,无法通过鼠标右键查看文件夹属性的方法改 ...

  5. TCP/UDP 端口

    端口说明 小于1024的端口通常运行一些网络服务 大于1024的端口用来与远程机器建立连接 TCP端口 = 回显 = 丢弃 = 在线用户 = 时间服务 = 网络状态 = 每日引用 = 消息发送 = 字 ...

  6. Linux kernel 编译问题记录【转】

    本文转载自:http://sunyongfeng.com/201701/programmer/linux/kernel_compile_fail.html 编译内核出现以下错误 Can't use ' ...

  7. Nginx配置X-Forwarded-Proto

    需求 最近公司在做全站https,架构上面有Nginx+tomcat Nginx+php,且nginx配置了ssl,tomcat和php项目使用https协议 但是,发送的是https url请求,p ...

  8. rhel7配置samba_4.7.1,共享给所有人以及共享给指定用户

    1.共享给所有人 服务端配置: yum  -y install samba samba-client samba-common       #安装客户端 mkdir /guest #创建共享文件夹 c ...

  9. Oracle邮件推送函数

    CREATE OR REPLACE PROCEDURE PROCSENDEMAIL ( P_TXT VARCHAR2, P_SUB VARCHAR2, P_SENDOR VARCHAR2, P_REC ...

  10. 爬虫之动态HTML处理(Selenium与PhantomJS )

    Selenium Selenium是一个Web的自动化测试工具,最初是为网站自动化测试而开发的,类型像我们玩游戏用的按键精灵,可以按指定的命令自动操作,不同是Selenium 可以直接运行在浏览器上, ...