15

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

Álvaro González
  • 142,137
  • 41
  • 261
  • 360
SmxCde
  • 5,053
  • 7
  • 25
  • 45

4 Answers4

12

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.

Pavel
  • 3,967
  • 2
  • 29
  • 35
  • 1
    Setting, `typescript.preferences.includePackageJsonAutoImports` to `on` seemed to do the trick for me but only for tsx files. JSX files don't seem to work. – Ariel Frischer Jan 22 '21 at 22:53
  • Yeah, setting `typescript.preferences.includePackageJsonAutoImports` also fixed it for me. The default is 'auto', which has the comment: ` auto: Search dependencies based on estimated performance impact.`. So possibly when things get a bit slow it gets disabled, therefor restarting your computer will likely help! – DanV Nov 22 '22 at 09:46
0

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...

Nicolas Bouvrette
  • 4,295
  • 1
  • 39
  • 53
0

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.

Farouk.ch
  • 71
  • 7
0

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

astr
  • 473
  • 1
  • 3
  • 13