29

I am using Visual Studio Code and creating a React App. I understand that Vsc comes with Emmet but it does not work with my React App. I have tried putting the following code in settings.

"emmet.includeLanguages": {
"javascript": "javascriptreact",
"xml": {
  "attr_quotes": "single"
 }
 },
"emmet.triggerExpansionOnTab": true,
2
  • 1
    do you use sublime-babel ? If yes this cause a problem
    – EQuimper
    Commented Jun 7, 2018 at 23:27
  • Hello, Can you mark the answer from @Damjan which is correct. It will be helpful for others and confusing for new comers. Commented Oct 10, 2019 at 15:59

8 Answers 8

77

Add this to settings JSON:

"emmet.includeLanguages": {
  "javascript": "javascriptreact"
}
1
  • 2
    I also had to add "emmet.showSuggestionsAsSnippets": true or I found adding emmet siblings with the + character did not work properly. Commented Jun 3, 2021 at 16:26
42

In case the marked answer dont work!

In VS Code open settings using command:

On PC: Ctrl + ,

On Mac: Command + ,


Be sure workspace is selected

enter image description here

Search Emmet, scroll down to Emmet Include Language and open settings.JSON file

enter image description here

Paste the following code and save the file. Reload VS CODE and it will work!:

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

Updated 2022

Add item and and its value like this:

enter image description here enter image description here

1
  • 3
    This is absolutely what I was looking for, Thanks. Commented Jul 21, 2020 at 11:39
7

On PC: Ctrl + ,

On Mac: Command + ,

Make Sure you have added item and value like shown in screenshot below -

enter image description here

5

install Extension Emmet

go to setting.json then add this:

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

Go into your settings.json file and inside the "configuration" object paste this:

"emmet.includeLanguages": {
"javascript": "javascriptreact",
}
3
{
  "emmet.excludeLanguages": ["markdown"],

  "emmet.includeLanguages": {

    "javascript": "javascriptreact"

  }
}

Add this to your JSON.

1

Go to setting or press Ctrl + , then setting.json then add this:

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
},
1
  • This is best way to change any vscode configuration according to project
    – ArtBindu
    Commented Dec 14, 2023 at 9:18
0

To enable Emmet, we need to include the language setting in settings.json. For both JavaScript .jsx and TypeScript .tsx, add the following config in VS Code user settings:

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.