How do I get matchit to work with '/>' (self-closed tags)?

Question

I really like to jump from one <el> to the end of </el> with matchit. I am using it for jsx, but it does not seem to work if I have an element that is declared with />, does anybody have an idea how to fix the issue.

Here is an example of what is not working:

<Scene key="tabbar" component={NavigationDrawer}  initial={true}>
  <Scene key="main" tabs={true} default="tab2" >
    <Scene key="tab1"  title="Tab #1" icon={TabIcon} navigationBarStyle={{backgroundColor:"red"}} titleStyle={{color:"white"}}>
      <Scene key="tab1_1" component={TabView} title="Tab #1_1" onRight={()=>alert("Right button")} rightTitle="Right" />
      <Scene key="tab1_2" component={TabView} title="Tab #1_2" titleStyle={{color:"black"}}/>
    </Scene>
    <Scene key="tab2" initial={true} title="Tab #2" icon={TabIcon}>
      <Scene key="tab2_1" component={TabView} title="Tab #2_1"/>
      <Scene key="tab2_2" component={TabView} title="Tab #2_2" onLeft={()=>alert("Left button!")} leftTitle="Left" duration={1} panHandlers={null}/>
    </Scene>
    <Scene key="tab3" component={TabView} title="Tab #3" hideTabBar={true} icon={TabIcon}/>
    <Scene key="tab4" component={TabView} title="Tab #4" hideNavBar={true} icon={TabIcon}/>
    <Scene key="tab5" component={TabView} title="Tab #5" icon={TabIcon} renderRightButton={()=><Right/>}/>
  </Scene>
</Scene>

I want for example to go from the first Scene open <Scene> to the end </Scene>. However when I press %, nothing happens.

Answer 1

Let's suppose you have the following lines in your ~/.vimrc

source $VIMRUNTIME/macros/matchit.vim
filetype plugin on

If the offending lines are in a .html file, then:

b:match_words = '<:>,' .
    \ '<\@<=[ou]l\>[^>]*\%(>\|$\):<\@<=li\>:<\@<=/[ou]l>,' .
    \ '<\@<=dl\>[^>]*\%(>\|$\):<\@<=d[td]\>:<\@<=/dl>,' .
    \ '<\@<=\([^/][^ \t>]*\)[^>]*\%(>\|$\):<\@<=/\1>'

On the other hand, if they're in a .jsx file and you're using vim-jsx (see jsx.vim), then

b:match_words = '(:),\[:\],{:},<:>,' .
    \ '<\@<=\([^/][^ \t>]*\)[^>]*\%(>\|$\):<\@<=/\1>'

Even though both values work well, It's necessary to take into account the following cases:

• There could be some > into some tags.
• There could be some tags with or without closing tags.

And you can do so by replacing

<\@<=\([^/][^ \t>]*\)[^>]*\%(>\|$\):<\@<=/\1>

with

<\@<=\([^/][^ \t>]*\)[^>]*\%(\%(=\|/\)\@<!>\|$\):<\@<=/\1> 

Note: When you're using a .jsx file but you aren't using any plugin, the b:match_words variable doesn't exist. In that case you could issue the following command:

:let b:match_words='(:),\[:\],{:},<:>,<\@<=\([^/][^ \t>]*\)[^>]*\%(\%(=\|/\)\@<!>\|$\):<\@<=/\1>'

Answer 2

Instead of using the above config, you can easily use a< from visual mode to select around closing tag, i< to select inner a closing tag.