Vue3 项目 VSCode 配置指南：settings.json 与 Prettier

三、.prettierrc 配置文件（Vue3 团队标准）

使用方式

在您的 Vue3 项目根目录，新建一个文件，命名为 .prettierrc，复制以下内容：

{
  "printWidth": 120,
  // 一行最大字符数（Vue3 推荐）
  "tabWidth": 2,
  // 缩进 2 空格（强制标准）
  "useTabs": false,
  // 禁用 Tab，用空格缩进
  "semi": true,
  // 语句末尾加分号
  "singleQuote": true,
  // 使用单引号（Vue3 标准）
  "quoteProps": "as-needed",
  // 对象属性仅必要时加引号
  "jsxSingleQuote": true,
  // JSX 使用单引号
  "trailingComma": "es5",
  // 末尾逗号（数组/对象保留）
  "bracketSpacing": true,
  // 对象大括号内保留空格 { name: xxx }
  "bracketSameLine": false,
  // HTML 标签反尖括号单独一行（Vue 标准）
  "arrowParens": "avoid",
  // 箭头函数单参数省略括号
  "endOfLine": "lf",
  // 换行符统一为 LF（避免 Windows/Mac 冲突）
  "htmlWhitespaceSensitivity": "css"
  // HTML 空格敏感度（不破坏布局）
}

四、格式化快捷键（Vue3 一键格式化）

1. 格式化整个文件：Shift + Alt + F（Windows）/ Shift + Option + F（Mac）
2. 自动格式化：直接按 Ctrl + S 保存文件，自动格式化代码
3. 格式化选中代码：选中代码 → 按 Shift + Alt + F

五、额外优化（可选，解决 ESLint 冲突）

如果您的 Vue3 项目用了 ESLint，执行这行命令安装兼容包：

npm install eslint-config-prettier eslint-plugin-prettier -D

然后在 .eslintrc.cjs 中添加：

module.exports = {
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    'plugin:prettier/recommended'
    // 关键：Prettier+ESLint 兼容
  ]
};

总结

1. 复制 settings.json → 配置 VSCode 格式化行为
2. 项目根目录新建 .prettierrc → 统一 Vue3 代码风格
3. 保存文件自动格式化，快捷键一键格式化
4. 完美支持 Vue3 <script setup> 语法、CSS/Scss、TS/JS