Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Auto Import of React Components in Visual Studio Code [closed]

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?

like image 425
Pete Avatar asked Mar 11 '20 13:03

Pete


People also ask

How do I turn off auto import in Vscode?

To disable auto imports, set "javascript. suggest. autoImports" to false .

Do I need to import React in every component?

You no longer need to import React from "react" . Starting from the release 17 of React, JSX is automatically transformed without using React. createElement . However, other exports like hooks must be imported.

How do I import an existing React project into Visual Studio code?

Open a terminal on vscode, then make sure you already node installed. Type npm install after that npm run start or whatever command to run, you can see on package. json .


1 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

  • Visual Studio Code Automatic Imports
  • How to add jsconfig.json to existing vscode project w/o breaking it
like image 107
KyleMit Avatar answered Sep 29 '22 22:09

KyleMit