WebStorm中Vue项目自动保存和自动格式化的设置-webstorm-PHP中文网

webstorm保存时不会自动格式化，必须手动开启：在settings > tools > actions on save中勾选reformat code，并取消勾选“only if file is physically modified”；同时需配置code style从eslint加载规则，并启用synchronize files on frame activation实现失焦自动保存。

webstorm中vue项目自动保存和自动格式化的设置

WebStorm 保存时不会自动格式化，必须手动开启

默认按 Ctrl+S 只是把内存内容写入磁盘，不触发任何格式化或 ESLint 修复。你看到“代码没变”“单引号没转双引号”，不是插件失效，而是根本没开开关。

路径：Settings > Tools > Actions on Save，勾选 Reformat code
务必取消勾选下方的 Only if file is physically modified——否则编辑器认为“只是光标动了”，跳过格式化
Vue 单文件组件中，<template></template> 块是否被格式化，取决于 Editor > Code Style > Vue.js 是否启用；若该语言配置未激活，<template></template> 部分将完全忽略
如果项目用了 TypeScript，还要确认 Editor > Code Style > TypeScript 已配置，否则 <script lang="ts"></script> 不生效

ESLint 规则不会自动同步到格式化引擎

开了 Reformat code，但缩进还是 4 空格、分号还是没加？因为 WebStorm 默认 JS 格式化规则和你的 .eslintrc.js 是两套系统，不绑定就各干各的。

Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

操作路径：Settings > Editor > Code Style > JavaScript（或 TypeScript/Vue.js）→ 点右上角齿轮 → Set from… > ESLint
前提：ESLint 插件已启用，且 Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint 中显示绿色对勾
若用 ESLint v9+ 的扁平配置（eslint.config.js），需在 Extra ESLint options 中填 --flag unstable_ts_config，否则 Set from ESLint 会静默失败
.eslintrc.json 中的 overrides 对 Vue 文件无效——WebStorm 不解析该字段匹配 .vue，必须用 .eslintrc.js 或 .eslintrc.cjs

想保存即运行 `eslint --fix`，别信“Run eslint --fix”选项

Actions on Save 里的 Run eslint --fix 是个假入口：WebStorm 官方从未实现该功能，勾了也没反应。真能稳定工作的只有 File Watchers。

路径：Settings > Tools > File Watchers > + > Custom Program
Program：Windows 填 $ProjectFileDir$/node_modules/.bin/eslint.cmd，macOS/Linux 填 $ProjectFileDir$/node_modules/.bin/eslint
Arguments：固定写 --fix $FilePath$（只修当前文件，避免误改其他）
Output paths to refresh：填 $FilePath$ ，否则 WebStorm 不知道文件已被修改，不会重载视图
勾选 Auto-save edited files to trigger watcher 和 Trigger the watcher on external change

自动保存本身也得手动开，且依赖视觉反馈

很多人配好了格式化，却还是“改完切出去就丢代码”，问题不在格式化，而在文件根本没落盘——WebStorm 默认不自动保存。

失焦保存最实用：Settings > Appearance & Behavior > System Settings > Synchronization → 勾选 Synchronize files on frame activation（Alt+Tab 切出即保存）
空闲保存作兜底：同页面勾选 Save files automatically if application is idle for N seconds，填 3 或 5（填 0 或留空会被重置为 30）
没开 Mark modified，你就看不到哪个文件没保存：Settings > Editor > General > Editor Tabs → 必须勾选
Git 颜色提示不可靠：仅对已 git add 过的文件生效；.gitignore 排除的文件，无论改多少次都不会变色

真正起效的组合是：失焦自动保存 + Reformat code + Set from ESLint + File Watcher 调用本地 eslint --fix。其中任意一环断掉，比如 eslint 可执行文件路径指向全局、或 .eslintrc.js 里漏了 plugin:vue/vue3-essential，Vue 模板部分就会彻底“躺平”。