Visual Studio Code Vim



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

Studio
  • Where I guide you how to setup Vim in Visual Studio Code.For more info, check out this complete guide to Vim in VSCode: https://www.barbarianmeetscoding.com/.
  • Vim-code-dark vim-code-darkis a dark color scheme for Vimheavily inspired by the look of the Dark+ scheme of Visual Studio Code. While many of the colors are same, there are additional colors for specific usage or reserved for future use. The scheme also defines specific GUI colors (e.g. Popup menu) and fully supports vim-airline.

Visual Studio Code Vim Vimrc

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform. Pros of Vim Pros of Visual Studio Code 343 Comes by default in most unix systems (remote editing). To install any of them, just hit Ctrl-Shift-P (Windows) inside Visual Studio code, type inst, select Extensions: Install Extension, then type vim. All three will come up, along with a few other things which are not Vim emulators for VSCode. None of those extensions are flawless.