Vue3项目初始化时配置Prettier应优先使用create-vue脚手架，它默认集成ESLint 9 flat config及基础Prettier配置，交互中选Yes即可生成eslint.config.js和.prettierrc.json；需手动安装eslint-plugin-prettier以支持ESLint报格式问题；.prettierrc需明确配置vueIndentScriptAndStyle: false等适配Vue SFC的规则；VSCode须配置.settings.json启用formatOnSave、fixAll.eslint及.vue专属formatter，并安装esbenp.prettier-vscode插件；验证时用缩进混乱、引号混用代码保存即可观察自动修复效果。
Vue 3 项目初始化时配置 Prettier，核心是「先装依赖、再写规则、最后打通编辑器自动执行」。不需要等项目跑起来再补，从脚手架阶段就能一步到位。
用 create-vue 脚手架直接生成（推荐）
Vue 官方已明确推荐 create-vue 替代旧版 npm create vite@latest，它会自动集成 ESLint + Prettier 的基础配置，且默认使用 ESLint 9 的 flat config（当前最稳的组合）。
- 运行命令：
npm create vue@latest或pnpm create vue - 过程中会提示是否启用 ESLint 和 Prettier，选 Yes
- 生成的项目里已有
eslint.config.js和.prettierrc.json，无需手动创建 - 注意：它默认不安装
eslint-plugin-prettier，如需在 ESLint 中报出格式问题，后续要手动加装
手动配置 .prettierrc 文件
无论是否用脚手架，最终都要有一个明确的格式规则文件。Vue 3 团队常用配置如下，放在项目根目录即可：
{
"printWidth": 120,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"quoteProps": "as-needed",
"jsxSingleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"bracketSameLine": false,
"arrowParens": "avoid",
"htmlWhitespaceSensitivity": "css",
"vueIndentScriptAndStyle": false,
"endOfLine": "auto"
}
这个配置适配 Vue 单文件组件，尤其注意 vueIndentScriptAndStyle: false——避免 <script> 和 <style> 标签内被意外缩进。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
确保 VSCode 保存时自动格式化
仅靠配置文件没用，必须让编辑器响应。在项目根目录的 .vscode/settings.json 中写入：
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
- 必须安装 VSCode 插件 Prettier（ID：
esbenp.prettier-vscode） - 如果同时用了 ESLint，
source.fixAll.eslint能在保存时一并修复代码质量问题 -
[vue]块确保 .vue 文件也走 Prettier，不被其他插件劫持
验证是否生效
写一段故意“丑”的代码测试：
- 在
src/App.vue里把<template>缩进改成 4 个空格，引号混用，末尾加分号 - 按
Ctrl+S（Windows/Linux）或Cmd+S（macOS）保存 - 观察是否自动变成 2 空格、单引号、无分号、换行对齐
如果没反应，优先检查 VSCode 是否启用了工作区设置、插件是否启用、有没有误启用了 Vetur（需禁用）。
