React/JSX Tag Completion

Neovim
1

Using tsserver with built-in LSP works quite well, however, I’m still missing out on ways to auto-complete HTML tags and such (e.g. emmet abbreviations in VSCode).

Is there a good way to do this or is the best thing I can do is make snippets for them?

I found emmet-vim but I had some problems with its next/previous stepping features, and found it odd to use essentially what is just another snippet engine for my javascript (I already use vim-vsnip).

2

I’ve found pear-tree works well with the following config:

let b:pear_tree_pairs = extend(deepcopy(g:pear_tree_pairs), {
      \ '`': {'closer': '`'},
      \ '<*>': {'closer': '</*>',
      \         'not_if': ['br', 'hr', 'img', 'input', 'link', 'meta',
      \                    'area', 'base', 'col', 'command', 'embed',
      \                    'keygen', 'param', 'source', 'track', 'wbr'],
      \         'not_like': '/$',
      \         'not_in': ['typescriptTypeReference', 'TypeReference','String']
      \        }
      \ }, 'keep')

Though it does sometimes want to make tags out of typescript generics.

1 Like
3

Just found this! Seems good GitHub - windwp/nvim-ts-autotag: Use treesitter to autoclose and autorename xml tag

4

Just a heads up, if you use nvim-treesitter this doesnt quite work as expected, since treesitter has its own syntax definitions, pear-tree wont see the not_in regexes and that rule wont be applied. Its kind of a bummer, I was a long time happy user of pear-tree but it seems for now the only way to have treesitter and closing tags is using a solution like the one @jacksonludwig posted.