Vue项目VSCode保存错乱、v-model无提示、defineProps校验失效，根本原因是ESLint/Prettier/Volar三者权限未厘清：Volar未接管语法层导致类型推导失败；ESLint未正确验证vue语言模式；Pretterr与ESLint修复冲突。
Vue 项目在 VSCode 里保存后格式错乱、v-model 参数没提示、defineProps 类型校验失效——不是插件装得少，而是 ESLint、Prettier、Volar 三者权限没划清，且 Volar 没接管 Vue 语法层。
为什么 eslint.autoFixOnSave 在 .vue 文件里不生效
VSCode 默认把 .vue 当作 HTML 处理，而 ESLint 插件只监听 javascript 和 vue 语言模式；旧版配置常漏掉对 <script> 块的显式声明。
- 确认右下角语言模式是
vue（不是HTML或Plain Text），点它手动切换 -
settings.json中必须包含："eslint.validate": ["vue", "javascript", "typescript"]，不能只写["javascript", "vue"]——<script setup>实际走的是 JS/TS 解析器 - 禁用已废弃的
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（非 Vetur）未激活或被其他插件压制的典型表现。Vetur 已停止维护，Volar 是 Vue 3 官方推荐的语言服务器，负责 script setup 的类型推导、props 自动补全、模板中 v-model 参数名提示等核心能力。
- 卸载 Vetur，安装
Volar（John C. Lin 发布）和TypeScript Vue Plugin (Volar)（二者需配套） - 在
settings.json中启用："volar.takeOverMode": true，否则 Volar 不会接管 TS 语言服务 - 检查
tsconfig.json是否包含："compilerOptions": { "types": ["vue"] }，否则defineProps推导退化为any - 按
Cmd+Shift+P（Mac）或Ctrl+Shift+P（Win），输入Volar: Restart Server手动重载
保存时 Prettier 格式化和 ESLint 修复互相覆盖
冲突本质是：Prettier 改了缩进/引号，ESLint 紧跟着删分号或加空格，再保存又触发 Prettier 回滚——光标跳、波浪线闪、文件变“脏”。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- 彻底关闭 ESLint 的格式化权：
"eslint.format.enable": false（必须写在工作区settings.json，用户级设置会被覆盖） -
.prettierrc里明确写死与团队规则一致的选项，例如："semi": false、"singleQuote": true、"tabWidth": 2 - 禁用
editor.formatOnSave，只保留editor.codeActionsOnSave中的 ESLint 修复项，避免双引擎并行 - 若项目同时用 Stylelint，也需设
"stylelint.validate": ["css", "scss", "vue"]并配stylelint-processor-html，否则<style>块不参与校验
Ctrl+. 无自动导入提示
VSCode 的自动导入完全依赖 TypeScript 语言服务器（TS Server）的类型解析能力，而 Vue 单文件组件必须由 Volar 接管才能把 <script setup> 里的变量和类型正确暴露给 TS Server。
- 运行命令
Vue: Take Over and Restart，强制 Volar 接管 TypeScript 和 JavaScript 语言服务 - 确保项目根目录存在
tsconfig.json（哪怕只有{"compilerOptions": {}}），否则 TS Server 启动失败 - 在
settings.json中启用："typescript.suggest.autoImports": true和"javascript.suggest.autoImports": true - 如使用别名路径（如
@/components），需在tsconfig.json的compilerOptions.paths中正确定义，否则 import 推导失效
最易被忽略的其实是语言服务接管状态：Volar 的 takeOverMode 一旦没生效，后续所有校验、跳转、补全都会降级——哪怕配置全对，也只在表面跑通。
