142

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.

Lee Brindley
  • 6,242
  • 5
  • 41
  • 62
PatS
  • 8,833
  • 12
  • 57
  • 100

12 Answers12

278

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
    }
}
Christian Ivicevic
  • 10,071
  • 7
  • 39
  • 74
  • 8
    I'm not sure what happened but now "no-console": false is not working for me. I've found a work around is to put `// tslint:disable:no-console` at the top of the file. – PatS Apr 26 '18 at 17:07
  • 10
    "no-console": false works for me, but I have to restart "npm start" for it to take effect. – jlb May 21 '18 at 19:56
  • 2
    `"no-console": false` doesn't work for me, even with `npm run start`. – Eric Fulmer May 22 '18 at 18:16
  • 18
    @EricFulmer put that in the "jsRules" node. "jsRules": { "no-console": false }, – billb May 25 '18 at 16:26
  • I added the rule to `jsRules` and did a fresh `yarn start` before the errors went away. Not sure which one of those did it. – Byron Wall Jun 01 '18 at 20:26
  • 2
    or in the same line as the following: `console.log('hello world'); // tslint:disable-line:no-console` – Sergei Kovalenko Jan 03 '20 at 10:46
  • 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 */``` – MikhailRatner May 03 '22 at 14:54
38

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
  }
}
Lee Brindley
  • 6,242
  • 5
  • 41
  • 62
  • 1
    but -- what is the purpose of this thing? – roberto tomás Jun 13 '19 at 14:33
  • Of jsRules, or no-console? – Lee Brindley Jun 13 '19 at 15:01
  • 1
    no-console -- it seems (I looked it up) that it is there only to warn you that console messages don't belong in production code. That kinda makes it a questionable rule any time your env is not prod – roberto tomás Jun 13 '19 at 15:38
  • I see your point, to a degree. One thing to consider is that console is not part of the javascript language, it's usually implemented in javascript engines, that's the point though - it's not part of the javascript language, you're baking a dependency into your code that may or may not exist. With that said, I can see a use for this rule. – Lee Brindley Jun 13 '19 at 18:42
  • 2
    @robertotomás, This rule is based on the best practice of not having console.log messages in your code. Production code should not have this, so this lets you know your not prod ready. You might have two tslint configurations one that allows it and another that does not. I have a `logger.info` function that calls `console.log` (so a wrapper) which allows me to easily enable or disable logging for the entire app. I'm not saying this is best practice, just something that I've done. It also makes it easier to integrate with another logger like https://github.com/krakenjs/beaver-logger. – PatS Aug 13 '19 at 18:16
  • @robertotomás Years back when people still used IE a `console.log()` in your code would cause javascript to stop executing (crash) on that line. This is because IE treats `console.log()` as an error unless the developer tools are open. Of course, I don't know anyone who still use IE so these days it's just a matter of style/taste/opinion IMHO – slebetman Jun 10 '22 at 03:15
10

Add the following to your tslint.json

{
   "rules": {
      "no-console": {
         "severity": "warning",
      } 
   }
}
Liu Xuan
  • 119
  • 1
  • 3
8

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"
    ]
},
Liran H
  • 9,143
  • 7
  • 39
  • 52
8

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

Community
  • 1
  • 1
Domiserver
  • 441
  • 6
  • 11
4

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

Adel Balbisi
  • 106
  • 3
2

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.

alveomaster
  • 1,681
  • 2
  • 12
  • 21
2

Just a dirty hack to bypass linter:

const { log } = console; log('Hello linter'); // TODO: remove
gazdagergo
  • 6,187
  • 1
  • 31
  • 45
0

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
  }
}
loretoparisi
  • 15,724
  • 11
  • 102
  • 146
0
  {
    "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

Rashid Iqbal
  • 1,123
  • 13
  • 13
0

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.

MikhailRatner
  • 452
  • 6
  • 13
0

For those coming here looking for a way to keep console.log as disallowed, but to allow helpful methods like console.time and console.timeEnd, for example, you can explicitly define it globally in your .eslintrc rules:

 "no-console": ["error", {"allow": ["time", "timeEnd", "trace"]}],
Wes
  • 467
  • 3
  • 11