VSCode中Vue项目保存自动格式化与ESLint修复需三处配置对齐：启用对应插件、settings.json中正确设置"editor.formatOnSave":true、"editor.codeActionsOnSave":{"source.fixAll.eslint":true}及"[vue]":{"editor.defaultFormatter":"vue.volar"}，并确保项目存在生效的.eslintrc.js和.prettierrc文件。
VSCode 里 Vue 项目保存就自动格式化、ESLint 自动修复，不是靠玄学，而是靠三处配置对齐：插件启用状态、settings.json 中的 formatter 和 codeActions 配置、以及项目级的 .eslintrc.js 和 .prettierrc 文件是否真实存在且生效。
为什么保存后没触发 ESLint 修复？
最常见原因是 editor.codeActionsOnSave 没配对，或 ESLint 插件未识别项目规则。
-
editor.codeActionsOnSave必须显式写成{"source.fixAll.eslint": true}，只写"source.fixAll"不生效 - 项目根目录必须存在
.eslintrc.js（或.eslintrc.json），且其中包含extends: ["eslint:recommended", "plugin:vue/vue3-essential"]这类有效继承 - 如果项目用 TypeScript，
eslint-plugin-vue和@typescript-eslint/eslint-plugin都得装在devDependencies里，否则 VSCode 找不到规则定义 - 检查 VSCode 右下角状态栏——点击 ESLint 图标，确认显示“ESLint is running”且无报错路径
Vue 文件保存后被 Volar 格式化，但 Prettier 不起作用？
这是语言模式和默认 formatter 冲突的典型表现：[vue] 块优先级高于全局 editor.defaultFormatter，Volar 会接管全部格式化逻辑。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 确保
settings.json中有"[vue]": {"editor.defaultFormatter": "vue.volar"}，且没有其他插件（如 Vetur）在后台抢注vue语言模式 - Volar 默认不调用 Prettier；想让 Prettier 参与，需在
settings.json加上："vue.format.enable": false，再靠editor.formatOnSave触发 Prettier - 更稳妥的做法是关闭 Volar 的格式化，统一交由 Prettier + ESLint 处理：删掉
"[vue]"块，只留全局editor.defaultFormatter，并确保prettier-vscode插件已启用
离线环境下调试 Vue 项目，launch.json 怎么写才不依赖网络？
所谓“离线调试”，本质是去掉远程连接环节，改用本地浏览器附加（attach）模式，避免因网络策略或代理导致调试器连不上 Chrome。
立即学习“前端免费学习笔记（深入）”；
- 不要用
"request": "launch"，改用"request": "attach"，这样 VSCode 不启动新浏览器，只连接你已打开的 tab -
url字段必须省略或留空，否则它仍会尝试跳转；重点配好port（Chrome 启动时加的--remote-debugging-port=9222） -
webRoot要严格匹配你的源码位置：Vite 项目填"${workspaceFolder}"，Vue CLI 项目填"${workspaceFolder}/src" -
sourceMapPathOverrides必须对应构建工具：Vite 用"/src/*": "${webRoot}/src/*"，Webpack 项目用"webpack:///src/*": "${webRoot}/*" - Chrome 启动命令示例（Windows）：
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --no-first-run --no-default-browser-check http://localhost:5173
真正卡住调试的，往往不是断点设在哪，而是 sourceMapPathOverrides 里那条映射规则写错了斜杠方向，或者 webRoot 少了个 /src。这些路径问题在离线时更难排查，因为没网络请求日志可查。
