Go Mouse Less With VIM

In this blog post I am using VIM extension in VSCode editor. This extension is Vim emulator for VS Code. I am going to discuss handy commands and how you can speak a VIM language and go mouse-less with VIM 🎉.

In simple editor, you only have one mode that is insertion. You are typing and navigating with either arrow key or mouse. But with VIM you have 3 modes.

1. Normal Mode - As the name implies you are normally supposed to be in this mode. Press Esc and you are in normal mode.
2. Insert Mode - Anytime you want to edit something press i, a, A, c, etc... to get into insert mode and type.
3. Visual Mode - This is just like normal mode, but it allows you to highlight the block of text.

Don't think VIM just as a editor or VS Code extension, think of it as a language. And how to speak that language(initially) that we are going to learn in this post.

Everything in VIM falls in three categories. To speak the VIM language, do follow the tables properly. Later in the posts, I will explain how well these works together.

Operators

Text Objects

Before we move forward , lets understands the difference between iw and aw. Basically i and a, text objects are not limited to what described above and you can use different combination that we are going to explore after covering 3 categories. i - inner, it means only the word you are working with. and a means the word and the space that follows it. Also w means a simple string not including special characters but W includes a string with special character. Read on for more details.

Motion

You can prepend any of the motion commands with count, for ex instead of pressing just j to go down by one line, you can press 5j to go down by 5 lines.

Now that we had gone through basic motion, text objects and operators. Lets look at how they work together. You can combine operators with text objects. Initially you have to speak the language as you edit the text. For example if you have a following lines of code -

1<button onClick={handleClick} type="button">
2  Click Me
3</button>

and you want to change onClick handler, place you cursor anywhere between {} in normal mode (You have to be in normal mode to execute most of the commands) and press c i {, and speak it as Change Inside {. There are various other way to accomplish given task with VIM. Like to get the same result, you can press c i }, if your cursor is on the first letter of the word then c w, speak it as Change Word will do the job. But, for such editing I recommend using any of the former 2 and the reason I will tell you in advanced section. Following are examples to change or delete.

Instead of changing complete word if you want to change till something, then

First question arises is what is difference between change and delete. Change puts your cursor in insert mode after deleting a word, Delete keeps the cursor in normal mode.

From these, you have pretty good idea of how to combine operators with text objects. Speaking in the mid what you want to do is half job done (of course for 1 or maybe 2 weeks, with practice your fingers will automatically move to that command). For example if you want to change a word. Then look for operator to change(c) and text object for word(w/aw/aW/iw/iW), combine these two as per your needs and done 🎉.

One thing that we want to do while editing is surround some text with quotes, bracket, etc or change surrounding from one thing to other. For example in the following code-

1const sum = (a, b) => a + b;

Instead of directly returning from the arrow function, you want to do some other calculations and then return. To do that, you have to surround return value with { }. You can do that with ys, speak it as You Surround. To show one more thing that you can combine motions too with operators, put your cursor on or before a and after => then type

ys f; {, speak this as you surround find ; with }. Hope you get this. Basically, we are saying that surround the text object that includes finding ; with }. This is very useful, you can use this to surround whatever text object that you can think of and surround it with anything.

Another useful command is cs, speak it as Change Surrounding. Lets take an example that you have import statement -

1import InputMask from 'react-input-mask';

and you want to change double quotes to single quote. Just type cs " ', speaking it as Change Surrounding From " to '. VIM has pretty good idea of your code, even more then you 😉. So you can execute this command even when your cursor is anywhere inside double quotes.

Use . to rerun the last command. Lets take an example. You have an array like this -

1const array = ['0', '1', '2', '3', '4', '5'];

and you want to remove the quotes from each item. Go to the first entry "0" and press cs" , that is change surrounding from " to . VIM remembers this command, now go to second item and press . to rerun last command 🎊.

Macros are extension of . command, it allows you to recored a series of move and bind it to particular key and then re run it with that key. Press q and then any key you want next series of step to bind with. Execute steps and then press q again to stop recording, now press @ followed by key you recorded your steps to. This will execute you macro. Again lets understand this with example -

1const array = [
2  "First",\
3  "Second",
4  "Third",
5  "Fourth",
6  "Fifth"
7]

You want this array to convert in object that looks like -

1const object = [
2  { First: 'First' },\
3  { Second: 'Second' },
4  { Third: 'Third' },
5  { Fourth: 'Fourth' },
6  { Fifth: 'Fifth' }
7];

Let me first show you the command then will walk through how it works. First go to the start of first entry in array then press qw, to record steps to w key. And then yst,}wwveybbpa:j0w and then stop recording by pressing q 😌. Now, lets walk through this long command and understand it part by part.

1. yst,} - as our cursor is on the start first entry, this is we saying to VIM that you surround till , with }. This will surround our first entry with curly braces.
2. wwvey - we are going 2 words ahead to put our cursor on first letter of the entry, then v to put our cursor in visual mode, e to select that word to the end and then y to yank/copy that word.
3. bbp - go 2 words back from the previous position and then p to paste what we copied in the previous step.
4. a: - a to append : at the end of the word that we pasted in previous step.
5. j0w - We have completed our task till 4th step, but this step ensures that we can properly repeat the command, Press Escape key to bring back cursor in normal mode go one line down, and put cursor at the position from where we can rerun this entire command.
6. w - stop recording.

This may look tough but you can figure out your own combination to achieve the same result. Your cursor is already in place, just press @w to rerun our macro and boom 💥, you can watch the history being played in front of your eyes. You can also press 4@w to rerun the macro 4 times. This is why step 5 is important, so that VIM can chain your commands.

This blog gives you kick start to the VIM. Here are more materials to use in the journey to use VIM and go mouse-less.

1. VIM subreddit - https://www.reddit.com/r/vim/
2. Thoughtbot youtube channel
3. https://thoughtbot.com/upcase/vim

Surviving first week with VIM is hard. So, in conclusion I would like to share one tip. Initially you have to stop using arrow keys for navigation. Use h,j,k,l instead. These key are on the main row so easy to navigate. Slowly you will learn to use other motions discussed in the blog. Watching screen cast as suggested in the more info section helps a lot. It helps you to learn new things and get better with VIM everyday.