-1

as you see, the HTML content is not colorful, and it cannot autocomplete HTML tag

chrisg86
  • 11,548
  • 2
  • 16
  • 30
Chenxi Guo
  • 1
  • 1
  • 1
    [Have you tried this?](https://stackoverflow.com/questions/32832264/change-language-to-jsx-in-visual-studio-code) – Tholle Nov 08 '18 at 11:37

3 Answers3

4

There are 2 ways to do that.

1) You could manually set the syntax to "Javascript React".

For that click on "Javascript" on the bottom right of your screen:

enter image description here

Then simply enter "react" and select it. After that you should have autocomplete for the html parts inside your render functions.

2) You can instruct VSCode to always open .js files as "javascriptreact". For that go to your settings and copy files.associations over to your local settings. Make sure it looks something like this and save:

"files.associations": { "*.js": "javascriptreact" }

Note on that one: This will always set the syntax to "javascriptreact" when you open .js files and might not always be what you want. A better solution would be to generally name react files as myfile.jsx. This way vscode will automatically set the syntax to "javascriptreact".

Hope this helps.

chrisg86
  • 11,548
  • 2
  • 16
  • 30
0
  • Save the file as .jsx ie (App.jsx) instead of .js

This is because you are saving the file as .js ie App.js.JavaScript files cannot understand HTML tags.

Another alternative is you can save in (.js) but your web pack should be configured in such a way that it should transpile it into .jsx. For doing refer this - https://github.com/facebook/create-react-app

Community
  • 1
  • 1
P S Nirmal
  • 61
  • 6
-1

React understand javascript xml only.

Muhazzib UD-din Farooqui
  • 109
  • 9