Trying to use emmet with a react app in vs code

Question

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,

Hello, Can you mark the answer from @Damjan which is correct. It will be helpful for others and confusing for new comers. — Gangadhar Jannu, Oct 10 '19 at 15:59

score 70 · Accepted Answer · answered Jan 23 '19 at 10:11

70

Add this to settings JSON:

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

answered Jan 23 '19 at 10:11

Damjan Pavlica

31,277
10
71
76

2

I also had to add `"emmet.showSuggestionsAsSnippets": true` or I found adding emmet siblings with the + character did not work properly. – Darren Evans Jun 03 '21 at 16:26

Fareed Khan · Answer 2 · 2022-12-08T02:27:46.207

34

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

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

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:

edited Dec 08 '22 at 02:27

answered May 08 '20 at 16:42

Fareed Khan

2,613
1
11
19

3

This is absolutely what I was looking for, Thanks. – SalmanShariati Jul 21 '20 at 11:39

score 7 · Answer 3 · answered Dec 07 '21 at 06:36

7

On PC: Ctrl + ,

On Mac: Command + ,

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

answered Dec 07 '21 at 06:36

mufaddal_mw

351
2
11

score 5 · Answer 4 · answered Jan 09 '21 at 12:09

5

install Extension Emmet

go to setting.json then add this:

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

answered Jan 09 '21 at 12:09

Mhammed Talhaouy

1,129
10
14

score 4 · Answer 5 · edited Apr 20 '21 at 22:23

4

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

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

edited Apr 20 '21 at 22:23

mhhabib

2,975
1
15
29

answered Apr 20 '21 at 15:07

Andrew Aghoghovwia

51
1

score 3 · Answer 6 · edited Nov 04 '20 at 08:09

3

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

  "emmet.includeLanguages": {

    "javascript": "javascriptreact"

  }
}

Add this to your JSON.

edited Nov 04 '20 at 08:09

4b0

21,981
30
95
142

answered Nov 04 '20 at 08:05

vikky singh

356
3
6

score 0 · Answer 7 · answered Dec 16 '22 at 04:52

0

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

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

answered Dec 16 '22 at 04:52

Mushfiqur Rahman

376
1
2
15

Trying to use emmet with a react app in vs code

7 Answers7

Updated 2022

Linked