Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 474
NealVDV Avatar asked May 29 '17 21:05

NealVDV


People also ask

How do I enable JSX in React?

To use JavaScript inside of JSX, you need to surround it with curly braces: {} . This is the same as when you added functions to attributes. To create React components, you'll need to convert the data to JSX elements. To do this, you'll map over the data and return a JSX element.

Why is className used in JSX?

Explanation: The only reason behind the fact that it uses className over class is that the class is a reserved keyword in JavaScript and since we use JSX in React which itself is the extension of JavaScript, so we have to use className instead of class attribute.


1 Answers

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

like image 189
trkaplan Avatar answered Oct 05 '22 11:10

trkaplan