为 Vue3 + TypeScript + Vite 项目配置 Prettier代码格式化

下面是为 Vue3 + TypeScript + Vite 项目单独配置 Prettier 的详细步骤（不包含 ESLint 配置）：

1. 安装 Prettier

npm install --save-dev prettier

2. 创建 Prettier 配置文件

在项目根目录下创建 .prettierrc.js（或 .prettierrc.json）：

module.exports = {
  // 单引号
  singleQuote: true,
  // 句尾不使用分号
  semi: false,
  // 每行代码最大长度
  printWidth: 100,
  // 对象属性末尾加逗号（尽可能）
  trailingComma: 'all',
  // 箭头函数单参数时不加括号
  arrowParens: 'avoid',
  // HTML 文件空格敏感性
  htmlWhitespaceSensitivity: 'ignore',
  // Vue 文件中 script 和 style 标签缩进
  vueIndentScriptAndStyle: true,
  // 换行符自动检测
  endOfLine: 'auto'
}

或者使用 JSON 格式（.prettierrc.json）：

{
  "singleQuote": true,
  "semi": false,
  "printWidth": 100,
  "trailingComma": "all",
  "arrowParens": "avoid",
  "htmlWhitespaceSensitivity": "ignore",
  "vueIndentScriptAndStyle": true,
  "endOfLine": "auto"
}

3. 创建忽略文件

创建 .prettierignore 文件，指定不需要格式化的文件/目录：

node_modules
dist
*.md
*.json
*.yaml
*.yml

4. 添加格式化脚本

在 package.json 的 scripts 部分添加：

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

5. 配置 VS Code（可选）

如果你使用 VS Code，可以安装 Prettier 扩展，然后创建 .vscode/settings.json：

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

6. 使用 Prettier

• 手动格式化整个项目：

  npm run format
  

• 检查格式问题（不修改文件）：

  npm run format:check
  

7. 与 Vite 集成（可选）

虽然 Prettier 通常不需要与 Vite 直接集成，但如果你想在开发过程中自动格式化，可以安装：

npm install --save-dev vite-plugin-prettier

然后在 vite.config.ts 中添加：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import prettier from 'vite-plugin-prettier'

export default defineConfig({
  plugins: [
    vue(),
    prettier({
      // 配置选项，与.prettierrc.js一致
      singleQuote: true,
      semi: false,
      // 其他配置...
    })
  ]
})

这样配置后，你的 Vue3 + TypeScript + Vite 项目就拥有了完整的 Prettier 格式化支持，可以保持代码风格一致。