JSX highlighting with Neovim and nvim-treesitter

Question

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:

• pangloss/vim-javascript
• maxmellon/vim-jsx-pretty

Syntax highlighting: Treesitter only

Syntax highlighting - 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?

Answer 1

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
  }
}