VSCode自动修复代码错误_VSCode增强Vue调试体验【秘籍】-VSCode-PHP中文网

vscode vue 项目自动修复与调试需 volar 插件、正确配置及 sourcemap 三者闭环；卸载 vetur，启用 volar 和 typescript 插件，配置 settings.json 和 tsconfig.json，确保 eslint 可修复规则生效，并在 launch.json 中正确设置 webroot 与 sourcemappathoverrides。

vscode自动修复代码错误_vscode增强vue调试体验【秘籍】

VSCode 自动修复代码错误，对 Vue 项目有效，但默认不生效——关键在插件选型、配置开关和规则支持三者必须对齐；调试体验提升也不靠玄学，而是 Volar + launch.json + sourceMap 三者闭环。

用 Volar 而不是 Vetur，否则 `source.fixAll.eslint` 在 `.vue` 文件里基本失效

Vetur 已停止维护，对 Vue 3 的组合式 API、defineProps 类型推导、setup 语法块内 ESLint 修复支持极弱。Volar 是 Vue 官方推荐的语言服务器，它把 .vue 文件拆解为 script / template / style 三部分分别处理，ESLint 才能真正识别 script 区域的 JS/TS 逻辑并执行修复。

卸载 Vetur（尤其如果你之前装过），避免插件冲突
安装 Vue.volar 和 Vue.vscode-typescript-vue-plugin（后者启用 TS 支持）
在 settings.json 中显式指定 [vue] 使用 Volar："[vue]": { "editor.defaultFormatter": "vue.volar" }
确保项目有 tsconfig.json 或 jsconfig.json，否则 Volar 无法激活类型服务，fixAll 会静默跳过

`editor.codeActionsOnSave` 开了却没反应？检查这三个实际运行条件

VSCode 不是“开了就修”，它只在满足全部条件时才触发修复：当前文件被语言服务器正确识别 + 对应规则标记为“可修复” + 该修复操作未被禁用或覆盖。

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

打开命令面板（Ctrl+Shift+P），运行 Developer: Toggle Developer Tools，在 Console 里搜索 volar 或 eslint，确认服务已启动
在报错行按 Ctrl+.（Windows/Linux）或 Cmd+.（macOS），如果弹不出灯泡菜单，说明语言服务未接管该文件（常见于 src/views 下未被 tsconfig.json include 的路径）
source.fixAll.eslint 只修复 ESLint 规则中 meta.fixable === "code" 的项（如 semi、quotes），对 no-undef 或 vue/multi-word-component-names 这类语义/风格规则默认不修——需在 .eslintrc.js 中显式设 fix: true 或改用 eslint --fix 命令行验证

调试时断点不命中？90% 是因为 `launch.json` 没配对 `sourceMap` 路径映射

Vue 项目经 Vite 或 Vue CLI 构建后，浏览器运行的是打包/转换后的代码，VSCode 断点打在源码上，必须靠 sourceMap 建立映射关系，否则断点灰掉或跳转到错误位置。

确保 vite.config.ts 或 vue.config.js 中开启了 sourceMap：build: { sourcemap: true } 或 configureWebpack: { devtool: 'source-map' }
launch.json 中的 webRoot 必须指向构建前的源码根目录（通常是 "${workspaceFolder}/src"），不是 dist
添加 sourceMapPathOverrides 显式声明映射规则，尤其当使用别名（如 @/components）时："webpack:///./*": "${webRoot}/*"
启动调试前，先在 Chrome 地址栏访问 http://localhost:3000（或你的 dev server 地址），再按 F5 —— “附加到 Chrome” 模式依赖页面已存在

自动导入 `ref`、`computed` 却不补 `defineProps`？这是 TypeScript 语言服务的边界

source.organizeImports 和 source.fixAll.typescript 能自动加 import { ref } from 'vue'，但不会帮你写 defineProps 的类型定义——因为 props 类型需开发者语义判断，TS 编译器无法安全推断。

若你用 defineProps()，保存时会自动补 import，且支持类型跳转
若你用运行时声明 defineProps({ msg: String })，TS 无法提取类型，organizeImports 也不会触发（因无类型依赖）
想让 defineProps 也被识别，必须启用 Volar 的 experimental.enableAutoImport 设置，并确保 tsconfig.json 启用了 "types": ["vue"]
别指望自动补全替代理解——defineProps 的泛型写法才是 Volar + TS 联动生效的前提