I'm using Neovim 0.6.0 with nvim-treesitter installed and I mostly work with JavaScript, Flow, TypeScript based React projects. This means, I also need syntax highlighting for JSX and TSX.

Syntax highlighting works rather well with TypeScript and TSX out of the box, however, I'm finding that JSX isn't highlighting at all, and some statements are rather bland.

The navarasu/onedark.nvim theme is installed here.

I managed to get around this by installing the following packages:

Syntax highlighting: Treesitter only

without extra plugins

Syntax highlighting - with extra plugins

with extra plugins

Note how the console.log on line 7 is looking rather untouched, and also, the JSX syntax is all in gray.

This probably isn't the right way to go. I don't think the above plugins use treesitter under the hood, and I think I might be having multiple syntax highlighers running at the same time, possibly even fighting over coloring the code.

Is there a better way to configure nvim-treesitter to work with JSX highlighting, and also get the default JS highlighting a bit richer?

2 Answers 2


Found the issue. This was because I didn't enable the highlight module where I called

require('nvim-treesitter.configs').setup {}

So after fixing, the above call should at least look like this:

require('nvim-treesitter.configs').setup {
  highlight = {
    enabled = true
  • This was the option I was missing in order to highlight properly TypeScript JSX parts in my functional components.
    – Amin NAIRI
    Jul 21, 2023 at 11:22

I was having a similar issue, but I had missed the part where I needed to run

:TSInstall typescript
:TSInstall javascript
:TSInstall tsx

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.