WebStorm如何配置每次提交代码前自动清除所有console.log语句

架构老林

2026-10-18

WebStorm配置提交代码自动清理console.log教程

方案1：ESLint 配合WebStorm内置提交检查（推荐）

该方案可灵活控制规则，支持跳过指定console语句

第一步：项目安装ESLint依赖
终端执行命令：
npm install eslint --save-dev
第二步：配置ESLint规则
在项目根目录的.eslintrc.js（没有就新建）中添加规则：
```
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  rules: {
    // 将no-console规则设为错误级别，自动修复时会删除console.log
    "no-console": ["error", { allow: ["error", "warn"] }]
  }
}
```
上面配置里的allow字段可指定保留的console类型，示例中会保留console.error、console.warn，仅删除console.log
第三步：配置WebStorm提交前自动执行ESLint修复
按快捷键Ctrl+K（Windows）/ Command+K（Mac）唤出提交窗口，点击窗口右上角的齿轮设置图标，在「提交前」选项组中勾选「运行ESLint修复」，保存配置即可。
后续每次提交代码时，WebStorm会自动运行ESLint修复逻辑，清理所有符合规则的console.log，遇到无法自动修复的场景会直接阻止提交，提示你手动处理。

不需要调整IDE配置，所有使用该项目仓库的用户都会生效

第一步：安装所需工具依赖
终端执行命令：
npm install husky lint-staged remove-console --save-dev
第二步：初始化Git钩子配置
依次执行以下命令：
npx husky install
npx husky add .husky/pre-commit "npx lint-staged"
第三步：在package.json中添加清理规则
打开项目根目录的package.json，追加如下配置：
```
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,vue}": [
      "remove-console --exclude error,warn",
      "git add"
    ]
  }
}
```
配置完成后，不管是用WebStorm的图形化提交功能，还是命令行提交，都会自动清理提交文件中的console.log。