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.
- Don't use arrow keys and mouse.
- Use relative jump (eg:
5k 12j
) for vertical movement inside screen. - Use
CTRL-U CTRL-D CTRL-B CTRL-F gg G
for vertical movement outside screen. - Use word-motion (
w W b B e E ge gE
) for short distance horizontal movement. - Use
f F t T 0 ^ $ , ;
for mid long distance horizontal movement. - 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:
-
^
orv
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 typethis
. -
<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 typed
. -
<C-o>
: Execute one command in Normal mode and then return to Insert mode. -
FD
: Go to the occurrence ofD
to the left. -
new <ESC>
: Typenew
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 '', typeDate
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.
Top comments (1)
Didn’t know about the
<C-o>
command, seems quite useful. Thanks for the article!