根本原因是语言模式、格式化器绑定、配置作用域未对齐；需确保右下角显示Vue、settings.json中正确配置[vue]块、snippet的scope为"vue"、Prettier插件支持vue且.prettierrc位置正确。
Vue 文件里代码提示不出现、按 Tab 没反应、格式化静默失败——根本不是插件没装，而是语言模式、格式化器绑定、配置作用域三者没对齐。
右下角显示 Plain Text 或 HTML 就别折腾配置了
VSCode 所有智能提示和格式化行为都绑定在当前 Language Mode 上。如果打开 .vue 文件后右下角显示的是 Plain Text 或 HTML，那 Volar、Prettier、ESLint 全部失效。
- 点右下角语言标识 → 选
Vue（不是Vue HTML、JavaScript React或空选项） - 若列表里没有
Vue，说明Volar插件未启用，或被Vetur冲突屏蔽（Vue 3 项目必须禁用 Vetur） - 手动强制关联：在
settings.json中加"files.associations": { "*.vue": "vue" }，保存后重开文件
[vue] 配置块写错一个字符就全挂
VSCode 的语言专属配置必须严格匹配语法：[vue] 是唯一合法写法，[Vue]、vue、"vue"、[vue-html] 全部无效。
- 确认
settings.json中存在且仅有一处"[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } - Vue 3 项目不要配
vetur.*相关项——Volar 不读这些，写了也白写 - 若同时启用 ESLint 自动修复，
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }必须保留，但要关掉"editor.formatOnSave": false，避免 Prettier 和 ESLint 互相覆盖
snippet 的 scope 字段必须是 "vue"，不是 "html" 也不是 "javascript"
输入 vue 按 Tab 没反应，90% 是因为代码片段的 scope 值错了。这个字段不是可选的，它决定了 VSCode 在哪种语言模式下才触发该 snippet。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 全局 snippet 推荐单独建
vue.code-snippets文件（而非改vue.json），内容里必须含"scope": "vue" - 不能写成
"scope": "html"（那是给纯 HTML 文件用的）、"scope": "javascript"（只在 JS 文件生效） - 保存后必须执行
Developer: Reload Window（Ctrl+Shift+P 输入并回车），热重载不生效 - 验证方式：新建
test.vue→ 确认右下角是Vue→ 输入vue→ 按 Tab → 应弹出完整 SFC 结构
Prettier 对 .vue 文件的三块处理逻辑完全不同
Prettier 在 .vue 文件里不统一处理整文件，而是分三块走不同通道：<template> 走 HTML 规则，<script> 走 JS/TS 规则，<style> 走 CSS/SCSS 规则。你改的 .prettierrc 只影响 <script> 区域。
-
<template>的属性换行靠vetur.format.options.wrapAttributes控制（Vetur 项目）；Volar + Prettier 组合下，得靠prettier-plugin-vue支持，且需Prettier ≥ 2.8.0 -
<style scoped lang="scss">需额外安装mrmlnc.vscode-scss插件，并配"[scss]": { "editor.defaultFormatter": "mrmlnc.vscode-scss" } -
.prettierrc必须放在项目根目录，文件名只能是.prettierrc（无后缀）或prettier.config.js；.prettierrc.json不被识别
最常被跳过的动作是确认语言模式——所有配置都对，只要右下角不是 Vue，其他全是白忙。
