Vue3 前端专属配置（VSCode settings.json + .prettierrc）
直接复制即用，完美适配 Vue3 + Vite + JavaScript/TypeScript 项目，解决格式化冲突、缩进、引号、换行等所有问题。
一、先确认你已安装这2个插件
打开 VSCode 扩展面板 Ctrl+Shift+X，安装：
- Vue Language Features (Volar) → Vue3 官方必备插件
- Prettier - Code formatter → 代码格式化核心插件
二、VSCode settings.json 配置（Vue3专用）
打开方式：
Ctrl+Shift+P → 输入 Open Settings (JSON) → 回车，全选替换下面代码：
{// ==================== Vue3 核心格式化配置 ====================// 默认格式化工具 = Prettier"editor.defaultFormatter":"esbenp.prettier-vscode",// 保存文件时自动格式化（最实用）"editor.formatOnSave":true,// 粘贴代码自动格式化"editor.formatOnPaste":true,// 选中代码可手动格式化"editor.formatOnSelection":true,// 自动修复ESLint错误（配合格式化）"editor.codeActionsOnSave":{"source.fixAll.eslint":true},// ==================== 分语言指定格式化器 ===================="[vue]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},"[javascript]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},"[typescript]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},"[html]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},"[css]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},"[scss]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},"[json]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},// ==================== Vue3 语法优化 ====================// Volar 插件格式化支持"vue.autoInsertParentheses":true,// 关闭VSCode自带的格式化冲突"javascript.format.enable":false,"typescript.format.enable":false,// 缩进统一为2个空格（Vue3标准）"editor.tabSize":2,"editor.insertSpaces":true}三、.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 一键格式化）
- 格式化整个文件：
Shift + Alt + F（Windows）/Shift + Option + F（Mac） - 自动格式化：直接按
Ctrl + S保存文件，自动格式化代码 - 格式化选中代码：选中代码 → 按
Shift + Alt + F
五、额外优化（可选，解决ESLint冲突）
如果你的Vue3项目用了 ESLint，执行这行命令安装兼容包：
npminstall eslint-config-prettier eslint-plugin-prettier -D然后在 .eslintrc.cjs 中添加：
module.exports ={extends:['plugin:vue/vue3-essential','eslint:recommended','plugin:prettier/recommended'// 关键：Prettier+ESLint兼容]}总结
- 复制
settings.json→ 配置VSCode格式化行为 - 项目根目录新建
.prettierrc→ 统一Vue3代码风格 - 保存文件自动格式化，快捷键一键格式化
- 完美支持 Vue3
<script setup>语法、CSS/Scss、TS/JS