Vim basics for beginners

In the first part of this series, 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

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 word.
b: moves the cursor to the beginning of the previous word.
e: moves the cursor to the end of the next word.
J: joins 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 paste 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

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:

<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:

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

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

Replace mode

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

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

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 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 did not 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 extremely ugly and empty at first.

See you later!

dois:pontos