Best way to ensure no console.log on precommit?

[ggregoire]

Question

Since we can't update the ESLint config without ejecting, I'm curious how people achieve this?

Run something like detect-log with Husky?

[bugzpodder]

Can you elaborate a little bit more on your question?

[ggregoire]

With Husky and Lint-staged, you can run commands with a precommit hook, for example Prettier, Flow, ESLint, etc. In doing so, if you have a Flow or ESLint error in your code, Husky will block the commit process. I do it inside projects bootstrapped with CRA and it works pretty well.

Now I'd like to block the commit process if there are remaining console.log in the code.

The easiest way would be to add https://eslint.org/docs/rules/no-console to the ESLint config. But we can't edit this config without ejecting. So I'm wondering how people achieve this.

[bugzpodder]

Sure, its actually fairly simple:

1. create .eslintrc.json in your cra app directory:
   Here is mine:

{
  "env": {
    "browser": true,
    "es6": true,
    "jest": true,
    "node": true
  },
  "extends": ["eslint:recommended", "plugin:flowtype/recommended", "plugin:react/recommended"],
  "parser": "babel-eslint",
  "parserOptions": {
    "allowImportExportEverywhere": false,
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true,
      "jsx": true
    },
    "sourceType": "module"
  },
  "plugins": ["flowtype", "react"],
  "rules": {
    "brace-style": ["error", "1tbs", { "allowSingleLine": true }],

2. Install the same version of eslint as create-react-app:

 "devDependencies": {
    "babel-eslint": "8.2.1",
    "eslint": "4.19.1",

3. add the appropriate precommit hooks:

"lint-staged": {
    "concurrent": false,
    "linters": {
      "src/**/*.{js,jsx}": [
        "prettier --write",
        "eslint --fix",
        "git add"
      ],

[miraage]

@bugzpodder, I see no fix option for no-console rule.

https://eslint.org/docs/rules/no-console

compare to

https://eslint.org/docs/rules/semi

[bugzpodder]

Yes, it will not automatically fix it. So if you left out a console.log in your code, precommit with eslint --fix will fail if you have the no-console enabled and the developer needs to manually addreess it by removing it or add an eslint-ignore comment.

This should address the author's intent of blocking commits with console.log. The --fix option is meant to address the other most common issues.

[ggregoire]

@bugzpodder It sounds good. Let me try it then I'll close the issue. :)