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 相关文章推荐
JavaScript多线程的实现方法
May 08 Javascript
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
JavaScript数组排序小程序实现解析
Jan 13 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 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 工厂模式使用方法
2010/05/18 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
bootstrap中的 form表单属性role="form"的作用详解
2017/01/20 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
python mysqldb连接数据库
2009/03/16 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
幼师专业毕业生自荐信
2013/09/29 职场文书
财务人员个人求职信范文
2013/12/04 职场文书
护士自我评价范文
2014/01/25 职场文书
圣诞节红领巾广播稿
2014/02/03 职场文书
幼儿园教师岗位职责
2014/03/17 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
Django实现聊天机器人
2021/05/31 Python
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS