Vue3 前端专属配置（VSCode settings.json + .prettierrc）

三、.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，执行这行命令安装兼容包：

npminstall 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