Demystifying Vim: A Beginner's Journey into Text Editing
Tags: vim, webdev, beginners, programming
Published: 2023-10-16 18:23:24

In the world of text editors, Vim stands as a legendary figure, renowned for its efficiency, versatility, and a learning curve that can seem daunting at first. If you're a writer, programmer, or anyone who works extensively with text, understanding the basics of Vim is a valuable skill that can significantly enhance your productivity. Today with this blog I want to highlight the basics of VIM editor that are essential for any beginner developer.
 
### What is VIM?
Vim, short for "Vi IMproved," is an advanced text editor that evolved from the Unix-based Vi editor, which was created by Bill Joy in the late 1970s. It is very popular in Linux-based systems.
What sets Vim apart from other text editors is instead of relying solely on your keyboard's arrow keys, Vim operates in different modes, each serving a specific purpose. VIM can get complicated because of the way it works, it largely differs from normal editors, where we are used to editing/writing as well as performing actions.
 
### Why VIM?
As mentioned earlier VIM is a popular editor in Linux-based systems, and it is generally the default editor for git. So having at least a basic knowledge regarding the editor could be helpful at times. That is why in this short blog I will cover the basic commands of VIM, post which one can easily use the editor for daily development work.

> **Extra Insights:** The blog will just cover the basics of VIM it has many more features. For advanced concepts of VIM refer to https://thevaluable.dev/vim-advanced/
 
### What is this Mode in VIM?
You may have come across terminologies like `normal` mode or `insert` mode for VIM. What does this mean? Let's find out.

VIM has **three** modes in which the editor state can be. The modes are:-

1. Normal Mode
2. Insert Mode
3. Visual Mode
 
Let's discuss each mode in detail

**Normal Mode:-** All actions that we can perform in VIM are done in normal mode. Actions like traversing, deleting words, deleting characters, new lines, finding a word, finding a letter, etc. All these actions are performed in normal mode. We will look into these actions later in detail. The editor is by default in normal mode, but if you have to come from insert mode to normal mode we use the `escape key`

> **Extra Insights:** The reason why VIM feels complicated is that it has modes for individual work, while the other editors are independent of that, and we as developers or users are very much used to that fact.

**Insert Mode:-** By default the editor is in normal mode, to switch to insert mode, we can do that by pressing the `i` key. Once in insert mode, we can add our content. It is basically the `write` mode. We cannot perform any actions here
 
**Visual Mode:-** In the scope of what we are trying to cover in this blog, the visual mode is a bit out of scope. Still, I will try to cover some basic commands in visual mode. To enter a visual mode we press the key `v`

### What are these actions we are talking about?
Basically, consider you have opened any editor of your choice. Actions are those things you perform apart from typing in the editor and creating your content. So actions can be, navigating, newline, backspace, find and replace, save and exit, etc. These actions are the ones that are performed in normal mode. 
Now let's look at these actions. I have divided actions according to the common thing they do. 
So let's dive ahead.

#### Common Actions:- 
I have identified two actions as the most common actions in any text editor: deleting a character typically achieved using the backspace key in a standard editor, and creating a new line.
So in VI editor, these actions are achieved as follows:

`O` or `o`:- The command is equivalent to “enter” in our normal editor. In normal mode when we press “O” or “o”, it adds a newline and we are automatically in **insert mode.**
`X` or `x`:- The command is equivalent to “backspace” in our normal editor. Using “X” removes the character that is under the cursor.
> **Key Takeaways:** To remember the association between `o` for Enter and `x` for Backspace, you can use a simple mnemonic phrase: **Open, Exit.**
- `o` in **Open** reminds you of the **Enter** key, as you often press Enter to open or start a new line or paragraph.
- `x` in **Exit** corresponds to the **Backspace** key, as you press Backspace to exit or remove characters.

#### Navigation
Navigation is the action where we want to go to a specific part of our editor. Following are the ways that can be used to navigate.

**Navigating up, down, left, and right:** (I have added a small trick to remember them)
`J` - down arrow (**Since J stands for joker so lower in value**)
`K` - up arrow (**Since K stands for King so higher value**)
`L` - right arrow (**Life is unfair, so although `L` should be left it would be right**)
`H` - left arrow (**Last remaining**)
So the arrow keys up, down, left, and right for VIM are `K`, `J`, `H`, and `L` respectively.

**Example:-**  My **n**ame is Manas Pant.
               My name is Manas Pant.
