vue-cli4项目开启eslint保存时自动格式问题


Posted in Javascript onJuly 13, 2020

最近新建一个vue-cli4的项目,初始化的时候没开启eslint,后面想开启的时候不好配置,这里就做个开启eslint和保存时自动修复格式的总结

vscode首先安装eslint插件

vue-cli4项目开启eslint保存时自动格式问题

配置vscode的自动保存eslint格式

Ctrl+shift+p

vue-cli4项目开启eslint保存时自动格式问题

把下面代码复制到里面

"editor.tabSize": 2,
 "eslint.alwaysShowStatus": true,
 "eslint.autoFixOnSave": true,
 "eslint.packageManager": "yarn",
 "eslint.validate": [
 "javascript", // 用eslint的规则检测js文件
 {
  "language": "js",
  "autoFix": true
 },
 {
  "language": "vue",
  "autoFix": true
 },
 ],
 "eslint.options": {
 "extensions": [
  ".js",
  ".vue"
 ]
},
 "editor.codeActionsOnSave": {
 "source.fixAll.eslint": true
 },
 "eslint.run": "onSave",
 "files.autoSaveDelay": 3000,
 "eslint.codeAction.disableRuleComment": {
 
 },
 "files.autoSave": "off",

项目中安装eslint

package.json文件中的devDependencies里面添加

"@vue/cli-plugin-eslint": "~4.4.0",
	"babel-eslint": "^10.1.0",
 "eslint": "^6.7.2",
 "eslint-plugin-vue": "^6.2.2",

vue.config.js文件里面lintOnSave改成"warning"

根目录添加eslint配置文件.eslintrc.js

vue-cli4项目开启eslint保存时自动格式问题

内容根据需要修改

module.exports = {
 "root": true,
 "env": {
  "node": true
 },
 "extends": [
  "plugin:vue/recommended",
  "eslint:recommended"
 ],
 "rules": {
 	 "indent": ["error", 2],
  "dot-location": [
   2,
   "property"
  ],
  "comma-spacing": [1],
  "space-before-blocks": [
   2,
   "always"
  ], // 强制在块之前使用一致的空格
  "space-unary-ops": [
   2,
   {
    "words": true,
    "nonwords": false
   }
  ], // 强制在一元操作符前后使用一致的空格
  "array-bracket-spacing": [
   2,
   "never"
  ], // 强制数组方括号中使用一致的空格
  "quotes": [
   0,
   "double"
  ], // 强制使用一致的反勾号、双引号或单引号
  "arrow-spacing": [
   2,
   {
    "before": true,
    "after": true
   }
  ],
  "vue/max-attributes-per-line":0,
  "no-var": 2, //禁用var,用let和const代替
  "no-mixed-spaces-and-tabs": 2, // 禁止空格和 tab 的混合缩进
  "no-trailing-spaces": 1, // 禁用行尾空格
  "no-unexpected-multiline": 2, // 禁止出现令人困惑的多行表达式
  "no-unused-vars": [
   2,
   {
    "vars": "all",
    "args": "none"
   }
  ], // 禁止出现未使用过的变量
  "vue/html-indent": [
   0,
   "tab"
  ],
  "vue/html-self-closing": [0],
  "vue/multiline-html-element-content-newline": [0],
  "vue/singleline-html-element-content-newline":[0],
  "vue/html-closing-bracket-newline":[0],
  "vue/no-v-html": [0]
 },
 "parserOptions": {
  "parser": "babel-eslint"
 }
}

到此这篇关于vue-cli4项目开启eslint保存时自动格式问题的文章就介绍到这了,更多相关vue-cli4项目开启eslint内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
整理AngularJS中的一些常用指令
Jun 16 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 Javascript
JS实现小米轮播图
Sep 21 Javascript
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 #Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 #Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 #Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 #Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 #Javascript
浅析JavaScript 函数防抖和节流
Jul 13 #Javascript
详解JavaScript 异步编程
Jul 13 #Javascript
You might like
晶体管来复再生式二管收音机
2021/03/02 无线电
PHP生成带有雪花背景的验证码
2008/09/28 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
javascript截取字符串小结
2015/04/28 Javascript
浅析JavaScript动画
2015/06/10 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
python颜色随机生成器的实例代码
2020/01/10 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
大学生学习自我评价
2014/01/13 职场文书
增员口号大全
2014/06/18 职场文书
优秀团员事迹材料
2014/12/25 职场文书
投标承诺函格式
2015/01/21 职场文书
综治目标管理责任书
2015/05/11 职场文书
道歉情书大全
2015/05/12 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
Python Pycharm虚拟下百度飞浆PaddleX安装报错问题及处理方法(亲测100%有效)
2021/05/24 Python