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

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 类型。

• 彻底卸载 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 互相打架

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

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

• .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 或重新打开文件夹才能生效，热重载不触发路径缓存刷新

真正卡住开发节奏的，往往不是功能缺失，而是 Volar 和 ESLint 对同一段 .vue 文件的解析权争夺——这个边界必须手动划清，VSCode 不会自动猜。