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?
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.
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.
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.
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" }
Shift ⇧ + Command ⌘ + P and typing into the Command Palette: >settings.json
.
Official Documentation at VS Code Web Site
Related Issue on VS Code Github
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With