webstorm 的 gui 提交默认不触发 .git/hooks/pre-commit，因其使用 jgit 而非系统 git；需通过 file watchers 配置 eslint 并勾选“before commit → run file watchers”来实现提交前校验。
WebStorm 里 pre-commit 不生效？先确认它根本没被调用
WebStorm 默认不执行 .git/hooks/pre-commit，哪怕你手动写好了脚本、加了可执行权限，点 Commit 按钮也不会触发它。这是最常被误解的一点：WebStorm 的「提交检查」（比如「重新格式化代码」「优化 import」）和 Git Hooks 是两套机制，互不感知。
常见错误现象：
– 写好 pre-commit 脚本并测试通过（终端里 git commit 能拦住问题），但 WebStorm 点 Commit 却直接成功；
– WebStorm 提交窗口右下角点了 Ctrl+Alt+O 打开高级选项，勾了「重新格式化代码」，误以为这就是在跑 ESLint。
- WebStorm 的内置提交检查只做三件事：
Reformat code、Optimize imports、Rearrange code，不运行任何外部命令或脚本 - 要让 WebStorm 触发
pre-commit，必须绕过它的原生提交流程，改用终端命令提交，或通过配置让 WebStorm 将提交委托给 shell - 如果你依赖
husky，注意它默认只在终端中生效；WebStorm GUI 提交不会加载 Node.js 环境变量，husky的 hook 很可能静默失败
想在 WebStorm 点 Commit 就跑 ESLint？得靠 File Watchers + 外部工具联动
这不是“开启某个开关”就能搞定的事，而是要把代码检查变成 WebStorm 能感知的“保存时动作”，再让它和 Git 提交绑定。核心思路是：把 ESLint 当作一个文件监听器（File Watcher），在每次提交前强制触发一次校验。
- 安装
eslint和eslint-plugin-prettier到项目本地：npm install eslint eslint-plugin-prettier --save-dev - 在 WebStorm 中打开
Settings > Tools > File Watchers，点击+添加新 watcher - 选
ESLint模板，关键设置项：
–Program: 填你项目中node_modules/.bin/eslint的绝对路径（别用全局eslint，WebStorm 可能找不到）
–Arguments:--fix $FilePath$（加--fix才能自动修）
–Working directory:$ProjectFileDir$
– 勾选Trigger watcher regardless of syntax errors，否则语法错就停了 - 然后在
Version Control > Commit > Before Commit区域，勾选Run File Watchers—— 这才是让提交前真正跑 ESLint 的关键一步
用了 husky + lint-staged，为什么 WebStorm 还是跳过检查？
因为 husky 的 pre-commit 是通过 Git 的 hook 机制注册的，而 WebStorm 的 GUI 提交（即点击 Commit 按钮）默认走的是 JGit 实现，不调用系统 Git 二进制，也就不会触发 husky 注册的 hook。
- 验证方式：在 WebStorm Terminal 里执行
git commit -m "test"，看是否触发 lint；如果能，说明 husky 配置本身没问题 - 临时解法：在 WebStorm 提交窗口右下角点
Ctrl+Alt+O→ 勾掉所有「提交检查」→ 改用 Terminal 提交，确保流程可控 - 长期建议：放弃让 WebStorm GUI 兼容 husky，转而统一用 CLI 提交；或者彻底移除 husky，用上一节的 File Watchers 方案，更贴合 WebStorm 原生逻辑
- 注意
lint-staged的 glob 模式（如*.{js,jsx,ts,tsx}）在 WebStorm File Watcher 里不生效，必须靠 watcher 自身的文件类型过滤来控制范围
提交失败后看不到具体 ESLint 错误？调整输出和错误捕获方式
WebStorm 的 File Watcher 在出错时只显示「Exit code 1」，不展示 ESLint 的详细报错行号和规则名，排查效率极低。
- 在 File Watcher 的
Arguments里加上--color --format=compact，让输出带颜色和行号 - 取消勾选
Auto-save edited files to trigger the watcher，否则保存即格式化，掩盖真实提交时的问题 - 如果 ESLint 报
Cannot find module 'eslint-config-airbnb'，说明 WebStorm 没正确识别项目node_modules：在Settings > Languages & Frameworks > Node.js and NPM中，把Node interpreter设为项目根目录下的node_modules/.bin/node或明确指定package.json所在路径 - 对 TypeScript 项目，务必在
eslintrc中启用parserOptions.project，否则no-unused-vars等类型相关规则不会触发
真正的难点不在写脚本，而在让 WebStorm 的 GUI 流程和 Git 的底层机制对齐——它不是 IDE 不支持，而是两套模型默认不互通。每次以为“就差一步”，其实那一步恰恰要绕开 GUI 提交本身。
