Auto Import of React Components in Visual Studio Code

user_9101619 0
Viewed 78247

I'm using JavaScript (not TypeScript) and using the latest Visual Studio Code.

I'm not able to get auto import of components working. I've been using the Auto Import plugin by steoates, but it doesn't seem to work. I haven't seen any recent notes about this.

Are there other plugins I've not found that help with auto-import of React Components?

visual-studio-code reactjs
3 Answers

Update 2018

VS Code now handles this natively via a jsconfig.json and the JavaScript Language Service.

Create the file jsconfig.json at your project root and make sure to set checkJs to true:

Creating a JS Config file, allows Visual Studio to treat the folder as an Explicit Project. Without it, JS files opened in VS Code are treated as independent units, and there is no common project context between any two files.

Example:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "checkJs": true,
    "jsx": "react"
  }
}

Code Action / Quick Fix

Missing modules will show up with a Code Action (AKA "Quick Fix") with an option to import. You can click on the lightbulb or use Ctrl + .

code action > import

Auto Imports / IntelliSense

Auto Imports will show you available components as you type and import them when selected

intellisense > auto import

Further Reading

user_13660330

Double check that the extension is enabled by navigating to Extensions > searching for "Auto Import". You should see the following:

enabled extension

user_55997700

I solved this issue by opening single project folder /project/my-project in vscode....
Seems all the .js configs are auto-configured this way.

Before this, I had opened /projects folder with multiple projects inside, and the imports suggestion and other stuff was not working at all.

user_35307070
Related