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

Can you set language mode to JavaScript React in the bottom bar (click where it says 'JavaScript')? I have no trouble with VSCode highlighting React, and I havn't really done anything to configure it. It pretty much worked out of the box for me. Only thing I did was add the following to user configuration: "javascript.validate.enable": false, since the editor chokes on some es6 constructs (spread operator, arrow functions, etc.) with it set to true. — Nikolaj Dam Larsen
– Nikolaj Dam Larsen, Commented Jan 1, 2017 at 22:31
thanks! I provided more details on what the problem was in the answer — andre
– andre, Commented Jan 2, 2017 at 21:03

Mayur C Dhage · Accepted Answer · 2020-08-10 13:04:24Z

30

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

answered Aug 10, 2020 at 13:04

Mayur C Dhage

3013 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

phsource Over a year ago

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

Francis Pierot Over a year ago

(related to phsource comment above): I had to also switch to another theme - was using "Tomorrow Night" and all JSX was red even with the Javascript React language mode set.

Dviros Over a year ago

The Dark+ change worked perfectly. Thanks

Saravana · Accepted Answer · 2017-01-02 14:19:29Z

18

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.

answered Jan 2, 2017 at 14:19

Saravana

41k20 gold badges110 silver badges112 bronze badges

4 Comments

andre Over a year ago

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 Over a year ago

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.

rasyadi Over a year ago

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.

Ian Smith Over a year ago

What if you don't have that language available in VS Code, what installs it?

Bon Andre Opina · Accepted Answer · 2022-11-17 09:04:03Z

15

Disabling this extension fixed it for me. It specifically happened this day November 17,2022 3 of my workmates were having the same problem.

answered Nov 17, 2022 at 9:04

Bon Andre Opina

2,2382 gold badges20 silver badges37 bronze badges

3 Comments

Guven Degirmenci Over a year ago

Also installing previous version works too.

Arbin Shrestha Over a year ago

There's a new update now, updating it fixed the bug for me.

Usman Sabuwala Over a year ago

Interestingly this worked!

Akbar Shahamati · Accepted Answer · 2022-11-17 07:25:52Z

5

Just uninstall this plugin and install it again in the vs code extensions:

Name: JavaScript and TypeScript Nightly

VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next

answered Nov 17, 2022 at 7:25

Akbar Shahamati

612 silver badges2 bronze badges

Comments

random_hooman · Accepted Answer · 2021-09-19 21:49:30Z

3

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

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

edited Sep 19, 2021 at 21:49

random_hooman

2,3181 gold badge10 silver badges29 bronze badges

answered Sep 19, 2021 at 14:52

Shahryar_Jahanshahloo

1094 bronze badges

Comments

The Dead Man · Accepted Answer · 2018-11-23 22:53:32Z

2

For Me Here is what worked

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

answered Nov 23, 2018 at 22:53

The Dead Man

5,59433 gold badges126 silver badges227 bronze badges

Comments

waakemeup · Accepted Answer · 2022-01-19 09:52:32Z

1

disable the extension named Javascript Atom Grammar works for me

answered Jan 19, 2022 at 9:52

waakemeup

111 bronze badge

2 Comments

Community Over a year ago

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 Over a year ago

Please at least describe the steps you have taken.

Shakil · Accepted Answer · 2022-06-23 18:19:13Z

1

Select Language mode as "Javascript React".
Go to Settings -> Color theme -> Select "Dark+" theme.

answered Jun 23, 2022 at 18:19

Shakil

111 bronze badge

Comments

Zach Jensz · Accepted Answer · 2022-09-22 23:33:37Z

1

Click: Ctrl + K + T

Change the color theme settings to dark+(default) , it worked for me.

And select the appropriate language from bottom status bar: enter image description here

edited Sep 22, 2022 at 23:33

Zach Jensz

4,0986 gold badges19 silver badges32 bronze badges

answered Sep 19, 2022 at 7:38

Vasu Jhawar

113 bronze badges

Comments

serraosays · Accepted Answer · 2019-01-31 15:06:43Z

VS Code highlights code via extensions, not with ESLint or Prettier, which are sometimes assumed to do the job. Out of the box, VS Code supports React and JSX natively. You can also adjust VS Code's settings.json file. Here's an example off how that might look:

{
    "window.zoomLevel": 0,

    // Solarized-dark theme
    "workbench.colorTheme": "Solarized-dark",

    // Changes the highlight color in solarized-dark, which I can't see
    "workbench.colorCustomizations": {
      "editor.selectionBackground": "#5b455e",
      "editorBracketMatch.border": "#555",
      "editorBracketMatch.background": "#5b455e"
    },

    // Number of spaces in a tab
    "editor.tabSize": 2,

    // Insert spaces when pressing Tab. This setting is overriden
    // based on the file contents when `editor.detectIndentation` is true.
    "editor.insertSpaces": true,

    // Override whatever the files say and give me 2 spaces per tab
    "editor.detectIndentation": false,
    "workbench.startupEditor": "newUntitledFile",
    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,
    "javascript.updateImportsOnFileMove.enabled": "always"
  }

VS Code modifies syntax highlighting automatically, but it's not perfect. You can also adjust the detection by clicking on the auto-detected language on the right side of the bottom toolbar:

Collectives™ on Stack Overflow

Setting up proper React Code highlighting in Visual Studio Code?

10 Answers 10

3 Comments

4 Comments

3 Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

3 Comments

4 Comments

3 Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related