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,

__EOF__

本文作者：不在沉默着爆发，就在沉默中消亡
本文链接：https://www.cnblogs.com/Hekiss/p/12162700.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！