Navigating HTML tags in Vim

html

vim-plugins

html-editing

vim-commands

byAnton Shumikhin·Oct 2, 2024

Efficiently navigate HTML in Vim with the % key, allowing you to jump between opening and closing tags instantly. For swift tag block navigation, use { and }. For tag-specific navigation, use / to search forward and ? to search backward.

To find the matching <div> tag, press %. Search the next <a> tag using /<a, or the previous closing  with ?.

# Find the right "pair" for this lonely tag:
%

# Walking between tag blocks like a pro:
{ } 

# Playing "Hide and Seek" with specific tags:
/<tag>  ?</tag>

Visual Mode: Selecting and editing tags

Kickstart your editing prowess with visual mode (v). This allows you to select blocks of code and manipulate HTML tags with ease.

To select an outer tag block, employ the shortcut vat.
For an inner tag block, your secret weapon is vit.

Within visual mode, the command o or O lets you toggle the cursor between start and end tags, just like a time traveler!

Before you consider an upgrade, check your Vim's current firmware using :echo exists('loaded_matchit'). If it returns 0, suit up; it's time to install the matchit.vim plugin!

With matchit.vim, the % key isn’t just a percentage sign anymore; it's a teleportation device for HTML tags.
Visual mode selections become a magic carpet; vat and vit can traverse nested tag landscapes.

Remember to check your oxygen levels before diving in with cit (change inside tag) and cat (change around tag).

Pro tips and tricks: Transforming Vim into an HTML wrestling ring

Vim-Surround: Playing with tag surroundings

The vim-surround plugin makes you a pro wrapper! Use ys (surround) to wrap tags, cs (change surround) to change wrapping tags, and ds (delete surround) to dismiss them.

Custom Searches: Tag-specific movements

The [i: and [I: commands help you find tags in a crowd, like ctrl+f on steroids. These are ideal for hunting down list items or table cells.

Vim Folding: Navigate HTML like an Accordion player

Master the Vim's folding commands (zf, zd, za) to expand and collapse sections of HTML. It's like playing an accordion, but with code!

Installing matchit.vim: Time to power up

Installing the matchit.vim plugin is as easy as 1-2-3:

Check your version: Ensure your Vim distribution is matchit-ready.
Download: Get matchit.vim from vim.org/scripts.
Install: Place the plugin in your .vim/plugin directory and source it in your .vimrc.

A few minutes of setup and you're all set. Now every HTML tag is just a quantum leap away!

explain-codes / Html / Navigating HTML tags in Vim

Linked

How can one close HTML tags in Vim quickly?



Can Vim highlight matching HTML tags like Notepad++?



Delete text in between HTML tags in vim?



How to force vim to syntax-highlight a file as html?



How to comment out a block of Python code in Vim