Vim basics for beginners
Tags: neovim, vim, editor, webdev
Published: 2021-10-12 20:53:17

In the first [part of this series](https://blog.elvessousa.com.br/en/post/vim-part-1), I told why I've switched from VS Code to Neovim, but I didn't go deep into how differently Vim works. In this article I write more about these aspects.

### How Vim edits texts

In other editors, you just click and start writing. To save a file, just choose "save" on the menu or using the corresponding keyboard shortcut for the action.

This is completely different in Vim: the program begins in a quick edits mode, which does not enable writing text. This mode accepts navigation and commands to change text. To do this, commands are used, which can be simple as a shortcut key, or compound, where more keys are used to achieve a certain action.

For those who have never used it, this sounds very difficult and intimidating, but it is not. With practice, you get used to it and see the advantages.

## Normal mode

![Normal mode](https://i.imgur.com/936Nzmq.jpg)

This is the editor's default mode. To access it, always use the `ESC` key.

### Navigation through text

Navigation works as in most editors, arrow keys to move the cursor on the screen, `Pageup` or` Pagedown` to move between "pages", `Home` or `End` to go to the beginning or end of a line. Beside these shortcuts, there are others made just pressing normal keys like letters and symbols. Here are some of them:

**Simple commands:**

- **`g`:** moves the cursor to the end of the file.
- **`L`:** moves the cursor to the end of the screen. **L** comes from the word **Low**.
- **`M`:** moves the cursor to the middle of the screen. **M** comes from the word **Middle**.
- **`H`:** moves the cursor to the beginning of the screen. Note that this is not necessarily the beginning of the file. **H** comes from the word **High**.
- **`0`:** moves the cursor to the beginning of the line.
- **`w`:** moves the cursor to the beginning of the next **w**ord.
- **`b`:** moves the cursor to the **b**eginning of the previous word.
- **`e`:** moves the cursor to the **e**nd of the next word.
- **`J`:** **j**oins lines.
- **`%`:** shows the corresponding scope, inside parentheses, brackets or keys.
- **`.`:** repeats any operation done earlier.

**Compound commands:**

- **`gg`:** moves the cursor at the beginning of the file.
- **number + `g`:** goes to a specific line. Ex.: `23g` goes to line 23 of the document.
- **`f` + character:** moves the cursor to the next occurrence of the chosen character. Ex: `f(` moves cursor to the next (.
- **Number + `w`,`b` or `e`:** move the cursor to the beginning/final of the nth word after the current position. Ex: `2w` moves the cursor to the beginning of the second word.

### Text editing

Simple editing can be made in this mode.

**Simple commands:**

- **`x` or `delete`:** clears the character under the cursor.
- **`u`:** undoes latest changes.
- **`r`:** replaces the character under the cursor by the next that will be typed.

**Compound commands: removing content**

To delete content, use the `d` key; it works likes cutting in other editors. The way it will be deleted/cut will depend on the next letter typed:

- **`d`:** delete "the entire line. `dd` equals `Ctrl + X` in VS Code.
- **Number + `d`:** remove multiple lines. `2134dd` will erase 2134 lines.
- **`w`:** clears until the end of the word.
- **Number + `w`:** deletes certain number of words. Ex.: `d2w` erases two words.
- **`i` + character:** removes the content delimited by a character. Ex.: `di{` removes content between keys. An easy way to understand this is to remember the phrase _"delete inside {"_.
- **`i` + `w`:** clears the whole word.
- **`i` + `t`:** removes everything inside an HTML tag.
- **`t` + character:** removes content till a particular character. Ex.: `dt.` removes content to the next full stop. Remember the expression _"delete till ."_.
- **`$`:** clears from where the cursor is up till the end of the line. The `D` shortcut has the same effect.

**Compound commands: copying**

Copy works basically in the same way as removal. The command used for copying is `y`, which comes from the word **yank**. The same key combinations used for deleting work here, but applied to copy content:

- **`y`:** Copies the entire line. `yy` is equivalent to `Ctrl + C` in VS Code.
- **Number + `y`:** Copies several lines. Ex.: `1873yy` copies 1873 lines.

And so on, you got the idea.

#### Pasting content

To **p**aste the content, use the `p` key. It is worth mentioning that all deleted content is in the clipboard. Using `p`, will paste after the cursor and using `P` it will paste before the cursor.

---

## Insert mode

![Insert mode](https://i.imgur.com/vcHKVJH.jpg)

In this mode everything is quite familiar as it is like every other editor. There are several ways to access the mode to write text:

- **`i`:** opens insertion mode and moves the cursor before the current character.
- **`a`:** opens insertion mode and moves the cursor after current character.
- **`s`:** opens insertion mode and erases the character under the cursor.
- **`i`:** moves the cursor at the beginning of the line to insert content.
- **`A`:** moves the cursor at the end of the line to add content.
- **`o`:** adds a line below the cursor and enter the insert mode.
- **`O`:** adds a line above the cursor and enter the insert mode.

**Compound commands: changing content**

Another way to enter the insertion mode is to use the `c` command, for **change**. This follows the same pattern of previously described for removal and copy commands. It clips the content and opens the mode for insertion, very practical. For example, imagine that we have the following HTML markup:

```html
<p class="random-latin-text">
  Lorem ipsum dolor sit amet, consectetur <strong>adipiscing elit</strong>.
  Quisque eget lobortis velit. Maecenas nec molestie eros, eu efficitur erat.
  Nunc nec congue justo, et commodo dolor. Aliquam <em>facilisis</em> urna eget
  massa pulvinar, in bibendum ante convallis.
</p>
```

Just position the cursor in the markup and type `cit`. The result will be like this:

```html
<p class="random-latin-text">|</p>
```

The "|" above represents where the cursor will be, ready to enter new text.

---

## Replace mode

![Replace mode](https://i.imgur.com/pWoaamU.jpg)

This mode is basically the same as pressing the `Insert key`: the typed text overwrites the previous one. It is accessed by the `R` shortcut.

---

## Visual mode

![Visual mode](https://i.imgur.com/HdAG14O.jpg)

This mode enables text selection. It's activated by the `v` key. To select the text, just use the arrow keys. Clicking with the right mouse button also activates the mode, in case it is configured.

Commands made after visual mode will only affect the selected area.

---

## Command mode

![Command mode](https://i.imgur.com/8CcRTC2.jpg)

This mode is one of the most used, because it is the equivalent of a toolbar. With it we can save the file a file, for example. It is activated by the key `:`. From there just write the command desired and press `Enter`. Below are some examples:

- **`w` or` write`:** saves the current file.
- **`q` or` quit`:** closes the file. Add `!` to force quit if it complains of changes not saved.
- **`x` or `wq`:** saves and closes the file.
- **`h` or` help`:** shows the help screen.
- **`s`:** enter find/replace mode from the current line. Ex.: `s/rong/right` 'will replace the word "rong" for "right". `s/rong/right/g` does the same thing, in all occurrences on the line. `s/rong/right/g 8` make replaces the words in all occurrences for the next 8 lines.

---

## Curiosities

### Arrow keys

Despite being able to use the directional normally, Vim encourages the use of the `h`, `j`,` k` and `l` keys to move the cursor to the left, low, up and right, respectively. This is due to the fact that the computer used at the time by the Vi developer used a keyboard in which the directional were on that keys.

![ADM 3a](https://i.imgur.com/GjHEa0y.jpg)
_ADM 3A Keyboard_

Some aficionados abhor the use of arrow keys. In fact, if you get used to it, you can be very productive, because the keys are closer. Personally, I don't use this.

### ESC key

On the same keyboard above, the `Esc` was almost in the same position as the `Caps Lock` key. Upon knowing of this, you see the choice was not so strange, as the position of the `Caps Lock` key is much more comfortable than that of the current `Esc`. You can configure the editor to do that. I didn't do it myself.

---

Here I end this article! I can't teach everything, unfortunately: I don't know everything about it and a blog article is not enough for this purpose. Despite this, I believe this is the basics for you to start using this "scary" editor.

I suggest that as homework, use the "Vim Tutor": it is a command available at the terminal as soon as Vim is installed on the system. When writing `vimtutor` in the terminal, an instance of Vim opens without any plugins loaded, with a nice text that teaches more deeply every command I quoted here, with practical exercises.

In the next article, I will teach you how to make Vim more useful and beautiful. Because let's get real, it is really ugly and empty at first.

See you later!

### Links

- [This article in Portuguese](https://blog.elvessousa.com.br/post/vim-parte-2)
- [Vim](https://www.vim.org)
- [Neovim](https://neovim.io)

---

If this article helped you in some way, consider [donating](https://www.buymeacoffee.com/elvessousa). This will help me to create more content like this!