Visual Studio Vim



I started using Vim as my main editor around six months ago and I can say it hasbeen a worthwhile experience because it has pushed me to think in a moreefficient way when it comes to editing text.

This article explains my rationale for switching to Vim so, hopefully, it helpsyou make a decision on whether investing in learning Vim is justifiable for youtoo.

My history with text editors

Visual Studio Code and Vim offer a very sweet spot that balance the super rich development user experience of Visual Studio Code with lots of the amazing features present in Vim. Installing Vim Inside Visual Studio Code. In order to bring the awesomeness of Vim inside Visual Studio Code you’ll need to install the VsCodeVim plugin. Vim is a very different tool than Visual Studio. Plugins may help you get certain bits of functionality you desire, but do not expect them to work exactly like VS, work well together, or even work at all. Vim emulation for Visual Studio Code VSCodeVim is a Vim emulator for Visual Studio Code. 🚚 For a full list of supported Vim features, please refer to our roadmap. 📃 Our change log outlines the breaking/major/minor updates between releases. See Integrate gvim with Visual Studio to use vim with Visual Studio without embedding. The -P option allows you to launch gVim inside an application supporting MDI windows (such as Microsoft Visual C). This option is somewhat buggy still, and can crash Visual Studio 6.0 if you try loading Vim with documents open in the default editor. To use it, add the following to the tools menu in Visual. Neo Vim (VS Code Neovim) Neovim integration for Visual Studio Code For those who don't know Neovim is the fork of VIM to allow greater VIM extensibility and embeddability. The extension is using full embedded neovim instance as backend (with the exception of the insert mode and window/buffer/file management), no more half-complete VIM emulation.

Studio

I have tried a number of text editors since I first learnt to code just overthree years ago and I’ve had good experiences with each one for the most part.

I want to write a bit about those experiences so you can see where I’m comingfrom and understand how I came to using Vim eventually.

Sublime Text

The first editor I used was Sublime Text 3. Ichose it because it seemed to be really popular at the time amongst webdevelopers and most tutorials recommended it as a beginner friendly option.

At this point, I was only just learning to code so I only made use of its mostbasic features, although I did learn how to install plugins for addedfunctionality. Emmet was one of my favourites as it helpedme write HTML faster and that was just awesome.

I used Sublime for well over a year and even completed the Front-End certificateon freeCodeCamp doing all my projects within it. To be honest, I didn’t have anyreal problems with Sublime save for the popup that shows up every now and thenencouraging me to purchase the full version of the product.

To be sure, the free version is unrestricted in its feature set, but you justhave to deal with that popup and it can be annoying sometimes. As I didn’t have80 dollars to spend on a text editor, I began to look for alternatives.

First stint with Vim

Visual Studio Vim

Around this period, I decided to give Vim a go for the first time since it was always part of the conversation when you look at text editors for programmers and was favoured by many.

Vim was definitely more difficult to start with and although I was able to learn the basics, I just didn’t see why everything had to be so complicated.

I wasn’t productive at all so I gave up on Vim after messing with it for a while and decided to take a look at Atom instead which was closer to Sublime in terms of interface and workflow.

Atom

Switching from Sublime to Atom wasn’t difficult because Atom is largely inspiredby Sublime so they had a lot in common which made it really easy for me to startusing it.

All the plugins I used or an equivalent were available on Atom so I was prettymuch good to go from the start. As a result, I was able to get my work donewithout much fuss.

However, being built on Electron, Atom was having a huge impact on my RAM andCPU. As I had only 4GB of RAM at the time, this was significant to me andnecessitated an upgrade in that department which I effected by installing anadditional 4GB on my computer.

With Atom, performance was not as good as Sublime from the start. I was notsurprised by this since basically all other Electron apps I had tried had moreor less the same issues. Startup time on my PC was slow, but once it loaded up,it wasn’t too bad.

Overtime, I became frustrated at the lack of improvement in this area despitereceiving regular updates. So I sought a change all over again.

Visual Studio Vim Vimrc

Visual Studio Code

Around this time, Visual Studio Code wasgenerating a lot of discussion in programming forums and had a lot of good presson various blogs. Since it was also built on Electron, I wasn’t expecting toomuch difference from Atom in terms of performance, but I gave it a whirl anyway.

I wasn’t too impressed at first; it didn’t seem to offer anything that I wasn’talready getting from Atom and performance wasn’t significantly better. So Iuninstalled it and stuck with Atom.

