如何在React项目中创建全局自定义console.log处理程序规避ESLint报错

方法一：挂载到全局window对象（最简便） #

该方法无需额外配置ESLint，也不需要每个文件导入，全项目可直接调用：

1. 在React项目入口文件（通常为src/index.jsx/src/main.jsx/src/index.tsx）顶部添加如下代码：

// 全局自定义打印方法，首字母大写不会触发ESLint的no-console规则
window.Console = {
  // 完全透传原生console的所有参数，功能和原生完全一致
  log: (...args) => console.log(...args),
  // 可按需扩展其他console方法
  error: (...args) => console.error(...args),
  warn: (...args) => console.warn(...args)
}

如果需要生产环境自动禁用打印，可优化为环境判断版本：

const isDev = process.env.NODE_ENV === 'development'
window.Console = {
  log: isDev ? (...args) => console.log(...args) : () => {},
  error: isDev ? (...args) => console.error(...args) : () => {},
  warn: isDev ? (...args) => console.warn(...args) : () => {}
}

2. TypeScript项目额外配置类型声明：
   在全局类型文件（如src/global.d.ts或src/vite-env.d.ts）中添加以下代码，避免类型报错：

declare global {
  interface Window {
    Console: {
      log: (...args: any[]) => void
      error: (...args: any[]) => void
      warn: (...args: any[]) => void
    }
  }
}
export {}

由于我们自定义的打印对象名为首字母大写的Console，和原生小写的console属于完全不同的标识符，ESLint默认的no-console规则只会检测原生console的调用，因此上述实现天然不会触发ESLint报错。配置完成后所有组件/文件中可直接调用Console.log(xxx)，和原生console.log功能完全一致。

方法二：全局变量注入（不挂载window） #

如果不想污染window对象，可通过构建工具配置全局变量注入：

1. 先封装打印方法到单独文件src/utils/console.js：

const CustomConsole = {
  log: (...args) => console.log(...args),
  error: (...args) => console.error(...args),
  warn: (...args) => console.warn(...args)
}
export default CustomConsole

2. 配置构建工具全局注入：

• Vite项目在vite.config.js中添加：

import { defineConfig } from 'vite'
export default defineConfig({
  define: {
    Console: JSON.stringify(require('./src/utils/console.js'))
  }
})

• Webpack项目（含CRA eject后的项目）在webpack配置中添加：

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      Console: path.resolve(__dirname, 'src/utils/console.js')
    })
  ]
}

注意：该方法需要同步在ESLint配置中添加Console为全局变量，避免ESLint报未定义错误，在.eslintrc.js的globals字段添加Console: "readonly"即可

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