Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 436
SmxCde Avatar asked Aug 18 '20 23:08

SmxCde


People also ask

How do I import code into Visual Studio Code quick?

Automatically finds, parses and provides code actions and code completion for all available imports. Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter. Auto Import. Automatically finds, parses and provides code actions and code completion for all available imports.

How to fix the error XXXX is not imported?

Hover over error and wait for the popup to appear, click Quick Fix, select import xxxx by clicking, does nothing Hover over error and wait for the popup to appear, click Quick Fix, select import xxxx by using arrows and enter keys, does nothing

How to enable auto-imports in VSCode?

Then, with a typescript file open in vscode, click the typescript version number in the lower right-hand corner. When the options at the top appear, choose "use workspace version", then reload vscode. Now auto-imports should work. Show activity on this post. Set Check JS settings flag works for me. Show activity on this post.

How do I view quick fixes and refactorings in Code action?

Clicking on the Code Action lightbulb or using the Quick Fix command Ctrl+. will display Quick Fixes and refactorings. If you'd just like to see refactorings without Quick Fixes, you can use the Refactor command ( Ctrl+Shift+R ).


1 Answers

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.

like image 136
Pavel Avatar answered Oct 14 '22 14:10

Pavel