*(Assuming cursor at `n` of name in the first line)*
Pressing the `l` - Cursor moves to the `a` character of the _name_
Pressing the `h` - Cursor moves to the `n` character of the _name_
Pressing the `j` - Cursor moves to the next line over `n`
Pressing the `k` - Cursor comes back to `n`

> **Key Takeaways:** The reason for not using the arrow keys directly for navigation is that when VIM was being created by Bram Moolenaar he used the keyboard **Lear Siegler ADM-3A** which looks like the image below. So as you can see from the image, for the keyboard we don’t have any arrow keys, and the arrow keys are (HJKL)

![Lear Siegler ADM-3A](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yco82k6m32ad4gqi7no4.png)

Let's get back to the navigation actions. We have already seen up, down, left and right. Let's see other navigation.

**Navigating through Words:**
To navigate through words the keys used are (w,e,b)
`w`:- forward jump to the start of the word **(w for word)**
`b`:- backward jump to the beginning of the word **(b for beginning)**
`e`:- forward jump to the end of the word **(e for end)**

**Example:-** My **n**ame is Manas Pant. *(Assuming cursor at `n` of name)*
Pressing the `e` - Cursor moves to the `e` character of _name_
Pressing the `b` - Cursor moves to the `n` character of _name_
Pressing the `w` - Cursor moves to the `i` character of _is_

> **Key Takeaways:** The primary distinction between `w`, `e`, and `b` lies in the fact that with `w`, the cursor will jump to the start of the next word, regardless of its current position within the word. However, with `e` and `b`, the behavior depends on the cursor's location. For instance, if the cursor is at the start (or end in the case of `e`), and we press `b`, the cursor will jump to the previous (or next in the case of `e`) word. But if the cursor is within the same word, somewhere in between, it will remain in the same word.  

**Navigating to the beginning and end:-** 
To navigate to the beginning and end we have `gg` and `G` key presses respectively
`gg`:- beginning of file**(good game and lets start again)**
`G`:- beginning of the last line of the file **(Good Go at last )**
`number+G`:- jumps you to the specified line **(it is similar to ctrl+G of VS Code)**

To navigate to the beginning and end of the line where the cursor is we have `0` and `$` respectively
`0`:- beginning of the line **(since you are zero start again)**
`$`:- end of that line **(earned everything now(in dollar), nothing more to be done so lets end)**

**Example:-** My **n**ame is Manas Pant.
              My name is Manas Pant.
*(Assuming cursor at `n` of name in the first line)*
Pressing the `gg` - Cursor moves to the start of the file `M`
Pressing the `2G` - Cursor moves to the last line over `M`
Pressing the `$` - Cursor moves to the end of the last line over `.`
Pressing the `0` - Cursor comes back to the start of the last line `M`.

> **Key Takeaways:**Navigating to the last of a line and navigating to the last of a file can get confusing so the trick to remember is we have `g` in the navigation to file, and `g` represents Go. So when we are about to go we refer to the file.

**Navigation in a combination of numbers:-**
The navigation specified above can also be used with a combination of numbers.
`3w`:- If we press this combination then we are kind of pressing `w` 3 times. So it will end up making the cursor to the the next third word.
**Example:-** My **n**ame is Manas Pant *(Assuming cursor at n of name)*
Here `3w` will move the cursor to `P`

Similarly, we can have combinations for `e`, `b`, `h`, `j`, `k`, `l`, and `G`. 
> **Extra Insights:**For `gg`, `0`, and `$` we don’t have a number combination(I hope this part is self-explanatory). 

Let's see some more examples of combination navigation 
**Example:-** Lorem Ipsum is simply dummy text **o**f the printing and typesetting industry. Lorem Ipsum has been the industry's
*(Assuming cursor at `o` of `of` word)*
Pressing 3w:- This will move the cursor to `a` of _and_
Pressing 3e:- This will now move the cursor from `a` of _and_ to `y` of the _industry_.
Pressing 3b:- This will move the cursor to `a` of _and_.
Pressing 10l:- This will move the cursor 10 times to the right so from `a` we will go to the first `t` of _typesetting_ in the middle 
Pressing 12h:- This will move the cursor left side 12 times, so from `t` we will go to `g` of _printing_

**Navigating through parenthesis:-** 
To navigate through parenthesis we use the key `%`. `%` navigates us to the closing parenthesis of the upcoming parenthesis pair. 

> **Extra Insights:** The parenthesis should be in pair, if not in pair `%` would skip that parenthesis.

**Example:-** (My) name is (Hello World !)
Pressed `%`:- It navigates to the closing bracket `)` after World!
Again pressed `%`:- Navigates to the starting bracket `(` that is followed by Hello

