vscode自动保存需设为onfocuschange或afterdelay，禁用默认off；vue项目应启用volar takeovermode并交由其接管formatonsave，同时协调prettier与eslint执行顺序，远程开发时优先改用afterdelay模式。
VSCode 的自动保存本身不感知 Vue，但和 Volar、Prettier、ESLint 配合不当，反而会导致保存卡顿、格式错乱、甚至代码被意外重写。
files.autoSave 必须设为 onFocusChange 或 afterDelay，不能留默认 off
默认 off 意味着每次改完都得手动按 Ctrl+S，对 Vue 组件高频修改场景极不友好。实际项目中建议优先选 onFocusChange：切出编辑器（比如点终端、切标签页）就保存，既避免遗忘，又不会像 afterDelay 那样在打字中途误触发。若坚持用 afterDelay，务必同步设置 files.autoSaveDelay（例如 750），否则默认 0 延迟会高频刷盘，尤其在 .vue 文件含大量模板时，Volar 语言服务器可能跟不上。
Volar 的 takeOverMode 开启后，editor.formatOnSave 必须交给它管
启用 Volar 的 takeOverMode（推荐 Vue 3 项目必开）后，VSCode 原生的 JavaScript/TypeScript 格式化器会退场。此时若还保留 editor.formatOnSave: true 且没配 Volar 的格式化后端，保存时会出现“无反应”或“只格式化 script，不碰 template”的情况。正确做法是：
- 确保
editor.formatOnSave设为true - 删掉所有关于
javascript.format.*或typescript.format.*的覆盖配置 - 让 Volar 自动接管 —— 它会根据
<script setup></script>语法调用正确的 TS/JS 格式器，同时用内置规则处理<template></template>
常见错误：同时装了 Volar 和旧版 Vetur，或没禁用 Vetur，导致格式化逻辑打架，保存后 <template></template> 缩进全乱。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
Prettier 和 ESLint 在保存时的执行顺序很关键
Vue 项目里 Prettier 负责风格（空格、引号、换行），ESLint 负责逻辑规范（如 ref 是否解构、defineProps 类型是否声明）。两者都设成保存时运行，必须明确谁先谁后，否则容易出现“Prettier 格式完，ESLint 又加个分号，再保存又删掉”的循环。推荐配置：
-
editor.formatOnSave开启，由 Prettier 执行主格式化 -
eslint.codeActionsOnSave.mode设为all（不是problems），确保 ESLint 的 auto-fix 在格式化后立刻跑一遍 - 禁用
eslint.autoFixOnSave（已废弃，仅兼容旧配置） - 确认项目根目录有
.prettierrc和.eslintrc.cjs，且 Prettier 规则不和 ESLint 冲突（例如都设singleQuote: true）
典型翻车点：prettier.semi: false 但 eslint.rules['semi'] = ['error', 'never'] 没配，保存后 ESLint 强制加分号，Prettier 下次保存又删掉，光标反复跳。
远程开发（WSL / SSH）下 files.autoSave 容易静默失效
在 WSL 中打开位于 /mnt/c/ 的 Vue 项目时，onFocusChange 可能不触发保存——因为 Windows 文件系统通知在 WSL 内核层被延迟或丢弃。这不是插件问题，而是跨文件系统事件监听的固有限制。解决办法只有两个：
- 把项目移到 WSL 原生路径（如
~/my-vue-app），files.autoSave行为立即恢复正常 - 改用
afterDelay并把files.autoSaveDelay提高到1500以上，容忍网络/IO 延迟
别试图用 files.watcherExclude 去“修复”，它只会让问题更隐蔽：看起来保存了，其实磁盘上还是旧内容，热更新（HMR）会拉取错误版本，调试时怀疑人生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
