DEV Community

Cover image for Vim basics for beginners
Elves Sousa
Elves Sousa

Posted on • Edited on

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

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

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>
Enter fullscreen mode Exit fullscreen mode

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

<p class="random-latin-text">|</p>
Enter fullscreen mode Exit fullscreen mode

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


Replace mode

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

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

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 orwrite: saves the current file.
  • q orquit: closes the file. Add ! to force quit if it complains of changes not saved.
  • x or wq: saves and closes the file.
  • h orhelp: 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 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


If this article helped you in some way, consider donating. This will help me to create more content like this!

Top comments (12)

Collapse
 
phantas0s profile image
Matthieu Cneude

Nice article! I would add that Vim really make sense when you have the good old habits of a typist, when your hands stay on the home row.

I've written my own guide if somebody is interested: thevaluable.dev/vim-beginner/

Collapse
 
elvessousa profile image
Elves Sousa

Hello, Matthieu! I'm glad you liked it.

What you said makes a lot of sense. I had a typewriter when I was a kid, and the home row was really a big deal. By the way, nice blog!

Collapse
 
zaeroses profile image
Zaeroses

Hi Elves, I haven't used dev.to before but I created an account to leave you a comment: I've read a couple of your vim articles now, and I wanted to say that they are very useful and such high quality! Really well written my friend, and really helpful for a beginner like me! Thanks a bunch!

Collapse
 
elvessousa profile image
Elves Sousa

Wow! Your feedback made my day!
Thanks a lot, Zaeroses!

Collapse
 
jeroen profile image
Jeroen van Meerendonk • Edited

On the same keyboard above, the Esc was in the same position as the Caps Lock key.

Maybe you mean it was in the same position as the Tab key? And the Ctrl was in the Caps Lock one.

I really want to use Vim as a daily driver, but I never start.

Collapse
 
elvessousa profile image
Elves Sousa

Well, you are right... But the change in configuration I meant is usually done to the Caps Lock key. So I included the word "almost" in that part of the text now, hahah...

About using Vim, take your time. If you devote some of your free time to it I'm sure you see the advantages. In the next article I'll show how to make it more suitable to web development, like VS Code.

Doei!

Collapse
 
foxy4096 profile image
Foxy4096

Yes, I can exit the vim now 🥲
Help Poor Children in Uganda

Collapse
 
elvessousa profile image
Elves Sousa

Yay!

Collapse
 
academicspade profile image
SpadeAcademic • Edited

I really don't get your reasons for not using VSCode. You vaguely state in your linked post that it is slow (?) without giving any details. I had a terrible experience with Vim and have gladly stopped wrestling with it in an attempt to cajole it to work fast. I have quit it because there is constant keybinding conflicts between different plugins. Many plugins do not work well with each other. Vim is terrible for C/C++ development. There is no good autocompletion (I tried Deoplete, MuComplete, YouCompleteVim, VimComplete, clang-complete and none of them are as fast as VSCode). There is no good debugging tool (I tried Vimspector, but that is not good at all). Why put yourself through so much torture? You end up wasting time polishing your .vimrc. I am now back to VSCode and Visual Studio IDE. Please don't tell me that these are GBs of harddisk space. In trying various vim plugins, my plugin folder itself was multiple GBs in size as well. In summary, do not use VIM for what it was not meant to be - a good IDE. It is not. It is a good text editor, but just leave it at that.

Collapse
 
elvessousa profile image
Elves Sousa

Well... I think that if I have options, I use the one I like most, right? I found VS Code quite slow in many occasions. For me, this is a big deal. VS Code is good enough, but I liked my experience with Vim and Neovim so far. I have both installed in my system, and don't think I have to stick with just one of them. For code completion, I use CoC (Conquer of Completion) and its plugins, which have been enough for my webdev needs. Many of them are forks of VS Code extensions.

About the "torture" you said, my Vim setup is quite minimalistic. I don't tinker with it too much. It is just one simple file with less than 130 lines. I didn't add a lot of key bindings, I just use Vim as it is. Torture for me is wasting time waiting for a bloated IDE to load and see it using a lot of my resources, with features I don't really care.

I can't argue against you about your C++ development experience in Vim, as it is not a language I worked with. You hated it, and I believe you: Vim is not for everyone. Certainly, Visual Studio does a better job with C++, and if you like it better, there is nothing wrong with that. I'm not here to call every other editor/IDE trash or to convince everyone to knee before the "almighty Vim". I'm not that kind of guy, hahah...

Collapse
 
fmgordillo profile image
Facundo Martin Gordillo

The link from

In the first part of this series

is broken 😢

Collapse
 
elvessousa profile image
Elves Sousa

Hello, Facundo. It is not broken anymore, hahah...

You can read it on my blog or on Dev.to if you prefer .