Neovim keep html tags indented in react/jsx files

Question

When I edit a .html file I get this when pressing enter key:

<div>|</div>

<div>
  |
</div>

and while I edit a react file, the behavior is not what I was expecting:

<div>|</div>

<div>
|
</div>

/* Or sometimes is just like */

  <div>
|
</div>

On the .html files it works perfectly but with react I have a problem, what should I do to get it to work the same?

Here are my config files

Answer 1

I just found an solution after a lot more searching on google. using treesiter and adding this into the treesitter config got my desired behaviour:

 require'nvim-treesitter.configs'.setup {
   indent = {
     enable = true,
   },
 }

Now it works in a .js file perfectly like in a .hmtl which is:

<div>|</div>

<div>
  |
</div>

Answer 2

The reason is that the indentexpr of react file is indenting the file as a javascript (javascriptreact is merely javascript for standard vim) file and not like an html file.

You could force react file to be indented as html file:

Add the following line to the ~/vimfiles/indent/javascriptreact.vim file (that probably do not exist yet):

so $VIM/vim90/indent/html.vim

Assuming that you are using Vim 9.0

But it will be at the expense that the react file will be indented as html.

Another solution would be to consider using the vim-jsx-pretty plugin.