VS Code: how to add all default snippet of HTML files into react js files?

Question

I have learnt html, js and css. Now I want to learn React. Now I am very used to use snippets of HTML files such as div.className and by pressing enter it gives me <div class="className"></div>. When using React the HTML part is in return in a js file. How can I add all default snippet in VS Code of HTML files into react js files?

You probably will have to move from the "JS context" to the "XML context" first - div.className is totally valid javascript and should not be expanded to anything. Try typing <>div.className or something like that — Bergi
– Bergi, Commented Jan 1, 2021 at 15:39
@mistertl: Hope my answer has helped you. If it has would like you to Accept and vote for my answer... This will help other developers as well... Thanks :) — Imran Rafiq Rather
– Imran Rafiq Rather, Commented Jan 1, 2021 at 16:04

Imran Rafiq Rather · Accepted Answer · 2021-01-01 15:44:12Z

9

You need to have Emmet extension Installed in VSCode.

Then you need to add this line of Code in your settings.json of VSCode Settings and you will have all the emmet formatting for JSX.

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

And also if not already set, you will need these two settings as well.

  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,

And Emmet will start to format your JSX just like it does in normal HTML

answered Jan 1, 2021 at 15:44

Imran Rafiq Rather

8,2881 gold badge23 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

invaq · Accepted Answer · 2021-05-09 14:20:39Z

5

If you can`t find Emmet plugin

According to official page no need to add extension. checked on version 1.51

Support for Emmet snippets and expansion is built right into Visual Studio Code, no extension required. Emmet 2.0 has support for the majority of the Emmet Actions including expanding Emmet abbreviations and snippets.

Just press cmd+P (macOS) or ctrl+P (others) and type settings.json, open this file and as mentioned @Imran Rafiq Rather add this line "emmet.includeLanguages": { "javascript": "javascriptreact" },

And that's it!

answered May 9, 2021 at 14:20

invaq

611 silver badge2 bronze badges

Comments

Mhammed Talhaouy · Accepted Answer · 2021-04-17 13:01:56Z

2

first install emmet extension in vscode second got to preferences/setting.json ans put this

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

it will work

edited Apr 17, 2021 at 13:01

answered Jan 1, 2021 at 15:49

Mhammed Talhaouy

1,28913 silver badges14 bronze badges

Comments

holydragon · Accepted Answer · 2022-07-05 04:48:28Z

1

As of July 2022, here is what I do.

Go to Settings
Click Extensions
Click Emmet
In Include Languages section, Add Item with Item = "javascript" and Value = "javascriptreact"
Click OK

answered Jul 5, 2022 at 4:48

holydragon

6,7687 gold badges49 silver badges76 bronze badges

Collectives™ on Stack Overflow

VS Code: how to add all default snippet of HTML files into react js files?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related