CODEWITHSUNDEEP
typescriptvisual-studio-code
SmxCde
SmxCde

Reputation: 5403

Visual Studio Code - Auto Imports / Quick Fix does not work

My VS Code does not auto-import stuff from node_modules.

I've tried to make it work on two PCs and one Mac - the result is the same: No suggestions to import as I type, no options when I focus on a symbol and pressing Ctrl+./Cmd+. - no quick fix suggestions.

I tried to install Auto Import extension - no suggestions.

I read this release notes post about "Add all missing imports" and tried to apply the shortcut - no luck, it does not do anything.

At this point I am completely lost, I see many posts where people ask the same and people suggest them to use Quick Fix by pressing Ctrl+. but as you can see on the screenshot - it does not have any suggestions.

I am using TypeScript but I also tried this with JS - no luck.

On the screenshot I am running my app in WSL but I also tried native run on both Windows and macOS.

Any ideas? Thanks!

Quick Fix Does not suggest to import

Upvotes: 19

Views: 45651

Answers (6)

silva yan
silva yan

Reputation: 1

if your project is using react with jsx, you can add a jsconfig.json file to the root of the project,it is work for me

    {
    "compilerOptions": {
        "jsx": "preserve",
        "module": "NodeNext",
        "moduleResolution": "NodeNext",
        "checkJs": true
    },
    "exclude": ["node_modules", "**/node_modules/*"]
}

Upvotes: -1

MadeOfAir
MadeOfAir

Reputation: 3163

My Javascript support was basically dead in vscode, except maybe for syntax highlighting. Adding a basic jsconfig.json file to the root of the project worked for me:

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6"
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

Upvotes: 2

astr
astr

Reputation: 963

For me, adding "typescript.preferences.includePackageJsonAutoImports": "on" to settings.json (or in preferences > settings > Typescript > preferences: Include Package JSON Auto Imports - on instead of auto) worked

Upvotes: 9

Farouk.ch
Farouk.ch

Reputation: 81

Make sure to enable the built-in VS Code extension "TypeScript and JavaScript Language Features". Go to Extensions, in the search filed, type "@builtin" and Scroll until you find it. Worked for me.

Upvotes: 1

Nicolas Bouvrette
Nicolas Bouvrette

Reputation: 4747

For those who might still not have found what is going on, if you added // @ts-nocheck on top of your file, this might also disable the import "Quick fix" while the auto-complete feature will keep working...

Upvotes: 1

Pavel
Pavel

Reputation: 4217

It appears that until recently (before TypeScript 4 release) the only way to make auto-imports work was to import each library you need at least once in your project (does not matter where). After that VS Code supposed to start auto-import stuff from them.

Starting TS 4 the VS Code suppose to start doing it automatically (more concrete - auto-include from all the libraries specified in your package.json), though I've noticed that it uses the wrong paths to the code while importing - to the /dist/ folders as opposed to whatever a library exposes. As a result, Node.js might not be able to resolve and execute them. I've created an issue here

Note that in order this to work at all

  • Make sure your VS Code uses TS 4.0.2 or greater (as shown in the bottom right corner, click it to change)
  • You may need to set setting typescript.preferences.includePackageJsonAutoImports to on, because it your imports list exceeds 10 dependencies - it may/won't not scan them. See release notes for the details.

The bottom line - in order it to work correctly at the moment you still need to import (by hand) a new dependency in your code (anywhere) at least once and then VS Code auto-import will start working for that lib.

Upvotes: 19

Related Questions