vue vscode 比较好看的eslint风格检测，和保存自动格式化

1、cnpm i eslint eslint-plugin-vue
2、vscode中下载安装ESLint插件

2、在src同级目录下创建.eslintrc.js文件

3、复制以下代码

module.exports = {
  "root": true,
  "env": {
    "node": true,
    "browser": true
  },
  "extends": [
    "plugin:vue/vue3-essential",
    "eslint:recommended"
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "babel-eslint",
    "sourceType": "module"
  },
  "rules": {
    // "off" or 0 - turn the rule off
    // "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
    // "error" or 2 - turn the rule on as an error (exit code is 1 when triggered)
    "no-alert": 1, // 禁止alert
    "no-console": 0,// 禁止console
    "block-spacing": 1,// 禁止或强制在代码块中开括号前和闭括号后有空格
    "indent": [1, "tab", { "SwitchCase": 1, "VariableDeclarator": { "var": 2, "let": 2, "const": 3 } }],  // 代码缩进
    "comma-spacing": [1, { "before": false, "after": true }],
    "comma-dangle": [1, {
      "arrays": "never",
      "objects": "never",
      "imports": "never",
      "exports": "never",
      "functions": "never"
    }], // 要求或禁止使用拖尾逗号
    "comma-style": [1, "last"], // 逗号风格 
    // "no-use-before-define": "error", // 变量未声明，禁止使用
    "eol-last": [1, "always"],  // 逗号在结尾
    "implicit-arrow-linebreak": [1, "beside"],  // 强制隐式返回的箭头函数体的位置
    "key-spacing": [1, { "beforeColon": false, "mode": "strict", }],  // 强制在对象字面量的键和值之间使用一致的空格
    "keyword-spacing": [1, { "after": true }],  // 强制关键字周围空格的一致性 
    "lines-around-comment": [1, { "beforeBlockComment": true, "beforeLineComment": true, "beforeLineComment": true, "allowBlockStart": true }],  // 强制注释周围有空行
    "lines-between-class-members": [1, "always"],  // 要求或禁止在类成员之间出现空行 
    "newline-per-chained-call": [1, { "ignoreChainWithDepth": 2 }],  // 要求或禁止在类成员之间出现空行 
    "no-multi-assign": "error", // 禁止连续赋值
    "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 1, "maxBOF": 1 }], // 不允许多个空行
    "no-trailing-spaces": 1, // 禁用行尾空白
    "no-whitespace-before-property": 1, // 禁止属性前有空白
    "object-curly-spacing": [1, "always", { "arraysInObjects": true }], // 强制在花括号中使用一致的空格 
    "one-var-declaration-per-line": [1, "always"], // 要求或禁止在变量声明周围换行
    "object-property-newline": [1, { "allowAllPropertiesOnSameLine": true }], // 强制将对象的属性放在不同的行上
    "operator-linebreak": [1, "before"], // 强制操作符使用一致的换行符风格
    // "semi": [1, "never", { "omitLastInOneLineBlock": true }], // 要求或禁止使用分号代替 ASI
    "space-before-blocks": [1, "always"], // 要求或禁止语句块之前的空格
    "space-in-parens": [1, "always", { "exceptions": [, "{}", "[]"] }], // 禁止或强制圆括号内的空格
    "space-infix-ops": 1, // 要求中缀操作符周围有空格
    "space-unary-ops": [1, { "words": true, "nonwords": false }], // 要求或禁止在一元操作符之前或之后存在空格 
    "spaced-comment": [1, "always"], // 要求或禁止在注释前有空白
    "wrap-regex": 1, // 要求正则表达式被包裹起来
    "arrow-spacing": 1, // 要求箭头函数的箭头之前或之后有空格
  }
}

4、打开vscode—设置—settings—粘贴自动格式化代码

"editor.formatOnSave": true,

另外：1、修改vue-html中的格式，需要配置插件 Vetur，和在settings中配置js-beautify-html，这里是参数链接