####  Find
The find actions are useful when we want to find any specific word or character.
 
The following are the ways to perform a search 
`f`+ character: To find the next character that resembles the given character. **(f for find)**
`F`+ character: To find the previous character that resembles the given character **(f for find)**
`*`+ character: To find the next “word” occurrence which is under the cursor. **(To find a star is a big thing so `*` will search for words and stars are to look forward)**
`#`+ character: To find the previous occurrence of the word that is under the cursor. **(Since for stars we look forward `#` will be backwards)**
`/` enter the text and then press `n` or `N`: To find a given text or a character or regex.**(Forward slash means looking forward so searching)** 
`/` with `n`:- Search the text and then look for the next occurrence in the forward jump **(n for next word)**
`/` with `N`:- Search the text and then look for the next occurrence in the backward jump **(n for next word)**

**Example:-**  My name **i**s Manas Pant. Today I want to talk about VIM editor and its uses. This is going to be fun.
*(Assuming cursor is at `i` of is that occurs first)*
Pressing `*`:- Jumps to the next occurrence of `is` 
Pressing `#`:- Jumps back to the previous and the first occurrence of `is`
Pressing `f`:- Jumps to the `i` in editor
Pressing `f`:- Jumps to the `i` of its
Pressing `F`:- Jumps to the `i` of editor
Pressing `/going`+`n`:- Jumps to the `g` of going 

> **Key Takeaways:**To find a character we use the `f` key while for words we have the `/` key. But to remember easily, I would suggest just remembering that we can use `/` for both words and characters thus eliminating the use of the `f` key.

> **Key Takeaways:**In VIM for a few commands we have both the `CAPS` of a key and the key itself. So to remember this, just remember `CAPS` is **back** so `N` and `F` will search back. Similarly, we will see `P` later. 

#### Replace
Replace actions can be used to replace a word or a character. The following are the ways to perform the replace
`r` character:- It replaces the character that is over the cursor with the character that is mentioned. The use here is we don’t need to change the mode to insert **(r for replace)**
`:%s/old/new/g`:- When we want to replace the old text/word/character with a new one.

**Example:-**  My name **i**s Manas Pant. Today I want to talk about the VIM editor and its uses.*(Assuming cursor is at `i` of is that occurs first)*
Pressing `r`+ I:- This will replace the word *is* with *Is* as we replaced the first character.
Pressing `:%s/Manas/Someone/`:- This will replace the word *Manas* with the word *Someone*

> **Key Takeaways:** `g` here represents all the instances of that word in the file. If you don’t mention `g` then it will replace **the first** instance of that word from each line.

#### Deleting
You have already seen `x` as one viable solution to remove characters. But if we want to delete more than just a character, maybe a word or a sentence then we require the delete commands. We use the `d` key for that purpose.
`d` character:- To delete. We can combine d with navigation to perform delete. **(d stands for delete)**

> **Key Takeaways:** `d` alone cannot be used to delete anything. It has to be used along with some navigation commands or other commands.

`dw`:- This deletes the character starting from the cursor till the start of the next word.
`de`:- delete the characters till the end of a new character is reached
`db`:- delete the characters till the beginning of the new character is reached
`dl`:- delete to the right
`dh`:- delete to the left
`dd`:- This deletes the whole line


**Example:-**  My **n**ame is Manas Pant. *(Assuming cursor at `n` of the name)*
Pressing `dw`:- It deletes the characters from `n` till the start of the next word. So we will get “My is Manas Pant”

#### File Management
These commands and actions are used for file manipulation, including saving, not saving, exiting the editor, copying a line, and pasting content in the file. The corresponding commands for each action are as follows:
`:w`:- To save the file **(Write and Secure)**
`:wq`:- To save the file and quit the editor **(Write and Quit)**
`yy`:- Copy a line **(Yank a Line)**
`p`:- Paste the line after the cursor **(Place Below)**
`P`:- Paste the line before the cursor **(Place Above)**
`S`:- Clear the current line and then insert mode **(Start Over)** 

### Conclusion
In this comprehensive guide, I have tried to cover the basic commands in VI with tips and tricks, so that the learning could become more fun and interesting. The division of the content can be particularly helpful for memorization and for establishing connections to specific aspects of VI that may initially appear complex. I have focused primarily on the fundamental aspects of VI, providing an amount suitable for a beginner developer.

### Your Feedback Matters
I hope this blog has been a valuable resource for you in your quest to master the VI editor. Your feedback and questions are essential for improving this guide and providing more useful content. If you have suggestions or additional topics you'd like to see covered, please feel free to reach out.