vue-cli4项目开启eslint保存时自动格式问题
编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要介绍了vue-cli4项目开启eslint保存时自动格式的问题小结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
最近新建一个vue-cli4的项目,初始化的时候没开启eslint,后面想开启的时候不好配置,这里就做个开启eslint和保存时自动修复格式的总结
vscode首先安装eslint插件
配置vscode的自动保存eslint格式
Ctrl+shift+p
把狼蚁网站SEO优化代码复制到里面
"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
内容根据需要修改
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内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO!
编程语言
- ThinkPad 笔记本如何调节LCD屏幕亮度
- Dreamweaver制作网页打开特效教程
- Win10 Mobile 10586升级后无限重启怎么办 硬重启帮您
- Win8系统提示音频设备有问题有一个或多个音频服
- Xbox One版Win10首个预览版9月份发布
- 如何在textarea文本输入区内实现换行
- Win10 Build 9901系统更新 预览版新版本下载
- McAfee Framework存在远程格式串处理漏洞
- Win10家庭版今日(7月30)正式在中国官方商城开卖
- Win10 Mobile预览版更新完10536.1000后才收到10536.100
- Win10 RS2更新了什么-Win10 RS2最终版本号1704首曝
- Windows7如何查看回收站对应的文件夹有哪些方法
- Win10让Charms栏回归桌面的方法教程
- 取消Windows XP系统开机启动画面的小技巧
- win8系统怎么下载安装USB百兆网卡?
- XP系统下磁盘空间变少了怎么办?XP系统磁盘空间