在 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 文件了。
