CODEWITHSUNDEEP
reactjsvisual-studio-code
NealVDV
NealVDV

Reputation: 2532

How to enable className autocomplete on custom jsx tags (aka react components)?

I'm very new to vscode but i've set up about all the things I need. One more thing that is quite missing is the autocomplete for className attribute on custom jsx tags (aka react components). It simply does not recommend anything when on a custom tag.

I've tried searching for any extension that does this but couldn't find any, am I missing something here?

Upvotes: 5

Views: 11388

Answers (1)

trkaplan
trkaplan

Reputation: 3487

As I know there is no way to show react attributes in autocomplete list for custom react tags.

But there is a way to add className attribute quickly by putting a dot and typing your class name then hitting tab. This will create the custom tag with the given class attribute.

Demonstration: Adding react class attribute to custom jsx tag

To do this, you need to configure Emmet extension (It is a built-in extension)

Add these lines to your VS Code User Settings (or Workspace Settings) file:

"emmet.triggerExpansionOnTab": true,

"emmet.includeLanguages": { "javascript": "javascriptreact" }


If you are on Mac, you can quickly open the User or Workspace Settings file, by pressing

Shift ⇧ + Command ⌘ + P and typing into the Command Palette: >settings.json.

vscode_settings


Official Documentation at VS Code Web Site

Related Issue on VS Code Github

Upvotes: 20

Related Questions