VScode中ESlint+Prettier插件配置，实现保存自动规范代码

本人前端小白一个，记录学习中个人认为棘手的问题作为笔记，同时以供同类人群参考

运行背景：

近期在跟着老师写案例，创建项目的时候选中了 ESLint + Standard config的配置，案例在production阶段，看到视频弹幕很多人对ESlint的代码规范表示崩溃，但是由于实际工作中是团队开发，需要一定的代码规范，所以还是记录一下，由于单独使用ESlint需要不断手动调整，因此需要搭配Prettier插件一起，以及一些设置项，从而实现根据ESlint规范自动格式化代码的功能

实现步骤如下：

1.打开VScode的设置选项，可搜索Format On Save，将该项选中

2.下载ESlint和Prettier插件，如下：

2.在项目根目录中创建名为.prettierrc的文件，并在其中配置如下代码：

{
    "semi": false,
    "singleQuote": true
}

 3.在设置中搜索找到settings.json文件，并在文件内第一个花括号后配置如下代码：

注意.prettierrc文件需要绝对路径，且要通过反斜线“\”转义路径中的斜杠

"prettier.configPath": ".prettierrc文件的路径",
  "eslint.alwaysShowStatus": true,
  "prettier.trailingComma": "none",
  "prettier.semi": false,

  // 每行文字个数超出此限制将会被迫换行
  "prettier.printWidth": 300,
  // 使用单引号替换双引号
  "prettier.singleQuote": true,
  "prettier.arrowParens": "avoid",
  // 设置 .vue 文件中，HTML代码的格式化插件
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.ignoreProjectWarning": true,
  "vetur.format.defaultFormatterOptions": {
      "prettier": {
          "trailingComma": "none",
          "singleQuote": true,
          "semi": false,
          "arrowParens": "avoid",
          "printWidth": 300
      },
      "js-beautify-html": {
          "wrap_attributes": false
      },
  },
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
  },

附：我书写过程中报错vue/multi-word-component-names，此报错表示vue组件名称必须使用复合词，由于我写了复合词之后仍然报错，暂时关闭了该项规范，同款报错可参考：

在根目录中找到.eslintrc.js文件，并在rules中添加代码如下：

'vue/multi-word-component-names': 'off'