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

悠悠 2022-12-07 01:25 171阅读 0赞

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

vscode首先安装eslint插件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]  
配置vscode的自动保存eslint格式

Ctrl+shift+p

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]  
把下面代码复制到里面

"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",

根目录添加eslint配置文件.eslintrc.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]  
内容根据需要修改

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"
     }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/ccfcfdc7031e499285ceac3923de74b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/ef65c6386972496180ea02577c44c046.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/c33cb1d0415345d88a4f17998868f2ab.png