网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/7 浏览:3 次 )

最近新建一个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组件间数据传递的方式(3种)
下一篇:详解Vue+elementUI build打包部署后字体图标丢失问题
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。