React JS项目中如何在终端提示console.log使用警告？ESLint配置无效

先检查ESLint配置文件是否正确 #

确认你的ESLint配置文件（比如.eslintrc.js、.eslintrc.json或package.json里的eslintConfig字段）是否正确配置了no-console规则：

• 若使用.eslintrc.js，配置示例如下：

module.exports = {
  rules: {
    "no-console": "warn" // 写数字2也等价于warn
  }
};

• 注意：如果项目使用了eslint-config-react-app这类预设配置，可能会覆盖自定义规则，需明确将no-console规则写在配置中确保优先级。

确认编译流程中ESLint已被触发 #

使用react-scripts的React项目，默认开发模式会自动运行ESLint，但需确保配置正确：

• 检查package.json的eslintConfig字段，是否添加了"extends": ["react-app"]来继承React默认ESLint配置，再叠加你的no-console规则，这样才能保证规则生效。

排查是否忽略了源码文件 #

查看.eslintignore文件，确认没有将源码目录（比如src/）加入忽略列表。如果源码被忽略，ESLint不会检查其中的console.log，自然不会抛出警告。

检查ESLint依赖是否完整 #

依赖缺失可能导致规则不生效，重新安装相关依赖：

npm install eslint eslint-plugin-react --save-dev

未 eject 的create-react-app项目内置了ESLint，但eject后的项目需手动确认依赖是否齐全。

重启开发服务器 #

修改ESLint配置后，必须重启npm start的开发服务器，新配置才能生效。

进阶：强制提交前检查（彻底限制提交） #

若要完全阻止开发者提交含console.log的代码，可配合husky和lint-staged在提交前自动检查：

1. 安装依赖：

npm install husky lint-staged --save-dev

2. 在package.json中添加配置：

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

这样每次提交代码前，ESLint会自动检查，若存在console.log会抛出警告；若将no-console设为"error"（即数字1），还能直接阻止提交。

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