Setting up proper React Code highlighting in Visual Studio Code?

Question

I have been trying to find a proper way to highlight React Code in '.js' files so that it is easier to read in Visual Studio Code. The photo below shows a sample file of how a lot of it is in one color, making it hard to read.

I tried using "jsx" extension by TwentyChung and "react-beautify", but neither of them worked. Can someone please assist? :-)

Solution 1

JSX highlighting works out of the box in VS code and JSX files are already associated with JavaScript React language mode. If you want to enable JSX syntax coloring in .js files click on the language name in the status bar and select JavaScript React language mode. You can also associate .js files with JavaScript React if you don't want to do this every time. Make sure you have the latest version of VS Code.

Solution 2

Change the VS CODE color theme to Dark+ and change the language in bottom status bar to java script react. This worked for me

Solution 3

I just added this to settings.json and it worked for me, so you can give it a try.

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

Solution 4

For Me Here is what worked

1. Update the vscode by downloading the latest verrsion

https://code.visualstudio.com/download

2.Open Vscode click extension and search this extension

Javascript Atom Gramar

Just disable the extension.

3.Close and open vscode, now u should see colors in your jsx code.

Hope this will help some one in future

View more solutions

Comments

[andre]

turns out the problem was that I somehow enabled "Javascript Atom Gramar" package and it made all the code un-hlighted. After disabling it, everything worked fine per your instructions!

[Travis Heeter]

Also, you need to be using a theme that is compatible with React's syntax. I saw render's returns as all one color until I switched to Community Material Theme.

[phsource]

I believe changing the language in the bottom status bar to JavaScript React is the only action that's needed!

[rasyadi]

It also worked for me after I changed my VS Code Workbench Color Theme to Dark+. Would be good if there's a list of theme that supports JavaScript React language mode.

[Admin]

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

[Lajos Arpad]

Please at least describe the steps you have taken.