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?

Answer 1

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

Answer 2

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

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

it will work

Answer 3

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!

Answer 4

As of July 2022, here is what I do.

1. Go to Settings
2. Click Extensions
3. Click Emmet
4. In Include Languages section, Add Item with Item = "javascript" and Value = "javascriptreact"
5. Click OK