Visual Studio Code Automatic Imports

Question

I\'m in the process of making the move from Webstorm to Visual Studio Code. The Performance in Webstorm is abysmal.

Visual studio code isn\'t being very helpful abo

Answer 1

VS Code supports this out of the box now, but the feature sometimes works and sometimes doesn't, it seems. As far as I could find out, VS Code has to load data needed for auto imports, which happens more or less like this:

• Load data for all exports from your local files
• Load data for all exports from node_modules/@types
• Load data for all exports from node_modules/{packageName} only if any of your local files is importing them

This is better described in this comment: https://github.com/microsoft/TypeScript/issues/31763#issuecomment-537226190.

Due to bugs either in VS Code or in specific packages' type declarations, the last two points don't always work. That was my case, I couldn't see react-bootstrap auto imports in a plain Create-React-App. What finally fixed it was manually copying the package folder from node_modules to node_modules/@types and leaving there only the type declaration files, e.g. Button.d.ts. This is not great because if you ever delete node_modules folder it will stop working again. But I prefer this from always having to manually type imports. This was my last resort after trying and failing with these methods:

• Update VS Code (v. 1.45.1)
• Install types for your package, e.g. npm install --save @types/react-bootstrap
• Add jsconfig.json file and play with the settings as other people suggested
• Try out all the plugins for automatic imports

I hope this helps someone!