需先确认.vue文件被识别为vue语言类型（右下角显示vue或配置"files.associations":{"*.vue":"vue"}），再按vue版本选用volar（vue 3）或vetur（vue 2），并分别配置"[vue]":{"editor.defaultformatter":...}及各块格式化器如"vetur.format.defaultformatter.css":"prettier"，同时开启"[vue]":{"editor.formatonsave":true}。
Vue 文件格式化不是装个插件就完事，关键得让 VSCode 知道“这是 Vue 文件”，再告诉它“用谁来格式化”“各部分（<template></template>、<script></script>、<style></style>）怎么分头处理”。否则保存时没反应、右键没选项、CSS 块缩进错乱，全是配置没对齐的锅。
如何确认 .vue 文件被正确识别为 Vue 语言类型
VSCode 不会自动把 .vue 当作 Vue 类型处理——它默认可能识别成 Plain Text 或 HTML，导致格式化功能压根不触发。
- 打开任意
.vue文件，看编辑器右下角状态栏：必须显示Vue（不是HTML或空白） - 如果显示错误，点击该区域，在弹出菜单中手动选择
Vue - 为避免每次手动切，加一条强制关联配置：
"files.associations": {"*.vue": "vue"}，写进settings.json - Volar（Vue 3）或 Vetur（Vue 2）插件安装后，会注册
vue语言支持；但若已装插件仍不识别，重启 VSCode 是最简单的验证手段
Vue 2 用 Vetur，Vue 3 必须换 Volar
用错插件版本，<script setup></script> 会解析失败，<style scoped></style> 格式化直接失效，甚至报 Cannot find module 'vue' 这类看似无关的错误。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- Vue 2 项目：只装
octref.vetur，别装 Volar；Volar 对 Vue 2 支持有限，容易覆盖语言服务 - Vue 3 项目（尤其含
defineProps/defineEmits）：卸载 Vetur，只装vue.volar；Volar 的 TypeScript-Vue 插件是核心，必须在设置里启用 - 两者共存会冲突——VSCode 只能激活一个语言服务器，冲突时优先级由插件声明决定，不可预测
- 检查方式：打开
.vue文件，按Ctrl+Shift+P输入Developer: Toggle Developer Tools，控制台若出现Vetur is disabled because Volar is enabled，说明已自动降级 Vetur
为什么
<style lang="scss"></style> 里的样式不缩进、不换行、单引号变双引号，大概率不是 Prettier 没起作用，而是 Vetur/Volar 没把这块交给它处理。
- Vetur 用户：必须显式配置
"vetur.format.defaultFormatter.css": "prettier"和"vetur.format.defaultFormatter.scss": "prettier"，不能只靠全局editor.defaultFormatter - Volar 用户：默认不接管
<style></style>，需额外安装Prettier - Code formatter插件，并确保settings.json中有"[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}和同理的[scss]配置 - 所有情况都要确认：项目根目录有
.prettierrc（哪怕空文件），否则 Vetur/Volar 可能 fallback 到内置美化器，风格不可控 - 别忽略
lang属性拼写：写成lang="SCSS"或lang="sass"会导致匹配失败，Vetur 只认小写scss、css、less
保存时自动格式化不生效？先关掉 editor.formatOnSave 的全局开关
很多人在用户设置里开了 "editor.formatOnSave": true，结果 .vue 文件不格式化，而 .js 文件却正常——问题就出在“全局开关 + 语言特设开关”的叠加逻辑上。
- VSCode 的格式化行为优先级是：
[vue]语言设置 > 全局editor.formatOnSave - 所以必须配
"[vue]": {"editor.formatOnSave": true}，光有全局设置没用 - 同时要确保
[vue]下指定了格式化器："[vue]": {"editor.defaultFormatter": "vue.volar"}（Vue 3）或"[vue]": {"editor.defaultFormatter": "octref.vetur"}（Vue 2） - 如果用了 Prettier 统一管理，可改用
"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}，但此时需确认 Prettier 插件本身支持 Vue 单文件解析（v9+ 版本才稳定）
最容易被忽略的是：Volar 的 TypeScript-Vue Plugin 默认关闭，不手动开启的话，<script setup></script> 里的类型推导和格式化基本瘫痪；这个开关藏在 Volar 扩展设置页里，不在 settings.json 中，必须点开扩展面板手动勾选。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
