在 Visual Studio Code (VSCode) 中使用 Prettier 来格式化 Vue 文件，你可以通过配置 .prettierrc 文件来实现。Prettier 是一个流行的代码格式化工具，支持多种语言和框架，包括 Vue。以下是一些步骤和示例，帮助你在项目中设置和使用 Prettier 来格式化 Vue 文件：

1. 安装 Prettier 和相关插件

首先，确保你已经安装了 Prettier。你可以通过 npm 或 yarn 来安装：

npm install --save-dev prettier
# 或者
yarn add --dev prettier

然后，安装 VSCode 的 Prettier 插件（如果还没有安装的话）：

1、打开 VSCode。

2、转到扩展视图，通过点击侧边栏的方块图标或使用快捷键 Ctrl+Shift+X。

3、搜索 “Prettier - Code formatter”。

4、点击安装。

2. 创建或修改 .prettierrc 文件

在项目的根目录下创建一个 .prettierrc 文件（如果还没有的话），并添加你想要的配置。例如，创建一个基本的配置文件：

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "vueIndentScriptAndStyle": true
}

3. 配置 VSCode 使用 Prettier

为了确保 VSCode 在保存文件时自动格式化，你可以设置一个保存时自动格式化的命令。打开设置（Ctrl + ,），然后搜索 “format on save”。确保 “Editor: Format On Save” 选项被勾选。(也就是：打开setting，搜索format，勾选text editor下的formatting下的format on save)

另外，你可以通过修改 settings.json 文件来直接设置：

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

4. 使用 Prettier 格式化代码

现在，每次你保存 .vue 文件时，VSCode 将自动使用 Prettier 来格式化你的代码。你也可以通过右键点击编辑器中的代码，选择 “Format Document” 来手动格式化，或者使用快捷键 Shift + Alt + F（在 Windows/Linux 上）或 Shift + Option + F（在 macOS 上）。

5. 调试和调整配置

如果你发现格式化后的代码不是你期望的那样，你可以回到 .prettierrc 文件并调整配置。Prettier 的官方文档提供了详细的配置选项说明：https://prettier.io/docs/en/options.html。

通过以上步骤，你应该能够在 VSCode 中成功配置并使用 Prettier 来格式化 Vue 文件了。