VSCode代码自动整理插件_VSCode离线调试Vue代码【技巧】-VSCode-PHP中文网

vscode离线vue项目自动整理代码不触发，主因是volar/vetur未接管语言模式且本地缺失prettier或@vue/language-server二进制；需手动设语言为vue、安装对应插件、配置prettier路径及.prettierrc，并确保node、tsconfig.json和volar for typescript齐全。

vscode代码自动整理插件_vscode离线调试vue代码【技巧】

VSCode 保存时自动整理代码，在离线 Vue 项目里根本不会触发——不是插件没装，而是格式化链路从一开始就没跑通。核心卡点就两个：Vetur 或 Volar 没接管语言模式，以及本地缺少可调用的 prettier 或 @vue/language-server 二进制。

右下角显示 Plain Text 或 HTML？说明格式化器压根没加载

VSCode 只对当前语言模式启用对应格式化器。.vue 文件若被识别为 Plain Text、HTML 或 JavaScript React，Vetur 和 Volar 都不会响应 editor.formatOnSave。

点右下角语言标识 → 选 Vue（注意不是 Vue HTML 或 JavaScript React）
若列表里没有 Vue，说明 Vetur（Vue 2）或 Volar（Vue 3）未安装/未启用；离线环境需提前下载 .vsix 手动安装
Volar 用户务必开启 Take Over Mode（在 Extensions → Volar 设置中勾选），否则 script setup 区域不走 Prettier

保存后代码没变化？检查本地 prettier 是否真可用

VSCode 的 prettier-vscode 插件只是调度器，真正干活的是你项目里 node_modules/prettier 下的可执行文件。离线环境下，它不会自动帮你装依赖。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

打开 VSCode 内置终端，运行 npx prettier --version，无输出 = 没装 prettier
离线安装必须执行：npm install --save-dev prettier（或用 yarn add -D prettier）
pnpm/yarn v4+ 用户需在 settings.json 中显式指定路径："prettier.prettierPath": "./node_modules/prettier/index.cjs"
.prettierrc 必须放在项目根目录，且文件名不能是 .prettierrc.json 或 prettier.config.js（Vetur 只认前者）

离线调试 Vue 时断点灰色？sourceMapPathOverrides 配错是主因

断点不可用 ≠ 代码写错了，90% 是源码映射路径没对上。Vite 和 Vue CLI 的 source map 前缀完全不同，混用必失败。

Vite 项目（http://localhost:5173）："sourceMapPathOverrides": { "/src/*": "${webRoot}/src/*" }
Vue CLI 项目（http://localhost:8080）："sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/src/*" }
webRoot 必须是项目根目录（${workspaceFolder}），不是 src 目录
Chrome 开发者工具 Sources 面板里看不到 /src/ 或 webpack:// 树？说明构建没开 sourcemap，或 vite.config.ts / vue.config.js 里 build.sourcemap 或 devtool 设成了 false

Volar Rename Symbol 失效？不是插件问题，是 LSP 没启动

离线环境里，Rename Symbol（F2）静默失败，通常因为 TypeScript 语言服务根本没起来——它依赖本地 node、typescript 和匹配版本的 @vue/language-core。

确认离线机已预装 node（运行 node -v 验证），否则 Volar 启动 TS 服务会静默退出
检查项目根目录是否存在 tsconfig.json 或 jsconfig.json，且 "include" 字段包含 "src/**/*"
Volar for TypeScript 必须单独安装（和 Volar 是两个扩展），否则 defineProps 类型推导和重命名无法跨 <script setup></script> 生效
改完 defineProps 类型后，必须先 Ctrl+S 保存，再 F2 重命名，否则引用更新不全