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 相关文章推荐
Extjs 几个方法的讨论
Jan 28 Javascript
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
Sep 17 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
JS手机端touch事件计算滑动距离的方法示例
Oct 26 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
npm全局环境变量配置详解
Dec 15 Javascript
详解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
PHP 采集程序中常用的函数
2009/12/09 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
js 省地市级联选择
2010/02/07 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
javascript获取鼠标点击元素对象(示例代码)
2013/12/20 Javascript
jquery使用经验小结
2015/05/20 Javascript
jQuery实现图片轮播特效代码分享
2015/09/15 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
jQuery实现评论模块
2020/08/19 jQuery
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
python实现数独算法实例
2015/06/09 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
详解python的变量缓存机制
2021/01/24 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
《广玉兰》教学反思
2014/04/14 职场文书
白莲教口号
2014/06/18 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
2015年社区科普工作总结
2015/05/13 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL