Becoming a More Productive Developer With VSCode and Vim

This is the introduction to the book Boosting Your Coding Fu with VSCode and Vim

Visual Studio Code is superb. It offers an unparalleled user experience with great support for many languages and development ecosystems. It comes with great defaults and is super easy to use and to get started with.

Vim is awesome. Its modal nature and text editing features make it unique amongst other editors. Vim offers a complete different level of text editing proficiency, speed and accuracy from anything else out there.

The combination of both couldn't be anything less that amazingly superbsome (yep, I just did that).

In the upcoming days, and as you read these pages and practice, you will boost your Visual Studio editing skills incredibly. By combining the strengths of Vim and Visual Studio Code, you will be able to make the interface between your brain and the computer ever so thin, making your thoughts seamlessly materialize into code.

Here is what we're going to cover in this book:

• What is Vim? And Why Use Vim in VSCode?
• How to Install Vim in VSCode?
• Basic Surviving Skills in Vim
• Moving Blazingly Fast with Core Vim Motions
• Editing at The Speed of Thought With Vim Operators and Motions
• Vim's Secret Language
• Inserting Text a la Vim
• Selecting Text in Visual Mode
• Copy and Pasting Taking Advantage of Registers
• Surrounding Things with Vim Surround
• Moving Even Faster with the Sneak and EasyMotion Plugins
• Creating Custom Shortcuts to Make You More Effective
• Supercharging Multiple Cursors With Vim
• Creating Reusable Editing Units With Macros
• Integrating VSCode with Neovim For Maximum Awesomeness

At the end of this book you'll be capable of fine grained text manipulations and powerful text transformations that were previously unreachable to you. And over time, and as you practice and get comfortable with the different Vim commands, you will become faster and more proficient at editing than you were ever before.

This book doesn't assume any prior Vim knowledge so don't worry if you aren't familiar with Vim. I'll guide you through all the concepts and techniques you need to know to be effective with Visual Studio Code and Vim.

What is Vim?

Vi is an ancient text editor. Old even before the first age of the world. It was designed to work on contraptions called terminals with the very uncommon yet inspired characteristic of functioning in a modal fashion. That is, it has a mode for inserting text, another for editing text, a different one for selecting text, and you get the gist.

Vi's latest and most celebrated incarnation is Vim (Vi IMproved and formerly Vi IMitation) which works both with text and graphical interfaces, comes with a plethora of improvements over vi and is supported on every platform known to humankind.

But the impact of Vim doesn't stop with Vim, Vim's ideas are so very remarkable that they have transcended the Vim editor itself and propagated into other editors. Today you can find Vim-like modes in almost any editor and IDE that you can imagine. Like, appropriately, in Visual Studio Code.

Why Vim? Isn't Visual Studio Code Enough?

Why should you care about learning about an ancient editor in this day and age? Does it really make such a big difference to my Visual Studio Code setup?

The truth is that Vim provides a different way of interacting with text from anything I've ever seen. A way that gives you a completely different level of control and fluency when editing code.

At the hands of an experienced user, editing text with Vim seems like magic:

• Vim makes you faster.
• Vim makes you more precise
• Vim unlocks a completely different level of control in text editing
• Vim thins the interface between your brain and the computer
• And it is awe-striking to behold when doing presentations :D

Awesome! That sounds very good and all that... But... How can Vim achieve all this? The answer is modes.

Vim's modal nature empowers your keyboard to control every aspect of your editor. Every mode is a clean slate that gives your keyboard new powers, to edit text at lightning speed, navigate at the speed of thought, select and move text to your heart's content, and more.

With Vim, you're no longer limited to inserting text nor subject to the tyranny of the mouse to click, navigate or select text. No. After using Vim for a while, you'll be like a code surgeon that makes expert incisions with surgical precision whenever and wherever it is required, navigating through your code and codebase with the lightning speed and accuracy of a entirely keyboard driven workflow.

So Why would you want to learn Vim in this day and age? Paraphrasing the mighty Drew Neil author of Practical Vim and master of the most obscure Vim arcana:

Vim is for programmers who want to raise their game. In the hands of an expert, Vim shreds text at the speed of thought.

And who wouldn't want that?

Why Vim in VSCode and Not Just Vim?

You may be wondering... Ok. If Vim is so good then... Why not just use Vim instead of Vim inside Visual Studio Code?

Great question! The truth is that setting Vim to work with a feature set similar to modern text editors is not a trivial task. Features likes code completion, code navigation, in-editor error messages, etc, although supported by Vim don't work perfectly out of the box.

Visual Studio Code and Vim together offer a very sweet spot that balance the ease of setup and super rich development user experience of Visual Studio Code with lots of the amazing features present in Vim.

The translation is not yet perfect though. And if you're an experienced Vim user you may find some features missing. But all in all, VSCodeVim offers a very pleasant Vim experience outside of Vim.

A Brief Note About the Conventions Used in This Book

Since a lot of what happens in Vim depends on the location of your cursor, I've used a series of diagrams that show the position of the cursor changing over time as you type commands. And since it is quite unconventional from other programming books, I think you'll find it helpful to have it explained so you're prepared before you encounter it for the first time. Here's an example:

wwww ==> v   v v  v   v
         word. is two words

That means the following:

  commands you type    position of the
   /                    /   cursor changing
  /                    /    as you type
wwww ==> v   v v  v   v  
         word. is two words
           /
          /
      text in your editor

So:

• The text word. is two words is the text that is inside your editor which is subject to change or navigation
• You type the command w successively (in this case 4 times)
• Every time you type the command, you move the cursor (represented by v) to a new location

At times, it will be helpful to compare how two commands perform when applied to the same bit of text. In those cases I've used the following diagrams:

wwww ==> v   v v  v   v
         word. is two words
         word. is one WORD
WWW  ==> ^     ^  ^   ^

Where the bottom part is similar in meaning to the top part we discussed earlier but for the fact that the cursor is represented by a caret ^ instead of v.

When explaining commands we'll pay heed to the following conventions. For operations and motions:

f{character}

f            - f is a literal f, expected to 
               be typed as-is.
{character}  - is a placeholder that needs to be
               substituted by something. The name
               between {} will be descriptive of
               what that something is expected to
               be. In this case a character.

When constructing and applying text-objects:

{operator}{a|i}{text-object}

{operator}    - placeholder
{a|i}         - either type the letter a or the letter i
{text-object} - another placeholder

And for ex-commands:

:[range]s/{pattern}/{substitute}/[flags]

:            - denotes the beginning of an ex-command.
[range]      - the [] denote that this part is optional.
               The name will be descriptive as in the 
               case of placeholders.
s            - command to be typed as-is.
{pattern}    - again this is a placeholder.
{substitute} - another placeholder.
[flags]      - another optional part.

Give Feedback Freely!

If you find any diagram or explanation confusing, have any questions, want to provide feedback, or even if you enjoyed the book and want to say kudos! Don't hesitate to ask me on twitter at twitter.com/Vintharas. My DMs are open and I'll always be more than happy to answer your questions.