Vue 3 项目初始化怎么配置 Prettier 格式化-Vue.js-PHP中文网

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 格式化

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></script> 和 <style></style> 标签内被意外缩进。