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. Myeclipse中is missing required source folder问题的解决

    最近在开发中,有好几次遇到is missing required source folder的问题,但是有些同事机器上却没有该问题,把整个工程删掉,重新从SVN上拿下来,问题依旧存在. 该问题出现后, ...

  2. ubuntu 16.4安装卸载apache+php+mysql

    1.安装apache sudo apt-get update sudo apt-get install apache2 2.安装php5.6 添加PPA源:add-apt-repository ppa ...

  3. Linux_Vi_命令

    Linux Vi 命令 ************************************************************************* 在vi中使用命令的方法是:冒 ...

  4. Winter-2-STL-C Where is the Marble? 解题报告及测试数据

    Time Limit:3000MS     Memory Limit:0KB Description Download as PDF Raju and Meena love to play with ...

  5. httpd sshd firewalld 很多服务后面的d是什么意思

    在操作系统中,一般系统的服务都是以后台进程的方式存在,而且都会常驻系统中,直到关机才结束.这类服务也称Daemon,在Linux系统中就包含许多的Daemon. 判断Daemon最简单的方法就是从名称 ...

  6. Ubuntu server 安装的mysql数据库忘记密码的解决方法

    客户端连接时报错MySQL数据库出现:Error 1045错误时,就表明输入的用户名或密码错误被拒绝访问了. 解决办法可以分为以下几步: 1.修改mysql配置文件,使得可以无密码登录mysql su ...

  7. mybatis v jpa

    mybatis的优势在于SQL的自由度上,SQL优化和返回对象的大小都是可控的.spring-data-JPA则在开发效率上有优势.

  8. cl.exe 命令行编译sqlite3 sqlite3.dll及sqlite3.exe

    有点被宇宙最强的ide惯坏了,封装的太好,不能像gcc那样一步步了解其原理,其实强大的vs背后也有类似gcc的cl.exe 看到How To Compile SQLite http://sqlite. ...

  9. Bag类的接口的实现与测试(课上测试补做)

    Bag类的接口的实现与测试(课上测试补做) 截图 由于截图有一定的的限制就没有吧所有的代码截进去,后面有代码. 代码 package ClassTest; import java.util.Objec ...

  10. ubuntu下 gedit中文乱码

    Gedit 3.x 版本设置 (适用于Ubuntu 11.10及以后) 命令方式 gsettings set org.gnome.gedit.preferences.encodings auto-de ...