VSCODE VIM ACADEMY

ABOUT

An educational game to learn vim and vscode keys in logical, digestable levels. Builds up your vim muscle memories by practicing vim keys 2~5 keys each level. Level text and keys are randomly generated on a per level basis. For example,

move forward or backward by word
go up or down a random number of lines
delete word forward or backwards from current position
delete word, undo or redo
select, delete, or change lines
delete, copy, or paste words
and more

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.

CHANGES / FIXES (2021/6/3)

COLOR CODED ACTIONS

In the editor, tasks will be shown as a color outline around the text. It can be a single character, words, lines, text objects or blocks.

Inside - Move the curor inside the yellow box
Delete - Delete the contents of the red box
Select - Select the contents of the orange box
Paste - Paste the contents of green box at the green cursor position
Copy - Copy the contents of the grey box
Editing - change, insert, indent, comment, add, minus depending on the level
Outside - Helper type for the mark level, moving outside completes the task

QUICK START

Install VSCODE VIM extension to enable vim emulation in vscode.
Install VSCODE VIM ACADEMY
Open the command palette ctrl+shift+p
Enter "start vva" in the command palette to start the game.

Video Tutorial

USER INTERFACE

LEVEL INFO

Star rating on the top right is for importance
Total time
Performance log, try to keep the cyan line below the red line
1. Current - current task speed
2. Current Avg - average of current level tasks
3. Target - based on my times
4. Hist - these are based on my times while play testing
Task table
Current level keys and key description

LEVEL NAVIGATION

To quickly continue to the next level without using the mouse, this widget will show up at the end of a level. Move the cursor using the vim keys,

0 - Previous Level
b - Retry Current Level
w - Next Level
$ - Open the Buy Extension Page

To choose a specific level, use the console to go back to the level selection page You can also bind keys for previous, next, and retry levels

vva.prevLevel
vva.retryLevel
vva.nextLevel

Vim Cheatsheet HUD

Painstakingly built SVG Animation! Unlimited resolution!

Press ctrl+alt+c to toggle the cheatsheet in editor, this feature does not require activating VVA or a VVA license, as long as the VVA extension is installed, the cheatsheet can be shown in the editor. Grab the extension now before I put this feature behind the pay wall!

NON-ANIMATED DOWNLOADABLE

Light(Printable)	Dark

DEMO

Basic Levels and UI

Word - Move to beginning of word(s) or end of words(s)

Actions Motions

ISSUES

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

LEVEL DETAULS

Motions

Left & Right 1
Up & Down 1
All Directions
Left & Right 2
Up & Down 2
Beginning of Word 1
Beginning of Word 2
End of Word 1
Review - Word Beginning & End
Bol, Eol, First Letter
Review - Word Beginning & BEFCOL
Beginning of Word 3
End of Word 2
Review - WB & ege
Top and Bottom of Page
Up & Down Relative
Review - Top, Bottom & Relative Line
Goto Line
Review - Goto & Relative Line
Top, Middle, Bottom of Screen
Up, Down Half Screen
Up, Down Full Screen
Review - Screen Line Movements
Goto Next Paragraph
Goto Next Sentence
Goto Sections 1 - End Of
Goto Sections 2 - Start Of
Goto Sections 3 - Nearest Start or End
Goto Sections 4 - Start or End
Goto % of File
Hover
Next Pair Match
Searching For Letters 1
Word Search 1
Word Search 2
Word Search 3
Goto Definition
Marks

Actions - Horizontal

Visual Mode 1 - Select & Exit
Visual Mode 2 - Incrementally Select
Select Word
Delete Word
Paste Word
Delete & Paste Word
Copy Word
Change Word
Replace Word
Rename Symbol
Actions + Motion
Actions + Motions
Undo & Redo
Select Find Letter
Select To Letter
Delete & Backspace
Delete & Backspace 2
Change Case
Add, Minus 1
Add, Minus 2 - Numbered
Replace Char & Replace With
Swap Characters
Insert At & After Cursor
Insert At EOL & FCOL

Actions - Vertical

Select Line
Select Line Incrementally
Delete Line
Copy Line
Change Line
Paste Line
Insert Line
Replace Line
All Line
Select Lines
Copy Lines
Insert Lines
Delete Lines
Change Lines
Copy Line & Paste
Join Lines
Swap/Move Line
Indent Lines
Comment Lines

Surrounds

Select Word Text Object
Select All Surround
Select Inside Surround
Delete/Change All
Delete/Change Inside
Add Surround
Delete Surround
Change Surround
Delete HTML Tag Inner/Outer/Surround

Select Group
Left/Right Editor
Left/Right Group
Quick File Navigation 1 - Search
Quick File Navigation 2 - Last File

THANKS

For the four initial buyers and supporters of VVA, gave me some faith that this just might work.

If you find this extension useful, spread the word, give me some feedback at the git repo or extension marketplace and perhaps buy the extension. With enough support, I would like to rework the task decorationOptions to use svg animations instead of the vscode default fadeIn fadeOut css animation. Something cool, like arrows pointing to navigating positions or text delete animations using SVG.

NOTES

Buy a license to unlock all the levels

TODO

demonstrate the learning process of vva
demonstrate what a high level vim user is capable of
my keybindings for other parts of vscode that uses the same keys as vim. (side panels, terminal, command palette)
level descriptions
webpack the extension

hy-js/vscodevimacademy