Improving your Productivity with VIM (+ VS Code Shortcuts)
Tags: beginners, learning, vim
Published: 2020-09-24 05:58:16

When my peers see me writing code they think I'm possessed by some kind of dark forze which drives me to use a series of *strange shortcuts* for them. The reality is that, with practice, I have gained a great ability to put the mouse aside.

But, to be honest, **the path was hard**. The vas majority Vim's gurus uses such a great amount of shortcuts, macros, and patterns that shocked me out.

## The Basics 

That's the entry point of this post, bring you a series of **most common** shortcurts that I use in my day to day as a web dev. Furthermore, there are also great shortcuts for VS Code that will take you to the next level.

### Modes

* <code>i</code> -> For normal mode. In this mode you can *insert text before the cursor*.
* <code>esc</code> -> Exit **insert mode**. A fat cursor appears and you will able to move throught the document.
* <code>Ctrl+v</code> -> Start visual mode (lines).
* <code>Ctrl+V</code> -> Start visual mode (blocks).

### Movement

* <code>h</code> -> Left
* <code>j</code> -> Down
* <code>k</code> -> Up
* <code>l</code> -> Right
* <code>0</code> -> Jump to the start of the line
* <code>$</code> -> Jump to the end of the line
* <code>G</code> -> Go to the last line of the document
* <code>zz</code> -> Go to the first line of the document

### Exiting

* <code>:q!</code> -> Quit and throw away unsaved changes.
* <code>:wq</code> -> Write (save) and quit.

### Most used shortcuts (for me)

#### Insert text

* <code>I</code> -> Insert at the beginning of the line.
* <code>A</code> -> Insert (append) at the end of the line.
* <code>o</code> -> Append (open) a new line below the current line.
* <code>O</code> -> Append (open) a new line above the current line.
* <code>gd</code> -> Go to a definition (variable, function...).
* <code>gf</code> -> Go to a specifil file.

#### Editing

* <code>r</code> -> Replace a single character.
* <code>x</code> -> Delete characters.
* <code>u</code> -> Undo
* <code>Ctrl+r</code> -> Redo
* <code>ciw</code> -> Replace the entire word.
* <code>cc</code> -> Replace the entire line

#### Cut and paste

* <code>yy</code> -> Copy a line.
* <code>2yy</code> -> Copy two lines.
* <code>p</code> -> Paste after cursor.
* <code>P</code> -> Paste before cursor.
* <code>dd</code> -> Delete a line
* <code>d$</code> -> Delete to the end of the line.
* <code>dw</code> -> Delete the characters of the word from the cursor position to the start of the next word.

#### Pro commands

* <code>line-number + G</code> -> Go to this line.
* <code>/search-term</code> -> Search inside the code. Move witch <code>n</code>.
* <code>%</code> -> Move to matching character ({}, []).
* <code>:/s/text-to-change/new-text/gc</code> -> Replaces the indicated text with the new one throughout the document.

## VS Code

* <code>Ctrl+n</code> -> Move forward through options in a drop-down panel.
* <code>Ctrl+p</code> -> Move backwards through options in a drop-down panel.
* <code>Alt+arrow keys</code> -> Move the current line up or down.
* <code>Alt+Shift+arrow keys</code> -> Copy the current line up or down.

I hope you will find it useful for your projects. Honestly in my case I have notably improved the way I write code 😉

<small>*Cover photo by [NihoNorway graphy](https://unsplash.com/@nihongraphy?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/keyboard?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)*</small>