tslint says calls to console.log are not allowed - How do I allow this?

ReactjsTypescriptCreate React-AppTslint

Reactjs Problem Overview


I just started using create-react-app with typescript

create-react-app my-app --scripts-version=react-scripts-ts

and the default tslint.json configuration does not allow console.log().

How can I (for now) enable console.log?

The docs for this are at https://palantir.github.io/tslint/rules/no-console/. But they don't say where to put this line:

    "no-console": [true, "log", "error"]

I searched and found this tslint.json configuration file syntax, so I tried this:

"rules": {
    "no-console": [true, "warning"]
}

In an attempt to get log messages that would just be warnings. But that didn't work.

I've commented out the few console.log() lines I have but will want to be able to do this in the future.

Reactjs Solutions


Solution 1 - Reactjs

Add // tslint:disable-next-line:no-console in the line right before your calls to console.log to prevent the error message only once.

If you want to disable the rule entirely add the following to your tslint.json (most likely in your root folder):

{
    "rules": {
        "no-console": false
    }
}

Solution 2 - Reactjs

For those of you coming here with a mixed codebase of javascript and typescript.

You may need to define the 'no-console' option in jsRules, jslints rules object for javascript files, i.e. there are separate rules objects for javascript and typescript.

//tslint.json

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"], //Example... 
  "rules": {
    "no-console": false //Disable for typescript
  },
  "jsRules": {
    "no-console": false //Disable for javascript
  }
}

Solution 3 - Reactjs

Add the following to your tslint.json

{
   "rules": {
      "no-console": {
         "severity": "warning",
      } 
   }
}

Solution 4 - Reactjs

This is the correct syntax to define the no-console rule (or any other rule for that matter) but only with a warning rather than an error (obviously change the options to whatever you want)

"no-console": {
    "severity": "warning",
    "options": [
        "log",
        "error",
        "debug",
        "info",
        "time",
        "timeEnd",
        "trace"
    ]
},

Solution 5 - Reactjs

The way I handle tslint "no-console" rule is per file which I have found is convenient and isolated in the development phase.

As soon as I need to use the first console.log(); Visual Studio Code shows the option to add: > // tslint:disable-next-line: no-console > > console.log();

So here I just delete "-next-line" and this command will cover the entire file. > // tslint:disable: no-console > > console.log();

I hope it helps as an alternative to disable the feature for the entire app.

RON

Solution 6 - Reactjs

if // tslint:disable-next-line:no-console doesn't work try with // eslint:disable-next-line:no-console

Solution 7 - Reactjs

in typeScript version 3 update tslint.json under key rule like below:

"no-console": [
    true,
    "debug",
    "time",
    "timeEnd",
    "trace"
],

this way you just specify debug, time, timeEnd, trace to be not used, if in your default tslint "info" is in the list just remove it.

Solution 8 - Reactjs

According to the docs: https://eslint.org/docs/user-guide/getting-started#configuration

  • "off" or 0 - turn the rule off
  • "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
  • "error" or 2 - turn the rule on as an error (exit code will be 1)

By the way, your correct setup would be

{
  "rules": {
    "no-console": false
  }
}

Solution 9 - Reactjs

  {
    "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
    "linterOptions": {
        "exclude": [
            "config/**/*.js",
            "node_modules/**/*.ts",
            "coverage/lcov-report/*.js"
        ]
    },
    "rules": {
        "no-console": false
    },
    "jsRules": {
        "no-console": false
    }
 }

enter image description here

Solution 10 - Reactjs

The Syntax changed!

For the next-line exception there needs to be a space before no-console: // eslint-disable-next-line no-console.

For the file exception, it also has to be inside of the Multi-line comment syntax: /* eslint-disable no-console */.

It also might depend on certain configurations.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPatSView Question on Stackoverflow
Solution 1 - ReactjsChristian IvicevicView Answer on Stackoverflow
Solution 2 - ReactjsLee BrindleyView Answer on Stackoverflow
Solution 3 - ReactjsLiu XuanView Answer on Stackoverflow
Solution 4 - ReactjsLiran HView Answer on Stackoverflow
Solution 5 - ReactjsDomiserverView Answer on Stackoverflow
Solution 6 - ReactjsAdel BalbisiView Answer on Stackoverflow
Solution 7 - ReactjsalveomasterView Answer on Stackoverflow
Solution 8 - ReactjsloretoparisiView Answer on Stackoverflow
Solution 9 - ReactjsRashid IqbalView Answer on Stackoverflow
Solution 10 - ReactjsMikhailRatnerView Answer on Stackoverflow