However, with each monthly release, there would be some hype, and I woulddownload it again and try it out. It always seemed to get better while Atom, incontrast, was stuck in a rot especially on the performance side.

Eventually, VS Code became clearly superior in feature-set and performance so Iswitched to it full-time. At this point, I deleted Atom from my Computer and VSCode reigned supreme.

Switching to VS Code from Atom was not as seamless as the switch from Sublime toAtom. This was partly because the interface was a little different and it tookme some time to adjust.

The default key bindings were also so much different from what I was used tocoming from Atom. This issue was easily solved by installing an extension thatremapped the key bindings to Atom’s so that eased my transition a bit.

VS Code is probably the best text editor for developers who write a lot ofJavaScript and TypeScript due to its comprehensive out-of-the-box support forboth languages. However, other languages are also well supported. It was reallyeasy to work with Rust for example, which Idabbled in sometime last year, with the help of some plugins.

Visual studio vim keys

In the months in which I used VS Code, I didn’t have much to complain about.Although performance wasn’t as good as Sublime, it was much better than Atom andcontinued to improve.

Despite this, I still had an eye on learning and using Vim. Any time I readabout text editors in a discussion forum like Reddit or Hacker News, someone isbound to sing the praises of Vim and mention how much it can improve personalproductivity.

When one of my friends switched toVim and soon after was singing thesame song, that did it for me. I just had to get what was so good about Vim.

Trying Vim for the second time

Since I didn’t have much going at the time, haven just released StellarPhotos, I decided to switch to Vim cold turkeymeaning I didn’t retain any other text editor on my computer during thistransition process in a bid to force myself to use Vim exclusively.

It certainly wasn’t as difficult as when I tried it the first time. I usedvimtutor to remind myself of the basic commands and just went from there.

Vim is bare bones and doesn’t come with all the features I had taken for grantedin other text editors, but in most cases, I could add the functionality I neededusing a plugin.

Visual Studio Vim

That said, this became problematic to some extent as it led me to install morethan what I actually needed and my .vimrc file was populated with a lot ofstuff that I didn’t understand.

So I took a step back and stopped trying to make Vim work like the other texteditors I had used and instead, learn the features it has that makes it sounique and special. It quickly dawned on me that Vim can actually do a lot onits own without plugins.

Where necessary, I could still add plugins but, by not using them to scratch myevery itch, I was forced to learn the Vim way of doing things which was, in mostcases, better than what I was used to.

Working with just the keyboard has been a real eye-opener to just how fast onecan be without touching the mouse. Everything can be achieved with just a fewstrokes, and due to Vim’s modal nature, each key combination has a differentmeaning in each mode. That may sound complicated on first thought, but it’sactually really intuitive once you get used to it.

I have adopted the mindset of preferring to just use the keyboard in other areasas well like using jumpapp for switchingbetween applications and using Saka Keyfor navigating quickly in my browser.

Update: I now use Surfingkeysinstead of Saka Key and Run or raisefor GNOME on Wayland.

One of the things I love about Vim is that each change can be repeated manytimes using the dot command or macros which does save me a lot of time whenediting code. It may just be seconds saved here and there but it adds up.

The one thing I’ve found significantly worse in Vim compared to other editors isthe colour and font quality, but I suspect this has more to do with my terminalemulator (I use Terminator).

I know its possible to make Vim look really good in the terminal as I’ve seenscreenshots of other setups on r/Unixporn,but I’ve not been able to create something I’m entirely happy with thus far soI’m currently exploring what Gvim (Vim GUI) has to offer.

Conclusion

Having spent six months using Vim as my main editor, I can say it has definitelybeen a worthwhile experience and I don’t see myself switching over to some othereditor anytime soon.

Visual Studio Vim Config

Right now, I’m looking to improve my mastery of the editor, and learn someadvanced flows to become even more efficient. To that end, I’m currently readingPractical Vim by DrewNeilwhich appears to be one of the best books on the subject.

If you already have a productive setup in your current editor, I don’t thinkit’s necessary to switch to Vim abruptly like I did. It may not even berealistic depending on your work situation.

Having said that, I think it is still useful to learn the Vim way of editingtext and you don’t need to use Vim itself to do so. Most editors have a pluginthat emulates Vim key bindings so you can easily experience the Vim way withoutthrowing away your existing workflow.

Here are the ones for Sublime,Atom, and VSCode.

I will keep sharing what I learn on this blog, so if you’re interested inchecking out Vim, don’t be afraid to try it. You might just like it.

