Explain Codes LogoExplain Codes Logo

Can Vim highlight matching HTML tags like Notepad++?

html
tag-pair-matching
vim-plugins
html-editing
Nikita BarsukovbyNikita Barsukov·Sep 19, 2024
TLDR

To activate matching HTML tag highlights in Vim, incorporate the matchit plugin together with the MatchTagAlways plugin, as shown here:

packadd! matchit runtime macros/matchit.vim Plugin 'Valloric/MatchTagAlways'

After, execute :PluginInstall. This will highlight the corresponding closing HTML tag when your cursor is over an opening tag. You can verify if Vim's matchit is functioning properly by checking :echo has('matchit'). If 0 is returned, matchit needs to be enabled or installed.

How to enhance Vim

Leverage filetype plugins (ftplugins)

You can improve your HTML coding experience in Vim by using ftplugins. See below:

  1. Check vim.org scripts or explore gregsexton/MatchTag for HTML-specific ftplugins.
  2. Install a fitting plugin and alter the settings as needed on your ftplugin/html.vim.

Debug HTML code more efficiently

Unmatched or unclosed tags are widely considered introducers of HTML bugs. Configure your ftplugin to highlight these tags, saving you a lot of debugging time.

Craft your own plugin

Creating a custom Vim plugin might be the way to go if none of the existing solutions meet all your needs. A powerful resource to start with is Learn Vimscript the Hard Way.

Matching HTML tags using Vim settings

You can achieve HTML tag pair matching with a simple tweak in Vim settings:

" Couples therapy for HTML tags with Vim. set mps+=<:>

For detailed information, visit :help matchpairs.

Community collaboration and improvement

Providing feedback and reporting issues strengthens the community and the software. So if a bug bites you, don't just scratch. Share the itch!

Advanced editing tricks

Save time with MatchTagAlways

Refine your HTML editing process by incorporating the MatchTagAlways plugin into Vim. This plugin can highlight both ends of tag pair, thus:

Making HTML editing as smooth as cutting butter with a hot knife.

Making HTML tag matching universal

Vim is a cross-platform text editor, and the tag match highlighting trick isn’t exclusive to Notepad++. MatchTagAlways brings the same capability to every Vim user.

Edit with foresight

Tackling HTML5 and newer web standards? Use plugins like othree/html5.vim. They offer syntax highlighting and stay updated with tag pairing.

References