VSCode代码自动整理方案_VSCode离线调试Vue项目【技巧】-VSCode-PHP中文网

vscode中vue项目保存自动格式化与eslint修复需三处配置对齐：启用对应插件、settings.json中正确设置"editor.formatonsave":true、"editor.codeactionsonsave":{"source.fixall.eslint":true}及"[vue]":{"editor.defaultformatter":"vue.volar"}，并确保项目存在生效的.eslintrc.js和.prettierrc文件。

vscode代码自动整理方案_vscode离线调试vue项目【技巧】

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