There is no doubt that navigating and manipulating text in order to build web pages is much more tedious than typing an essay. Lucky for us, your favourite text editor Vim ships with the right tools for the job - VS Code is fine too once you install the Vim plugin.
Let’s learn some motions to successfully run circles around HTML, CSS and JS. I’ll update this article as more tips come to mind.
Changing the values of HTML attributes
Let’s say you have the following:
<div class="design-center mobile-center laptop-left scrum-sucks">
<h1>Hey there!</h1>
</div>
Your co-worker rants to you about how ugly the markup is and so you decide that the div only needs to have one class.
Instruction: Press ci" or ci’ if you’re into that stuff and the text within the quotes will be deleted and Insert mode is triggered.
Changing words and WORDS on the fly
A word in Vim is a contiguous sequence of letters, digits and underscores. A WORD is a sequence of non-blank characters. This means that using cw will change from the current cursor position to the end of the current word and cW to the end of the current WORD.
ciw and ciW are even more useful as they delete the current word or WORD respectively and enter Insert mode. ciW is particularly useful for changing:
.react-is-better-than-htmx {
display: block;
}
to something more appropriate, concise and rooted in truth:
.react-is-for-soydevs {
display: block;
}
Instructions: Press /react and Enter. Press n until you reach the instance of the css class selector ‘react-is-better-than-htmx’. Type ciW. This will delete the selector and trigger Insert mode.
Moving the inner HTML of an HTML element
Consider the code:
<div>
<p>I</p>
<p>Want</p>
<p>To</p>
<p>Be</p>
<p>A</p>
<p>Scrum Master</p>
</div>
You want to get rid of that eye-sore of an aspiration and get rid of it like NOW.
Instructions: While on the opening or closing tag of the div element, press vit to highlight the contents of the div. Press c to change or d to delete the highlighted text. cit or dit works the same way but vit+c/d can be used at first in case you are not sure if the correct section is being altered.
Tips:
- vit is to visualize in the tag
- vat is to visualize around the tag
- These can be combined with d for deletion, c for changing, = for indenting, y for yanking the highlighted section and p for replacing the section with yanked text
- Yes, combos like =it and yat are valid (align in tag and yank around tag respectively)
Navigating within an opening or closing tag of an HTML element
Say we have the following:
<div style="display:grid;gap:40px">
<h2>Wow even more story points! You shouldn't have!</h2>
</div>
Instructions: Press T< and t> in order to jump to the angled brackets that defined the opening tag of the div. Press ci< to delete the contents within the angled brackets.
Tips:
- vi< and va< can be used to highlight within and around a tag
- Combos like ya< and di< work too
Find and replace within selection
You want to replace the word “post” with “folder” in the following snippet:
<div class="post-container">
<div class="post-detail">
<h1>Hello</h1>
</div>
</div>
Instruction: Press vat to highlight the entire tag and type the following:
:s/post/folder/g
This counts for any form of selection. We can use the following if we need regular expressions:
:s/\%Vold/new
The flag ‘c’ can be included to tell Vim to prompt you as to which ones to replace case-by-case:
:s/post/folder/g
Tips:
- Press Esc to cancel the substitution
- V can be used to highlight the current line
- gv can be used to reselect the previous selection
- gi can be used to return to Insert mode where the last insertion was done
Figuring out brackets
You can use % when on any {, ( or [ to find the corresponding closing brace or bracket. This makes navigating and manipulating functions much easier.
Conclusion
Developing for the web isn’t as daunting when you have the right tools at hand - Vim and its inspired plugins in other editors help us to effectively edit text, ensuring that every key stroke has weight to it.