VScode 格式化代码保存时使用ESlint修复代码

前言

在网上下载一个Vue-Element-Admin 后管项目跑起来后用VScode自带个格式化代码保存时，项目中ESlint就开始不乐意了一直疯狂报错真让人头大。随后一个早上都在百度，谷狗，包括之前的写的笔随，整理出来两个思路如下

第一项 VS code编辑使用eslint的规则去格式化代码

{
  "[javascript]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.run": "onSave",
  "eslint.autoFixOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

VS code还可以指定ESLint的格式文件

"eslint.options": {
    "configFile": "E:/git/github/styleguide/eslint/.eslintrc.js",
    "plugins": ["html"]
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue"
]

第二项 使用 Prettier - Code formatter 根据eslint的规则去格式化代码

    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue-html",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "eslint.run": "onSave",
    "eslint.autoFixOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },

    "prettier.printWidth": 200,
    "prettier.requireConfig": true,
    "prettier.semi": false,
    "prettier.useEditorConfig": false,
    "prettier.useTabs": true,