VSCode自动格式化代码插件_Vue项目风格统一指南【规范】

风芳姑娘_9248

风芳姑娘_9248

2026-05-21

633人浏览

原创

prettier.requireconfig必须设为true,否则vs code会降级使用内置格式器导致.vue文件各区块格式割裂;需配合.editor.defaultformatter、语言块绑定及.prettierrc.json5 overrides配置统一规则。

vscode自动格式化代码插件_vue项目风格统一指南【规范】

prettier.requireConfig 必须设为 true,否则 Vue 文件保存时会割裂:template 用 Vetur 默认规则、script 用 TypeScript 内置格式器,同一文件里引号、缩进、分号全不一致。

为什么 Vue 文件保存后格式还是乱?

根本原因不是插件没装,而是 VS Code 在找不到项目级配置时自动降级——它不报错,但会悄悄切到内置格式器。比如:.vue 中的 <template></template> 可能走 prettyhtml,<script></script> 却走 TS 自带格式器,结果就是单引号和双引号并存、JSX 属性换行逻辑冲突、printWidth 行为不统一。

  • prettier.requireConfig 不设为 true,VS Code 就不会强制读取 .prettierrc.json5,哪怕文件存在也视而不见
  • 只配 "editor.formatOnSave": true 不够,必须同时指定 "editor.defaultFormatter": "esbenp.pretterr-vscode"(注意 ID 大小写)
  • Vue 2 项目若用 octref.vetur,需额外关掉它的默认 HTML 格式器:"vetur.format.defaultFormatter.html": "prettier"
  • Vue 3 项目应优先用 vue.volar,且需开启 TypeScript-Vue Plugin 才能正确识别 <script setup></script> 块

如何让 <style></style> 块也走 Prettier?

Vetur/Volar 默认对 CSS/SCSS 的格式化支持有限,直接依赖它们的内置逻辑容易导致缩进错乱或属性排序不一致。真正可控的方式是把样式块交由 Prettier 统一处理。

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app快速上手
uni-app快速上手

共0课时 | 0人学习

Vue 教程
Vue 教程

共42课时 | 17.2万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 2.5万人学习