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. oracle 11g怎样配置才能连接远程数据库

      打开所有程序->找到oracle-oradb11g-home1->Net Configuration Assistant,如图所示    选择本地网络服务名配置,点击下一步   选择添 ...

  2. Cisco 路由交换 常用查询语句

    基本信息查询语句 #查看全配置信息 #show running-configure #查看vlan信息 #show vlan brief #查看物理直连信息 #show cdp neighbors d ...

  3. 20145312 《Java程序设计》第三周学习总结

    20145312 <Java程序设计>第三周学习总结 学习笔记 Chapter 4 4.1类与对象 4.1.1 定义类 1.以服饰设计为例,类定义用class关键词,建立衣服实例要用new ...

  4. java语言基本环境搭建

    从放假开始,就开始路陆陆续续了解关于java语言的学习.首先从语言编辑环境就和以前学习的c语言会有些不同,对java语言的学习也有了很大很多新的认识. 首先从官网上下载jdk,按照娄老师给我们的操作提 ...

  5. ubuntu18.04 64bit如何安装docker

    注:参考自https://docs.docker.com/install/linux/docker-ce/ubuntu/ 1.卸载旧版本docker(如果之前安装了) sudo apt-get rem ...

  6. DOS/BAT批处理if exist else 语句的几种用法

    在DOS批处理命令中常常会通过if语句来进行判断来执行下面的命令, 那么批处理if语句怎么用呢,下面学无忧小编就来说说有关批处理if以及if exist else语句的相关内容.一.批处理if书写格式 ...

  7. python-打印进度条

    progress_bar.py #!/usr/bin/python3.6 #__*__uft8__*__ import sys import time def progress(percent,wid ...

  8. 使用Nginx搭建图片服务器（windows）

    知识点:在windows系统中,搭建图片上传服务器 参考博客:http://blog.csdn.net/u010942834/article/details/72953441 1.进入官网下载ngin ...

  9. MongoTemplate WriteResult acknowledged=false 的问题

    今天使用 MongoTemplate 的 update 操作时,发现 WriteResult 的 acknowledged 一直为 false ,个人首先想到可能时java驱动版本不对,在更换好对应版 ...

  10. filezilla无法启动传输及严重文件传输错误

    filezilla无法启动传输 严重文件传输错误 文件夹权限不够,修改之. 你的空间或服务器已经满了,请空下回收站或者扩容. 文件正在被占用,关闭后传输 ​