WebStorm需开启失焦自动保存和修改标识才能避免代码丢失：勾选“Synchronize files on frame activation”并启用“Mark modified”，再配置“Actions on Save”实现格式化等操作。
WebStorm默认不自动把代码写入磁盘，改完文件后切到浏览器或终端，文件可能仍处于未保存状态，Git面板里持续显示“modified”，Ctrl+S又总被忘记——这会导致本地修改意外丢失或格式化不触发。
开启窗口失焦自动保存
这是最实用的自动保存方式：只要Alt+Tab切出WebStorm，所有已修改文件立刻落盘。
按 Ctrl+Alt+S（Windows/Linux）或 Cmd+, （macOS）打开设置 → 左侧依次展开 Appearance & Behavior → System Settings → Synchronization → 勾选 Synchronize files on frame activation。
这项功能独立于空闲保存，失焦瞬间即触发，且能联动Actions on Save里的格式化操作。若勾选后仍不生效，先检查 Mark modified 是否开启——否则你根本看不到文件是否真有改动。
设置空闲N秒后自动保存
适合长时间盯屏、不常切窗口的场景，作为失焦保存的补充兜底。
仍在同一设置路径（Appearance & Behavior → System Settings → Synchronization）→ 勾选 Save files automatically if application is idle for N seconds → 在输入框填数字，推荐填 3 或 5。
填0或留空会被WebStorm自动重置为30；填30以上基本等于没开。注意：空闲计时从最后一次键盘/鼠标操作起算，光标静止不动不算空闲。
确保未保存状态可见
方法一：启用tab蓝点标识
Settings → Editor → General → Editor Tabs → 勾选 Mark modified。有改动的文件tab右上角会出现蓝色圆点，一眼识别。
方法二：依赖Git着色（需已初始化仓库）
Project工具窗口中，已跟踪但未提交的文件名会变色（通常是蓝色），但前提是文件已被Git纳入管理，且未被.gitignore排除。
如果两项都关闭，你将完全无法判断哪些文件还没真正保存到磁盘——这是自动保存失效却浑然不觉的最常见原因。
配置保存时自动执行的操作
自动保存只是写磁盘，不等于格式化或校验。要让保存动作触发后续流程，必须单独配置：
Settings → Tools → Actions on Save → 勾选需要的项：
• Reformat code（先做，保证代码结构规范）
• Optimize imports（清理冗余导入）
• Run eslint --fix（需已安装ESLint插件并配置好本地环境）
Vue单文件组件中，template块的格式化依赖Vue.js插件启用；若插件被禁用或未安装，保存时该部分不会重排。项目根目录若有.prettierrc或eslint.config.js，WebStorm会自动读取规则，无需重复配置。
验证自动保存是否真实生效
第一步：新建一个空白.js文件，输入let a = 1 → 不保存 → 切到浏览器再切回WebStorm。
第二步：观察该文件tab右上角是否有蓝点消失；同时打开Terminal，执行git status，确认输出中不再出现modified字样。
第三步：在Settings → Tools → Actions on Save中已勾选Reformat code，此时再随意打几个空格→切出→切回，应看到代码自动对齐缩进。
若蓝点始终不消失，或git status持续报modified，说明Synchronize files on frame activation未生效，重点排查文件是否被外部程序独占锁定（如Windows资源管理器正预览该文件），此时Event Log底部会闪现“Cannot save file: Access is denied”但无弹窗提示。
