Setting up proper React Code highlighting in Visual Studio Code?

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? :-)

enter image description here

How do you highlight codes in React?

You need to install prism–react–renderer from NPM to use it. Prism react renderer exposes Highlight as its main component and exports some default props, which you can pass to Highlight . You need to pass a render prop to the Highlight component as in the example below.

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