VSCode自动修正代码插件_Vue组件开发利器-VSCode-PHP中文网

eslint、prettier与volar需明确分工：eslint负责代码质量检查并统一修复（通过"editor.codeactionsonsave": {"source.fixall.eslint": true}），prettier专司格式化（设为默认格式化器但禁用自动保存格式化），volar接管vue语法解析与类型提示（卸载vetur、启用"volar.takeovermode": true并配置tsconfig.json含"types": ["vue"]），三者权限边界不清会导致保存冲突、类型提示失效及v-model补全异常。

vscode自动修正代码插件_vue组件开发利器

ESLint + Prettier + Volar 三者必须协同配置，否则保存时会互相覆盖、类型提示失效、v-model 参数不补全——不是插件没装，是权限没划清。

为什么 `eslint.autoFixOnSave` 在 .vue 文件里不生效

VSCode 默认把 .vue 当作 HTML 处理，而 ESLint 插件只监听 javascript、typescript 和 vue 语言模式，但 script 块实际走的是 JS/TS 解析器，必须显式声明支持。

确认右下角语言模式是 Vue（不是 HTML 或 Plain Text），点它手动切换
在工作区 settings.json 中必须写："eslint.validate": ["vue", "javascript", "typescript"]，顺序无关，但缺一不可
eslint.autoFixOnSave 已被 VSCode 1.89+ 弃用，改用："editor.codeActionsOnSave": { "source.fixAll.eslint": true }
确保项目已安装 eslint-plugin-vue，且 .eslintrc.cjs 的 extends 包含 'plugin:vue/vue3-recommended'

`v-model`、`defineProps` 没有类型提示

这是 Volar 未接管 Vue 语法层的典型表现。Vetur 已归档，它和 Volar 会冲突，且无法推导 script setup 类型。

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

彻底卸载 Vetur（不只是禁用）
安装两个配套插件：Vue Language Features (Volar) 和 TypeScript Vue Plugin (Volar)
在 settings.json 中启用接管模式："volar.takeOverMode": true
检查项目根目录是否有 tsconfig.json，且包含："compilerOptions": { "types": ["vue"] }
若仍无提示，按 Ctrl+Shift+P（Win）或 Cmd+Shift+P（Mac），输入 Volar: Restart Server 手动重载

保存时 `Prettier` 和 `ESLint` 互相打架

格式化和修复逻辑不同步，会导致缩进变、分号闪、光标乱跳，文件状态持续“脏”。

.prettierrc 必须与 ESLint 规则对齐，例如："semi": false、"singleQuote": true
.eslintrc.cjs 的 extends 数组中，'eslint-config-prettier' 必须放在最后，且不能和其他规则顺序颠倒
禁用 Prettier 的自动格式化（"editor.formatOnSave": false），只靠 ESLint 的 codeActionsOnSave 统一修复
确保 editor.defaultFormatter 设为 esbenp.prettier-vscode，但仅用于手动触发（如 Shift+Alt+F）

`Path Intellisense` 不识别 `@/` 别名

路径补全卡在 ./，@/components/ 无法展开，本质是插件不知道 @ 指向哪。

在工作区 settings.json 中添加映射："path-intellisense.mappings": { "@": "${workspaceFolder}/src" }
该配置只对当前项目生效；若用 vite-ts 模板，src 路径通常正确；若自定义了 alias（如指向 packages），需同步更新此处
重启 VSCode 或重新打开文件夹才能生效，热重载不触发路径缓存刷新