如何批量移除React应用中的console.log与debugger及配置ESLint规则

一、批量清除现有console.log与debugger #

不用手动逐条删除，以下两种自动化方式可以快速处理：

1. 编辑器全局正则替换 #

• 打开VS Code（或其他支持正则替换的编辑器），按Ctrl+Shift+F打开全局搜索面板
• 搜索正则表达式 console\.log\(.*\);?，替换为空，可匹配所有带/不带分号的console.log语句
• 同样搜索 debugger;?，替换为空，清除所有debugger语句
• 替换前建议先预览匹配结果，避免误改其他代码

2. 构建阶段自动清除（不修改源码） #

如果希望保留源码中的调试语句，只在生产构建时自动移除，可使用Babel插件：

• 安装依赖：npm install babel-plugin-transform-remove-console babel-plugin-transform-remove-debugger --save-dev
• 在项目的babel.config.js（或.babelrc）中配置：

module.exports = {
  presets: ['react-app'],
  env: {
    production: {
      plugins: [
        'transform-remove-console',
        'transform-remove-debugger'
      ]
    }
  }
};

此配置仅在生产环境构建时生效，开发环境仍保留调试语句不影响开发。

二、用ESLint阻止新增console.log与debugger #

通过开启ESLint规则，可以在开发或代码提交阶段直接报错，阻止这类语句出现：

1. 启用ESLint内置规则 #

在项目的.eslintrc.js（或其他ESLint配置文件）中添加规则：

module.exports = {
  rules: {
    'no-console': 'error', // 禁止所有console语句，设为error会中断编译
    'no-debugger': 'error' // 禁止debugger语句
  }
};

如果需要区分环境（开发环境允许调试，生产环境严格禁止），可配置：

module.exports = {
  env: {
    development: {
      rules: {
        'no-console': 'warn',
        'no-debugger': 'warn'
      }
    },
    production: {
      rules: {
        'no-console': 'error',
        'no-debugger': 'error'
      }
    }
  }
};

2. 结合Git钩子强制检查 #

为避免这类语句被提交到代码仓库，可使用husky+lint-staged在提交前自动检查：

• 安装依赖：npm install husky lint-staged --save-dev
• 在package.json中添加配置：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx}": ["eslint", "git add"]
  }
}

这样每次提交代码时，ESLint会自动检查，若存在console.log或debugger会直接报错，阻止提交。

内容的提问来源于stack exchange，提问作者Asad Gulzar