⚡10 Vim + VSCode tips that will supercharge your productivity

Develop faster with these quick Vim + VSCode tips

This post was originally posted on my personal blog at jwbaldwin.com

When I started Flowist.io, I decided: I want to learn vim. And I want to be fast.

Learning Vim can be hard at first. But combining it with VSCode can make that a bit easier - and you get the best of both worlds!

Here are some of the most useful tips and tricks that instantly allowed me to work faster! P.S.: great resource for starting out: devhints.io/vim

Vim secret: It's not hard. Just learn what the letters mean, combine them, and see what happens!

Setup

First of all, to install vim in vscode:

1. Open Visual Studio Code
2. Go to Extensions
3. Search for vim
4. The first plugin named Vim is the one you want
5. Click install
6. Boom!

1. vim-surround

This plugin lets you surround with or remove surrounding elements (think: ", ', {}, (), etc.)

This is a must-have plugin for Vim. I don't believe in immediately installing tons of plugins, but some of them are just necessary.

ve S<tag>

2. vim-motion

Press the keybind and then use the letters to move through your file. Another must-have. Not a replacement for other Vim movements, but incredibly useful for moving quickly and being more productive.

My keybind and config to jump-start you :)

    "vim.easymotionMarkerFontFamily": "FiraCode-Retina",
    "vim.easymotionMarkerBackgroundColor": "#7e57c2",
    "vim.easymotionMarkerWidthPerChar": 8,
    "vim.easymotionMarkerFontSize": "14",
    "vim.easymotionMarkerYOffset": 4,
    "vim.normalModeKeyBindingsNonRecursive": [
        {
            "before": [" "],
            "after": ["leader", "leader", "leader", "b", "d", "w"],
        }
    ],
    "vim.easymotion": true,
    "vim.hlsearch": true,

> <space>

3. jj

Hitting <esc> sucks. I didn't realize I wasn't the only one who felt this, and everyone knew a better way. Map something simple to <esc> instead (I use jj, but anything easy works.)

    "vim.insertModeKeyBindings": [
        {
            "before": ["j", "j"],
            "after": ["<esc>"]
        }
    ]

> jj

4. cmd + p

Open files super quickly. Don't use the mouse!

> cmd+p

5. V

Visual mode (think highlight and select) but for a whole line at a time.
Didn't know this existed either.

> V

6. yip, yap

Here's where things get expressive!

Helpful for grabbing functions or methods and quickly copying them to paste elsewhere.

y = yank
i = inner (in)
p = paragraph

and

y = yank
a = a
p = paragraph (including newlines)

> yap

7. cit, yit

Great for editing HTML. 10x faster then navigating inside of the tag and editing or copying it.

c = change
i = inner (in)
t = tag (YES, html tags!)

Bonus tip: Use ", and { to speed up html and javascript editing too!
and

y = yank
i = inner (in)
t = tag

> cit

8. dw, df

Easily remove words faster.

d = delete
w = word

and

d = delete
f = find
= item to search for and include in the delete

> dw dfs

9. ci", ci{

Change class tags, hrefs, strings and edit function bodies way faster.

c = change
i = inner (in)
" = item to change inside of

and

c = change
i = inner (in)
{ = item to change inside of

> ci{

10. f_, F_

Super useful for moving to specific items. Way faster than lllllll or even 8l...h

f = find (ahead of cursor)
_ = anything to search for

and

F = Find (behind cursor)
_ = anything to search for

> f2 F3

BONUS: u, r

Some bonus must-haves!

u = undo the last change

and

r = replace (r + thing to replace with)

> <space> dit ... u

Conclusion

Since I started working on Flowist.io I made a serious effort to get proficient with vim. Hopefully, this helps you boost your vim speed too!

Thanks for reading :) Catch me on twitter @jwbaldwin_

Comments

[Andreas Stamataris]

Great article James! I think the gifs help illustrate the value of some vim combinations like ci.

I also get the feeling that your usage of an IDE/editor/whatever is closer to mine so I wanted to ask.

1) What made you want to learn vim? Do you feel the appeal of not using a mouse?

Personally, having tried vim 3-4 times now (for more than a week each time), I don't see the appeal.
For example, you mentioned vim easy motion to move to an exact location.
2)Have you found that to be much quicker/efficient than a mouse? Or even better a track pad? Shall I give it another go with easy motion?

3) Do you refrain yourself from using VSCode commands like duplicating lines etc?

Thanks for your time 😃

[James Baldwin]

Thanks! Glad they helped, spent too long making them haha.

Hmm good questions:

1) Every couple of months I try to learn/do something that makes me faster and more productive, this time it was dedicating myself to vim. I do a lot of work on my laptop and had just spent a couple of months relearning how to touch type at about 80-90wpm and it seemed like the next frontier. Basically - I wanted to only type, every time my hand moved to my mouse I break my flow just a little bit.

I definitely am not a diehard Vim user. I don't think it's for everyone. However the obstacles I had in previous attempts were all addressed by a combination of: much better typing, VSCode environment (can't see myself using pure vim, it is way too useful and pleasing), plugins like easymotion, and the keybind jj (no joke).

2) I think I felt faster in about 4 days. I really forced myself to use it, I disconnected my mouse avoided the track-pad like the plague. The first couple days I spent configuring + googling every time something felt slow in vim. Now I'd say I'm about 1.5x faster than using a mouse or keypad! Easymotion is honestly amazing, I use the other vim motions too, but moving through files with it makes using a mouse feel clunky.

3) Nope! I like to combine the two, it's where I feel most productive. The VSCode commands I use the most are cmd + p, and cmd + d (duplicate cursor) which works with vim!

Reach out if you have any other questions, or if you give it another go I'd love to hear your progress!

[Andreas Stamataris]

Thanks for answering my questions! 😁

I might try again but this time with easy-motion.

Personally I found vscode vim plugin quite laggy but I've had no issues with this extension marketplace.visualstudio.com/items...

[Julian Iaquinandi]

Great article :) I'm trying to force myself into the vim workflow for the 4th or 5th time XD

I've recently found the Neovim integration which exposes Neovim as service to be consumed inside of VSCode, no emulation!

[James Baldwin]

Thanks, I appreciate it :)

And good luck! It's totally worth it. That's about how many times I tried as well. Took time to fix and speed up my typing (another struggle, but worth it), and then just forced myself by working off my laptop (so at least no mouse).

Once I added a couple of the plugins and bindings I mention, I couldn't go back :)

I'll give it a look, I'd heard certain bindings are finicky - but I'm finding the same in the Vim extension too.

[Patrick Charles-Lundaahl]

You're speaking my language!
The change-in-tag is definitely new to me - I'm going to give that a shot tomorrow! Motions are the number one reason I get grumpy without vim.

[James Baldwin]

Love it!! Right? Knowing tags were an object really helped me make the leap.

Totally agree, anytime I edit text I miss them.

[Amaury Borges Souza]

I using VSCode for YAML in Ansible, I thinked yo use another IDE but I VSCode é better than all.