vscode imports import console = require("console"); automatically

Question

import console = require("console");

console. << I type . and above gets imported automatically in VScode. Anybody knows how to disable that?

(I assume it is one of my extensions. Probably Prettier.)

edit: it only happens in React Typescript environment. not in Typescript without react.

Answer 1

Disclaimer: this shouldn't be considered "the solution" but it's the simplest/fastest.

This answer is assuming you're using VSCode. Other IDEs should be similar.

1. Start typing console
2. Click enter or type ., allowing IntelliSense to add import console = require("console");
3. Ctrl+click (or F12, or Cmd+click on macOS) on require("console")
4. Comment out this code:

declare module "console" {
    export = console;
}

Answer 2

I experienced this as well an it seems to be a problem with the Auto Import feature in VSCode. Disabling all extensions doesn´t seem to make it go away either.

As a workaround you can disable autoimports in settings.

If you use Javascript

"javascript.suggest.autoImports": false

If you use Typescript

"typescript.suggest.autoImports": false

EDIT: The faulty autoimport occurs because of this code in a package down the dependency tree

declare module "console" {
    export = console;
}

The package can be located in either your local node_modules directory or in a referenced package installed globally.

1. Search your local node_modules for declare module "console"
2. If you find it in a local package, run npm list [packageName] to determine which package in package.json is dependent on the package with the console code in it.

If you don´t find code in your local node_modules you could either

1. Eliminate packages one by one in package.json

2. Search for the console code in globally installed modules which may be referenced by packages in your project

%USERPROFILE%\AppData\Roaming\npm\node_modules %USERPROFILE%\AppData\Local\Microsoft\TypeScript

I know it´s not a straight forward solution but I hope it helps, in my case I had a reference from react-native-copilot -> rimraf -> node which had the console code in it. Removing react-native-copilot solved the problem.

Answer 3

The most elegant solution that I found is to create dummy console.d.ts file somewhere in your project:

declare module 'console' {
    export = typeof import("console");
}

This will prevent auto-importing.

Credits: https://github.com/Microsoft/TypeScript/issues/30471#issuecomment-474963436

Answer 4

If you add a snippet for inserting console.log and use that instead, there will be no auto-import of "console"

https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets

here is my snippet:

{
    "Print to console": {
        "prefix": "cl",
        "body": [
            "console.log('$1');",
        ],
        "description": "Log output to console"
    }
}

Answer 5

If you like me forgets "cl", you can use multiple prefixes in snippets:)

{
    "Print to console": {
        "prefix": ["cl","co","con","cons","conso","consol","console", "console.l","console.lo","console.log"],
        "body": [
            "console.log($1);",
        ],
        "description": "Log output to console"
    }   
}

Answer 6

One solution could be "editor.snippetSuggestions": "top", in settings. And to have console.log snipped defined, obviously.

Answer 7

One way to prevent this from happening is to modify your tsconfig.json file to limit the set of types that are automatically imported into your project.

I had this same problem, and I fixed it by adding:

types: []

into my tsconfig.json file. What this does is disable's TypeScript (and by extension VSCode) from automatically importing all node packages that being with @types/ into the project configuration. This doesn't prevent TS from importing those type definitions if you explicitly import a package using those types.

In my specific case, the console definition was coming from @types/node, which had been imported into the project as a dependency of Storybook. However, my project was a webpack project, intended to run in a browser, so importing Node.js types into my source code made no sense. The base set of types that you would want to use in a browser are dom types, not node types.

Depending on your project, you may have to explicitly add the set of base type packages into the types parameter (types: ["dom", "react"] and so on). However, in my case this turned out to be unnecessary, my project was able to compile just fine with an empty list. And the tendency of VSCode to automatically import 'console' appears to have completely gone away; I haven't noticed any other ill effects so far.

More information on setting types in tsconfig.json here: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html