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

user_14650416 0
Viewed 3296

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?

jsx visual-studio-code reactjs html javascript
4 Answers

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

user_69389690

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!

user_146270130

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

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

it will work

user_149201010

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

image reference

user_37013930
Related