A game to learn vim and vscode keys in logical, digestable levels.

DEMO

GIF is sped up 2X

From the Actions Motion Level

Basic Levels and UI
Word - Move to beginning of word(s) or end of words(s)
Actions Motions
Super Cool End of Level UI and Effects!

QUICK START

  1. Install VSCODE VIM extension to enable vim emulation in vscode.
  2. Install VSCODE VIM ACADEMY
  3. Activate by first opening the command palette ctrl+shift+p
  4. Enter 'start vva' in the command palette to start the game.
    Video Tutorial

ISSUES

  1. Change to a Dark Theme, VVA currently only supports dark themes.
  2. I had intended to support multiple languages, theres only english, partial chinese and japanese for now. To change language, go to settings/vva/language

GOALS

Be the most comprehensive vim and vscode learning resource by providing interactive feedback in the editor itself.

HOW TO PLAY

LEVELS

Motions
  1. Left & Right 1
  2. Up & Down 1
  3. All Directions
  4. Left & Right 2
  5. Up & Down 2
  6. Beginning of Word 1
  7. Beginning of Word 2
  8. End of Word 1
  9. Review - Word Beginning & End
  10. Bol, Eol, First Letter
  11. Review - Word Beginning & BEFCOL
  12. Beginning of Word 3
  13. End of Word 2
  14. Review - WB & ege
  15. Top and Bottom of Page
  16. Up & Down Relative
  17. Review - Top, Bottom & Relative Line
  18. Goto Line
  19. Review - Goto & Relative Line
  20. Top, Middle, Bottom of Screen
  21. Up, Down Half Screen
  22. Up, Down Full Screen
  23. Review - Screen Line Movements
  24. Goto Next Paragraph
  25. Goto Next Sentence
  26. Goto Sections 1 - End Of
  27. Goto Sections 2 - Start Of
  28. Goto Sections 3 - Nearest Start or End
  29. Goto Sections 4 - Start or End
  30. Goto % of File
  31. Hover
  32. Next Pair Match
  33. Searching For Letters 1
  34. Word Search 1
  35. Word Search 2
  36. Word Search 3
  37. Goto Definition
  38. Marks
Actions - Horizontal
  1. Visual Mode 1 - Select & Exit
  2. Visual Mode 2 - Incrementally Select
  3. Select Word
  4. Delete Word
  5. Paste Word
  6. Delete & Paste Word
  7. Copy Word
  8. Change Word
  9. Replace Word
  10. Rename Symbol
  11. Actions + Motion
  12. Actions + Motions
  13. Undo & Redo
  14. Select Find Letter
  15. Select To Letter
  16. Delete & Backspace
  17. Delete & Backspace 2
  18. Change Case
  19. Add, Minus 1
  20. Add, Minus 2 - Numbered
  21. Replace Char & Replace With
  22. Swap Characters
  23. Insert At & After Cursor
  24. Insert At EOL & FCOL
Actions - Vertical
  1. Select Line
  2. Select Line Incrementally
  3. Delete Line
  4. Copy Line
  5. Change Line
  6. Paste Line
  7. Insert Line
  8. Replace Line
  9. All Line
  10. Select Lines
  11. Copy Lines
  12. Insert Lines
  13. Delete Lines
  14. Change Lines
  15. Copy Line & Paste
  16. Join Lines
  17. Swap/Move Line
  18. Indent Lines
  19. Comment Lines
Surrounds
  1. Select Word Text Object
  2. Select All Surround
  3. Select Inside Surround
  4. Delete/Change All
  5. Delete/Change Inside
  6. Add Surround
  7. Delete Surround
  8. Change Surround
  9. Delete HTML Tag Inner/Outer/Surround
UI
  1. Select Group
  2. Left/Right Editor
  3. Left/Right Group
  4. Quick File Navigation 1 - Search
  5. Quick File Navigation 2 - Last File

Levels are separated into five categories. Motions, Actions - Horizontal, Actions - Vertical, Surrounds, and UI.

Each level will introduce 2 or more navigation or editing tasks, and have players complete 10 sets of the tasks as quickly with as little key presses as possible. Hints and manual will be listed on the right panel(CONSOLE), your performance will be logged per task based on how fast your performed and how many keypresses you used.

In the editor, tasks will be shown as a color outline.

Yellow for motions, move to anywhere inside the yellow box to complete the task.Red for delete action.Orange for selection.Green for pasting.Purple for changing things.Grey for copying.

NOTES

Buy a license to unlock all the levels





Comments are closed.