Best way to ensure no console.log on precommit? #4684

Activity

1. bugzpodder commented on Jun 26, 2018

   

   bugzpodder

   on Jun 26, 2018

   More actions

   Can you elaborate a little bit more on your question?
2. ggregoire commented on Jun 26, 2018

   

   ggregoire

   on Jun 26, 2018

   Last edited by ggregoire

   Author

   More actions

   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.
3. bugzpodder commented on Jun 27, 2018

   

   bugzpodder

   on Jun 27, 2018

   More actions

   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"
         ],
   

   👍React with 👍1Reacted by Enrico Lamperti
4. miraage commented on Jun 27, 2018

   

   miraage

   on Jun 27, 2018

   More actions

   @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

   👍React with 👍1Reacted by Enrico Lamperti
5. bugzpodder commented on Jun 27, 2018

   

   bugzpodder

   on Jun 27, 2018

   Last edited by bugzpodder

   More actions

   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.
6. ggregoire commented on Jun 30, 2018

   

   ggregoire

   on Jun 30, 2018

   Author

   More actions

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

   closed this as completedon Jul 23, 2018
8. lock

   locked and limited conversation to collaborators on Jan 18, 2019