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?
reactjs visual-studio-code
edited Dec 30 '18 at 11:56
Gama11
11.4k32247
asked May 29 '17 at 21:08
NealVDVNealVDV
5811824
add a comment |
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?
reactjs visual-studio-code
edited Dec 30 '18 at 11:56
Gama11
11.4k32247
asked May 29 '17 at 21:08
NealVDVNealVDV
5811824
add a comment |
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?
reactjs visual-studio-code
edited Dec 30 '18 at 11:56
Gama11
11.4k32247
asked May 29 '17 at 21:08
NealVDVNealVDV
5811824
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?
reactjs visual-studio-code
reactjs visual-studio-code
edited Dec 30 '18 at 11:56
Gama11
11.4k32247
asked May 29 '17 at 21:08
NealVDVNealVDV
5811824
edited Dec 30 '18 at 11:56
Gama11
11.4k32247
asked May 29 '17 at 21:08
NealVDVNealVDV
5811824
edited Dec 30 '18 at 11:56
Gama11
11.4k32247
edited Dec 30 '18 at 11:56
Gama11
11.4k32247
edited Dec 30 '18 at 11:56
Gama11
11.4k32247
11.4k32247
asked May 29 '17 at 21:08
NealVDVNealVDV
5811824
asked May 29 '17 at 21:08
NealVDVNealVDV
5811824
asked May 29 '17 at 21:08
NealVDVNealVDV
5811824
5811824
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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"
}
Official Documentation at VS Code Web Site
Related Issue on VS Code Github
answered Apr 13 '18 at 9:32
trkaplantrkaplan
1,2721220
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f44250313%2fhow-to-enable-classname-autocomplete-on-custom-jsx-tags-aka-react-components%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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"
}
Official Documentation at VS Code Web Site
Related Issue on VS Code Github
answered Apr 13 '18 at 9:32
trkaplantrkaplan
1,2721220
add a comment |
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"
}
Official Documentation at VS Code Web Site
Related Issue on VS Code Github
answered Apr 13 '18 at 9:32
trkaplantrkaplan
1,2721220
add a comment |
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"
}
Official Documentation at VS Code Web Site
Related Issue on VS Code Github
answered Apr 13 '18 at 9:32
trkaplantrkaplan
1,2721220
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"
}
Official Documentation at VS Code Web Site
Related Issue on VS Code Github
answered Apr 13 '18 at 9:32
trkaplantrkaplan
1,2721220
answered Apr 13 '18 at 9:32
trkaplantrkaplan
1,2721220
answered Apr 13 '18 at 9:32
trkaplantrkaplan
1,2721220
answered Apr 13 '18 at 9:32
trkaplantrkaplan
1,2721220
1,2721220
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f44250313%2fhow-to-enable-classname-autocomplete-on-custom-jsx-tags-aka-react-components%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
