Practical Vim command workflow

There are many commands in Vim, which means that you can achieve a same goal with many approaches. Therefore it is difficult for beginner to learn how to accomplish an editing task with less keystrokes. In this tutorial, I'll share my Vim command workflow and give you some guidelines about how to move/edit text in Vim efficiently.

Guidelines

Here are some general rules of my workflow.

1. Don't use arrow keys and mouse.
2. Use relative jump (eg: 5k 12j) for vertical movement inside screen.
3. Use CTRL-U CTRL-D CTRL-B CTRL-F gg G for vertical movement outside screen.
4. Use word-motion (w W b B e E ge gE) for short distance horizontal movement.
5. Use f F t T 0 ^ $ , ; for mid long distance horizontal movement.
6. Use operator + motion/text-object (eg: ci{ d5j) whenever possible.

If you are not familiar with some of these concepts, please learn about the vim basic commands first.

Examples

Here are 4 real situations I faced when creating a todo list website with javascript. You can think about how you will achieve the editing goal first and then see my approach.

Notes:

• ^ or v points to the position of the cursor.
• There are line number and relative line number on the left.

Situation 1

Goal: Change activeList to this and add a ; at the end of the line.

// current mode: Normal
  2 if(this.sortMethod == 'Name') {
  1   activeList.uncheckedTodo.sort(sortWithName)
189 }
    ^

My approach is -cwthis<ESC>A;<ESC>.

• -: Go 1 line upward, on the first non-blank character
• cwthis: Change the word and type this.
• <ESC>: Leave insert mode.
• A;<ESC>: Jump to the end of the line, type ; and leave Insert mode.

Situation 2

Goal: Change i-s+1 to d and add new before Date(y, m, d).

// current mode: Normal
454 console.log(Date(y, m, i-s+1));
                        ^

My approach is Wct)d<C-o>FDnew <ESC>. (<C-o> means CTRL-O)

• W: Go one word forward, ignore symbol.
• ct)d: Change till before the occurrence of ) to the right and type d.
• <C-o>: Execute one command in Normal mode and then return to Insert mode.
• FD: Go to the occurrence of D to the left.
• new <ESC>: Type new and leave Insert mode.

Situation 3

Goal: Add a line activeList.sortMethod = 'Date'; below document.querySelector('.sort-date')....

// current mode: Insert
  1 document.querySelector('.sort-name').addEventListener('click', () => {
343   activeList.sortMethod = 'Name'; 
  1   activeList.update();           ^
  2 })
  3 
  4 document.querySelector('.sort-date').addEventListener('click', () => {
  5   activeList.update();
  6 })

My approach is <ESC>yy4jpci'Date<ESC>.

• <ESC>: Leave insert mode.
• yy: Yank current line.
• 4j: Go down 4 line.
• p: Paste the line we just yanked.
• ci'Date<ESC>: Change the content inside '', type Date and leave Insert mode.

Situation 4

Goal: Move the whole block of //sort (line 200 ~ 207) to the beginning of update() function.

// current mode: Normal
  8 update() {
  7   this.checkedTodo.forEach((todo) => {
  6     this.element.insertBefore(todo.element, todoCreator.nextSibling);
  5   });
  4   this.uncheckedTodo.forEach((todo) => {
  3     this.element.insertBefore(todo.element, todoCreator.nextSibling);
  2   });
  1         v
200   // sort
  1   if(this.sortMethod == 'Name') {
  2     this.uncheckedTodo.sort(sortWithName);
  3   }
  4   else if(this.sortMethod == 'Date') {
  5     this.uncheckedTodo.sort(sortWithDate);
  6   }
  7
  8   createCalendar(currentYear, currentMonth, this);
  9 }

My approach is dap8kp.

• dap: Delete around the paragraph.
• 8k: Go up 8 lines.
• p: Paste the paragraph we just deleted.

Final Words

If you just start learning Vim operators, motions, it may take some times to think of what commands to use for each situation. However, If you keep practicing and using them, you'll become faster and faster. After a while, you’ll develop muscle memory for using these commands.

That’s a wrap. Thanks for reading. If you like this kind of stuff, consider following for more.

You can also see what I am working on my Personal Website and GitHub.