html self closing tag matches with wrong closing tag

[timurridjanovic]

<div>
  <div /> <!-- this self closing tag matches with the next closing tag -->
  <div></div> <!-- this closing div matches with the self closing div on the upper line -->
</div>

Most issues are related to bugs or problems. In these cases, you should include a minimal working example and a minimal vimrc file (see below), as well as:

1. What vim version are you using? If using neovim, Are you using tree-sitter or classic matching? vim 8.2
2. Steps to reproduce Test above html and see that the self closing div matches with the wrong div closing tag.
3. Expected behavior: The self closing div tag should be skipped when matching tags with %

[andymass]

Maybe it can be supported.. but is self-closing div valid HTML? Can this occur in real situations? I notice that the matching is correct if we rename the file to .xml (where it is legal to self close any tag).

[captainko]

hi @andymass I think it should be supported by default, Have you tried it on an Angular project? Because Angular allows self-closing tags

[andymass]

@captainko can you please give an example of angular with self closing tags that would demonstrate the issue? I am not familiar enough with angular to understand how this would be used.

[timurridjanovic]

@andymass you are right, it is not considered valid html, but browsers still allow them, and they are very common in js frameworks like react and angular. So for example:

<div>
  <div class="something" />
</div>

[andymass]

@timurridjanovic just to be clear, we are talking about self closing tags that are the same as other non-self closed tags in the same document, right?

As opposed to simply having some random tags like

<foo>
   <bar />
</foo>

^ the above is fully supported today.

I'd appreciate an angular example either way. In either case, I think it can be supported with an option, since such is already supported in XML. It most likely cannot be made default as this would be a major divergence from the existing match words.

Note: the match words themselves essentially come directly from vim itself https://github.com/vim/vim/blob/b529cfbd04c02e31cfa88f2c8d88b5ff532d4f7d/runtime/ftplugin/html.vim#L35, I think this would be an option to fully replace the defaults.

[timurridjanovic]

@andymass This is what I mean. If you look at the screenshot the self closing div is matching with the wrong div. It matches with the closing parent div.

And when my cursor is on the first div, it doesnt match with any divs.

[lalitmee]

@andymass, I have seen that the default matchit plugin matches the correct tag if its not a self-closing tag. I have not tested it on self-closing tag. I was using this plugin but just to have the tags matched so that I can jump to the closing tag in a big file using %, I uninstalled it.

[andymass]

Hi @lalitmee, can you provide any example which % does not work? This plugin is designed to be backwards compatible with matchit so should provide identical jumping behavior, unless there is a bug.

[lalitmee]

@andymass, oh then I think the reason may be that I disabled the matchit and was only using vim-matchup. I will try again after enabling matchit.

[andymass]

match-up offers a helper function to customize html matches.

Create a file .vim/after/ftplugin/html.vim (or use an autocmd) containing:

let b:match_words = matchup#util#standard_html()

For allowing self closing tag with the same name as surrounding scope (like XML),

let b:match_words = matchup#util#standard_xml()

or

let b:match_words = matchup#util#standard_html({'variant': 'xml')

By default, match-up and matchit should behave the same with respect to % and html tags. If there's a difference, please let me know what the example is.

[lfire]

my solution

call plug#begin('~/.config/nvim/autoload/plugged')
    Plug 'nvim-treesitter/nvim-treesitter', {'do': ':TSUpdate'}
call plug#end()

lua <<EOD
require'nvim-treesitter.configs'.setup {
    ensure_installed = {"vue", "html", "javascript", "tsx", "vim", "typescript", "css", "scss", "bash", "json", "xml"},
    matchup = {
        enable = true,
    },
}
EOD