I’ve started working with javascript/typescript files at work recently, and vim has been fine for my tasks. However after a while, I noticed that the % key sometimes didn’t work in js/tsx files, specifically I couldn’t jump between parenthesis ()/braces {} in a pair, e.g. in const foo = (bar) => { … };. I couldn’t find an answer to the “broken %” in vim online.
Turns out:
I’m using the matchit plugin to get “extended % matching”;
something (I suspect a plugin that I installed: pangloss/vim-javascript, leafgarland/typescript-vim and/or MaxMEllon/vim-jsx-pretty) is overwriting the b:match_words option in those files to be able to jump between tags:
123
<div><p>foo</p></div>
So if your cursor is at <div>, pressing % will jump to </div>, and vice versa. That’s nice but I’d also like to jump between the corresponding < and > in the same tag, as well as other brackets.
My solution is to make sure b:match_words has the default pairs for js and tsx files as well by creating two very similar files:
~/.vim/after/ftplugin/javascript.vim:
123456
if exists("b:did_javascript_ftplugin")finishendletb:did_javascript_ftplugin =1letb:match_words ..=',(:),\[:\],{:},<:>'
~/.vim/after/ftplugin/typescriptreact.vim:
123456
if exists("b:did_typescriptreact_ftplugin")finishendletb:did_typescriptreact_ftplugin =1letb:match_words ..=',(:),\[:\],{:},<:>'
(I hate markdown because of the complicated and non-obvious way to add a code block in a list item, and then the syntax highlighting doesn’t work…).