Everything after the react fragment comes in the same color in VS Code (React Fragment)

Question

As the arrow shows .. everything after the closed fragment comes in the same weird color, at the beginning I thought it might be a theme issue but then I recognized that it is not. I really need a solution for this. I'm new to react by the way

I thought it might be a theme issue but then I recognized that it is not. I really need a solution for this.

Answer 1

I would assume that it's because the extension of your file is .js, and by default the language that VS Code uses for .js files is javascript.

If you can't change the extension to .jsx for whatever reason, you could set up your VS Code to to use the javascriptreact language for .js files by adding the following to your settings JSON:

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

However, if this was indeed the solution, I would have guessed that fragments weren't your only problem, but let me know if this resolves it.

Answer 2

The solution that worked for me was to disable the extension (Babel ES6/ES7), after doing that everything worked as expected!