1,Eslint + Prettier

报错情况：

解决办法：

（1）下载Prettier - code formatter

（2）配置setting.json文件

文件 -> 首选项 -> 设置 -> 用户 -> Eslint 

 "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },

 整体setting.json文件

{
  "vsicons.associations.files": [{ "icon": "vue", "extensions": ["vue"] }],
  "vsicons.associations.folders": [{ "icon": "src", "extensions": ["src"] }],
  "files.autoSave": "afterDelay",
  "open-in-browser.default": "chrome",
  "window.zoomLevel": 1,
  "workbench.iconTheme": "vscode-icons",
  "vsicons.associations.fileDefault.file": {},
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  //ESlint插件 + Vscode配置 实现自动格式化修复
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  //关闭自动保存格式化 避免和Eslint设置的格式相冲突
  "editor.formatOnSave": false,
  "eslint.format.enable": true,
  "eslint.codeActionsOnSave.rules": null
}

注意检错如下图两个文件是否存在

.vue文件无法自动格式化

考虑工作区优先级大于用户区，将工作区的setting.json文档进行修改

setting.json文档添加内容

{
  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode" 
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}

最终工作区setting.json文档

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "liveServer.settings.AdvanceCustomBrowserCmdLine": ""
}

---

参考文章代码规范配置未生效，解决思路（ eslint + prettier + settings.json + editorconfig ）_prettier 规则没有生效-CSDN博客