CODEWITHSUNDEEP
reactjsvisual-studio-codeemmet
AltBrian
AltBrian

Reputation: 2572

Trying to use emmet with a react app in vs code

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,

Upvotes: 30

Views: 36441

Answers (8)

Audwin Oyong
Audwin Oyong

Reputation: 2531

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"
}

Upvotes: 0

Mushfiqur Rahman
Mushfiqur Rahman

Reputation: 574

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

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

Upvotes: 1

Fareed Khan
Fareed Khan

Reputation: 2933

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

Upvotes: 42

mufaddal_mw
mufaddal_mw

Reputation: 351

On PC: Ctrl + ,

On Mac: Command + ,

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

enter image description here

Upvotes: 7

Andrew Aghoghovwia
Andrew Aghoghovwia

Reputation: 51

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

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

Upvotes: 4

Mhammed Talhaouy
Mhammed Talhaouy

Reputation: 1269

install Extension Emmet

go to setting.json then add this:

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

Upvotes: 5

vikky singh
vikky singh

Reputation: 466

{
  "emmet.excludeLanguages": ["markdown"],

  "emmet.includeLanguages": {

    "javascript": "javascriptreact"

  }
}

Add this to your JSON.

Upvotes: 4

Damjan Pavlica
Damjan Pavlica

Reputation: 34113

Add this to settings JSON:

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

Upvotes: 81

Related Questions