0

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

2
  • What is a react file for you? Could you give us the fullpath? Could you give us the result of the Vim command: :set filetype? Dec 16, 2022 at 9:06
  • Welcome to Vi and Vim! It might help if you could produce a minimal configuration that demonstrates the problem.
    – D. Ben Knoble
    Dec 17, 2022 at 14:30

2 Answers 2

3

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

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.

3
  • I do not have any of this so is not a good solutions for me
    – user44767
    Dec 17, 2022 at 16:12
  • Thanks for your feedback. It is no surprise you don't have it, I didn't had myself. But if you create the file it should work (although the plugin is probably a better solution). Dec 17, 2022 at 16:31
  • Did the solution solved your problem? If so it will help us if you could validate the solution by hitting the green v button next to the voting arrows. Jan 10, 2023 at 16:09

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.