ERROR: 'console is not defined. [no-undef] - Brackets

Question

I've installed brackets and currently playing around with variables and functions. All the outputs work fine in the console, however I keep getting this error in the editor.

How do I go about fixing this?

Komsa

Possible duplicate of Console.log error in Brackets – Monafo

I think it is a typo. Use console.log instead of Console.log – Geerts

Answer 1

The no-undef rule looks out for undefined variable, without any initial assumption on the environment and the global variables (console for instance).

You can specify that you are in an environment where console indeed exists, by adding browser and/or node envs in your .eslintrc:

  env: {
    browser: true,
    node: true,
  },

More info in the rule doc

Graminivorous

Thanks! Although I don't want to commit any console.log's in the app, it's nice to at least not have the error saying "console is undefined" while debugging small things. – Suspect

Answer 2

just to have comment:

/*global console*/

as the first line of your .js file, and then have:

// eslint-disable-line no-console

at the line of the console.log("");

this will make the error go away!

Trimble

or you can add these two lines to disable it completely in the whole .js file: /*global console*/ /* eslint no-console: "off" */ – Trimble

Answer 3

Since you have it as a Capitol C, I would guess that the editor thinks you're looking for a function or class. Try lowering it from Console.log() to console.log("john won...") and see if that works.

Alagez

Answer 4

I assume it's coming from no-console rule, which disallows calls to methods of the console object.

In JavaScript that is designed to be executed in the browser, it’s considered a best practice to avoid using methods on console. Such messages are considered to be for debugging purposes and therefore not suitable to ship to the client. In general, calls using console should be stripped before being pushed to production.

Examples of correct code for this rule:

/*eslint no-console: "error"*/

// custom console Console.log("Hello world!");

As a solution, you can add this to your set of rules in .eslintrc

rules: {
    'no-console': 'off'
}

Mustang

It seems to explicitly come from the no-undef rule, I don't think disabling no-console would help. – Graminivorous

Answer 5

This one was driving me crazy as well. You can edit Brackets' config JSON. It will remove the error icon from the left gutter:

{
  "brackets-eslint.gutterMarks": false
}

Reference: https://github.com/brackets-userland/brackets-eslint/blob/master/README.md

Maurya

Answer 6

Since ESLint ^v9.0.0 the config uses a new format, called flat config. The migration guide for changing to this new format can be found here. https://eslint.org/docs/latest/use/configure/migration-guide#configuring-language-options

In flat config, using env: Obj is no longer supported, instead you have to import the globals npm package and add it in your config like this.

const globals = require('globals');

export default [
    {
        languageOptions: {
            globals: {
                ...globals.node,
            }
        }
    }
];

Troche

Answer 7

add 'no-console' in rules object is inactive

Retina

Please add further details to expand on your answer, such as working code or documentation citations. – Populous

Answer 8

Amaury Liet's answer works with the old configuration system in ESLint; it doesn't work with the new configuration file introduced in v8.21.0 (which will become mandatory in v9).

Here's the modern way of solving this problem:

// eslint.config.js
import js from "@eslint/js";
import globals from "globals";

export default [
  js.configs.recommended,
  {
    files: ["src/**/*.js"],
    languageOptions: {
      globals: {
        ...globals.node,
      },
    },
  // ...
}

The idea is to use the globals package and pass it to the languageOptions.globals setting option in the new configuration file eslint.config.js.

Humeral

Answer 9

With eslint's new config system (the one that uses the eslint.config.js file), you should use the following code snipet:

import globals from "globals";

export default [
    {
        files: ["**/*.js"],
        languageOptions: {
            globals: {
                ...globals.browser,
            }
        }
    }
];

This has been described in the following blog: ESLint's new config system, Part 2

Euell

Isn't this the exact same answer as this one? – Brahmi

Answer 10

I think you should write "console.log" instead of "Console.log". It should be lowecase.

Geerts

Answer 11

This might seem like a special case, but deleting and recreating the .eslintrc file fixed this issue for me.

Monique