VsCode正确解决vue3+Eslint+prettier+Vetur的配置冲突

在VSCode中配置Vue 3项目时，可能会遇到Eslint、Prettier和Vetur插件的配置冲突问题。为了解决这个问题，你需要确保你的VSCode编辑器中这三个插件的配置是一致的，并且遵循一个共同的代码风格。

以下是一个简化的配置示例，你可以将其添加到VSCode的settings.json文件中：

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "json"
  ],
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5",
  "prettier.semi": false,
  "prettier.arrowParens": "avoid",
  "prettier.endOfLine": "auto",
  "prettier.printWidth": 80,
  "prettier.tabWidth": 2,
  "editor.tabSize": 2,
  "editor.detectIndentation": false
}

这个配置做了以下几点：

1. 启用保存时的自动格式化(editor.formatOnSave)。
2. 启用代码修复建议保存时自动运行(editor.codeActionsOnSave)。
3. 为.vue文件设置Prettier作为默认格式化器("[vue]": {...}).
4. 为.json文件设置Prettier作为默认格式化器("[json]": {...}).
5. 配置Eslint用于校验的文件类型("eslint.validate")。
6. 设置Prettier的一些常用选项，如使用单引号("prettier.singleQuote")、尾逗号风格("prettier.trailingComma")等。
7. 设置编辑器的制表符大小与Prettier保持一致。

确保你已经在项目中安装了Eslint、Prettier以及它们的相关插件，并且有一个合适的.eslintrc.js或.prettierrc配置文件。这样VSCode就可以正确地应用这些工具的规则来格式化你的代码。