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. 错误:程序“XXX”不包含适合于入口点的静态“Main”方法

    解决办法: 1.右键类库属性 2.将输出类型改为“类库”

  2. 001-navicat for oracle 12 破解安装

    1.首先软件包和破解文件都需要到我给的百度云盘地址下载,去官网下载的中文版破解不了,至于官网的英文版,我就不清楚了. (1)链接地址. https://pan.baidu.com/s/1jxj4uzg ...

  3. Drools 规则引擎环境搭建

    一.关于 drools 规则引擎 前面写过一篇 Drools 规则引擎相关的文章,这篇文章主要记录一下规则引擎的环境搭建和简单示例.不熟悉 drools 的朋友可以看看这篇文章: 自己写个 Drool ...

  4. 5-es6的模块化开发与其它的不同

    1.加载机制不同es是静态加载,其它是动态加载.Es6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量.CommonJS 和 AMD.CMD 模块,都只能在运行 ...

  5. 使用.NET Core和Vue搭建WebSocket聊天室

    博客地址是:https://qinyuanpei.github.io.  WebSocket是HTML5标准中的一部分,从Socket这个字眼我们就可以知道,这是一种网络通信协议.WebSocket是 ...

  6. iis原理介绍

    它是一个程序,负责对网站的内容进行管理,以及对客户的请求(就是Http请求)做出反应.当用户对一个页面提出请求时,IIS做如下反应(忽略权限):1.把对方请求的虚拟路径转换成物理路径2.根据物理路径搜 ...

  7. CSS Table(表格)

    CSS Table(表格) 一.表格边框 border 指定CSS表格边框,使用border属性. 下面的例子指定了一个表格的Th和TD元素的黑色边框: table, th, td { border: ...

  8. wix toolset将 cab 打包进msi

    在***wxs中添加配置 <MediaTemplate EmbedCab="yes" /> 下面是一个简单配置:(包含写注册表) <?xml version=&q ...

  9. linux 安装vscode

    滚动安装vscode 需要先添加源,然后install 以centos为例: sudo rpm --import https://packages.microsoft.com/keys/microso ...

  10. linux go with vscode

    1 install go apt install golang 将会同时安装下列软件:  golang-1.9 golang-1.9-doc golang-1.9-go golang-1.9-src ...