vscode如何格式化vue代码

Visual Studio Code (VSCode) 中有一个名为 "Prettier" 的插件，可以方便地格式化 Vue.js 代码。以下是使用 Prettier 格式化 Vue 代码的步骤：

1. **安装插件**：
- 打开 VSCode，点击左上角的 Extensions 或者通过 `Ctrl + Shift + X` 快捷键打开扩展市场。
- 搜索 "prettier" 和 "vetur"（Vue相关的官方插件），安装这两个插件。

2. **配置 Prettier**：
- 需要在工作区的 `.vscode/settings.json` 文件中添加 Prettier 的配置。例如：

     {
       "editor.formatOnSave": true,
       "vetur.format.defaultFormatterOptions": {
         "prettyPrint": true,
         "singleQuote": true
       },
       "vetur.format.options.tabSize": 2,
       "vetur.format.options.insertSpaces": true,
       "prettier.configPath": ".prettierrc"
     }

这里设置了保存文件时自动格式化，并指定了 Vue 的特定选项。

3. **创建`.prettierrc`文件**（如果还没有）：
- 在项目根目录下创建一个名为 `.prettierrc` 或 `.prettierrc.js` 的文件，用于自定义 Prettier 的格式化规则，比如选择 Vue 的特定风格（Airbnb、Vetur等）。

4. **启用格式化**：
- 如果你想在任何时候格式化选定的代码区域，只需按 `Ctrl + Shift + I` （Windows/Linux）或 `Cmd + Shift + I`（macOS）组合键，然后选择 "Format Document"。