Vim with react & vscode!

Foreword

This guide is purely for myself, and won't be comprehensive nor be friendly for people starting out. It's just for me to document the sequence of my Vim learning, and to easily find the shortcut I need.

 

The following commands are laid out in the order of my learning. Personally, I had to get used to each command before proceeding to the next commands. I'm trying to get used to Vscode Vim integration, and it's been awesome so far! I'm using MacOS at the moment.

 

For a comprehensive tutorial, refer to 'Learn Vim' from vscode market place (interactive learning tool, can be used within the vscode editor), or type 'vimtutor' in the command line. 

 

It's almost nearing the end of the year, and I've been thinking to upgrade my knowledge & skills, hence why I've been reading up renowned books such as Effective Java and Designing Data Intensive Applications. However, I'm also nearing my internship (starting from next week Monday - that's tomorrow actually!), and that internship will be using React subtantially. So I've started reading The Road to React by Robin Wieruch, and so far I've been enjoying it very much.

 

One of the really cool things that I've discovered is Vim. I will continually update this post as I discover more cool tricks. It really helps your development flow. As with any new tools, the shortcuts and long-lived habits really prevent you from picking these tools and instantly picking up to a productive speed. However, I can really see Vim being my primary editing tool, especially with Vscode Vim integration. 

0 Getting started

Basically what you need to know if you don't want to get screwed when starting out vim. 

0.1 Open vim, exit vim

This is unnecessary if you are using vscode vim integration. However, I started vim to edit files such as .gitignore right through the terminal without having to open an external text editor. So here's the command you type to open a file in vim editor:

vim <filename>

If you want to save the file and exit, press 'esc' and type the following:

:wq

(wq is basically 'write to file then quit')

0.2 Insert mode & normal mode.

Press i to enter insert mode. 
To exit insert mode and enter normal mode, just press 'esc'.

1 Basic normal mode - navigation

Be in normal mode to try these commands

1.0 Substitute for arrows

In the normal mode, press the following

h, j, k, l

1.1 Enter insert mode 

Enter insert mode at different locations. i for insert, a for append.

before cursor: i
start of line: I
after cursor: a
end of line: A

1.2 Move cursor by word

To the right: b (for 'back') 
To the left: e (for 'end')

1.3 Delete

x, dw, dd

2 Basic insert mode - navigation

2.0 Move back and forth

 Move back and forth without using arrows or normal mode

ctrl-f: go forward by one letter
ctrl-F: go backward by one letter

It's useful in situations like above where you want to move cursor to the right by just one character without using arrows or going back to normal mode.

 

2.1 Remove word 

ctrl-H: use it as a subsitute for backspace. 
ctrl-W: instead of 'option-backspace', use this. (delete by word)
ctrl-U: instead of 'cmd-backspace', use this (delete line)

It's useful in these cases

 

2.2 Forward delete workaround

There's no native command for forward-delete in insert mode; compare this with dw in normal mode that allows you to delete the portion of the word that follows the cursor. So you should prefer to use normal mode to do this kind of things. 

 

However, there's a workaround. ctrl-O is a command that allows you to use a normal mode command once and immediately takes you back to insert mode.

 

To execute the effect of dw in insert mode:

ctrl-O
dw

 

3 Intermediate normal mode - braces, tags, brackets

3.1 Change enclosed content

Change the enclosed content of:

tags <></>: cit
braces {}: ciB
brackets (): cib

Finds the tag/bracket/braces nearby and deletes the content enclosed. Then enters insert mode.

Usage for cit (similarly for cib and ciB):

3.2