vmp: the most ambitious vim emulator

I'm t9md

Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.

• My editor history: Vim > Emacs > Vim > Atom
• Emacs's limitless extensibility plant never give up sprit to me and it also made me editor addict.
• Vim plugins: choosewin, qickhl, smalls, textmanip, vim-chef, and more
• Atom packages: vim-mode-plus, narrow, quick-highlight, cursor-history, and more..(over 30 pkgs!).

Are you familiar with this endless editor tuning loop?.

• Frustration > Yes I can improve it > Ya I did it!! Oh, I found another frustration point > oh, I've spent too much hours!.

What is the vim-mode-plus(VMP)?

• It's Atom editor package which provides vim keybinding and plus more.
• This is fork of vim-mode created by GitHub Image may be NSFW.
  Clik here to view., they now deprecated it in favor of vmp.

AVG. 1 release / 4.5 days !!

I'm still keeping high pace release cycle as first year of vmp.

Who use vmp?

• Jordan Walke(ReactJS, ReasonML)
  • https://twitter.com/jordwalke/status/911889758208499712
• Cheng Lou(ReactMotions, ReasonML)
  • https://twitter.com/_chenglou/status/903159866172235776
• Richard Feldman(Elm book author, evangelist)
• Kent C Todd(Author of lots of npm modules and more).
  • https://twitter.com/kentcdodds/status/898888597465477123
• Michael Jackson(React Router, React Training)
  • https://twitter.com/mjackson/status/913551031656636416
• Ryan Florence(React Router, React Training)
  • https://twitter.com/ryanflorence/status/918346908225085440

Some says vmp is the best vim emulator.
IMO, maybe it's because of precise cursor placement.(e.g. cursor placement after undo or redo operation).

What I will talk today

Part1. Understand editing in Vim

• What is editing in Vim
• How it's implemented and executed
• What is Motion, TextObject and Operator

Part2. vmp's unique features

• UX improvement
• Cursor placement
• One key TextObject
• Occurrence

Part1. Understand editing in Vim

What is editing in Vim?

Image may be NSFW.
Clik here to view.

Why can your j keystroke move-down cursors

Image may be NSFW.
Clik here to view.

Operation's life in stack on operationStack

Image may be NSFW.
Clik here to view.

Motion, TextObject, Operator

Motion: j, k, {, g g...

• Move cursor from here to there.
• When used as TARGET, select here-to-there.

TextObject: i p, i w, a W...

• Select text range, always used as TARGET.
• Select same range as long as cursor is within that range
  • i w select same word as long as cursor is within that word.

Operator: d, c, y...

• Mutate TARGET
• Always require TARGET. "I will wait until I get target!".

Summary

Editing is to transform text by mutation.

You build mutation instruction through keystroke.

Each keystroke invoke one of Operator, Motion or TextObject.

Formula: Mutation = Operator + Target(= Motion or TextObject)

Part2. VMP's unique features

Image may be NSFW.
Clik here to view. DEMO session

demo file I used in talk

• Select operator
• TransformString operators
• Edge motion
• Occurrence
• Persistent selection
• Practical use of occurrence etc...

Flash target Image may be NSFW.
Clik here to view.

• Image may be NSFW.
  Clik here to view. vmp flashes an operator's target and also flashes changes on undo, redo.
• When you type y i p, it flashes i p range with CSS keyframe animation.
• With flash, you can be more confident for your operation.

Image may be NSFW.
Clik here to view.

UI feedback on surround

• Image may be NSFW.
  Clik here to view. Surround is difficult for me.
• Because I have to type many keystrokes without mistake, without any UI feedback.
  • y s i w (: surround(y s) inner-word(i w) with (.

• vmp gives proper UI feedback to make surround easy to use, easy to understand

  • Select target immediately after target was provide(i w) and before you input final surround-char.
  • When change-surround, it shows char will be change at hover indicator.

• This GIF is after you type c s " and before you input final '
  Image may be NSFW.
  Clik here to view.

Tunable f behavior and flash find-char.

• Image may be NSFW.
  Clik here to view.f is difficult. Where to stop next?.
• With flashing finding-char, you can predict where to stop next.
• Image may be NSFW.
  Clik here to view. I like all vim-seek, clever-f and vim-sneak, I want all of it's goodness.
  • Make it configurable to find across lines, number of chars to find, auto confirm by timeout, reuse f as ;...
  • You can tune vmp's f as you like.

Image may be NSFW.
Clik here to view.

Eliminate unwanted cursor move

• Image may be NSFW.
  Clik here to view. What if cursor is not moved after y i p?
  • In pure-Vim, cursor is moved to start of paragraph.
• IMO, moving cursor after operator is unwanted side-effect.
• Image may be NSFW.
  Clik here to view. vmp introduces various stayOnXXX configuration and all have enabled by default.
  • In pure-Vim, stayOnVerticalMotion + stayOnDelete is doable by :set startofline=false

stayOnXXX configurations

• Keep cursor positions after operator y i p, d d, g U i p..
  • stayOnTransformString, stayOnYank, stayOnDelete, stayOnOccurrence
• Keep column when selecting TextObject v i p, v i i..
  • stayOnSelectTextObject
• keep column on vertical motion g g, G...
  • stayOnVerticalMotion

One-key for VIP(Very ImPortant) TextObject

• Image may be NSFW.
  Clik here to view. You can type y p instead of y i p. How many times have you ever typed i p in your life!?
• Image may be NSFW.
  Clik here to view. Why? Some keys are freely available in operator-pending-mode.
• Image may be NSFW.
  Clik here to view. Since Operator is waiting for Target(Motion or TextObject) only. Remember Operator + Target rule?.
• Image may be NSFW.
  Clik here to view. So Operator + Operator keystroke(y d, d p...) makes no sense, OK to re-map.
  • Image may be NSFW.
    Clik here to view. One exception, same-operator-twice(d d, y y...) keystrokes have special meaning.

Image may be NSFW.
Clik here to view.

Occurrence

• Image may be NSFW.
  Clik here to view. Noticed patterns in coding. I'm repeating same operation on same keyword again and again.
• Image may be NSFW.
  Clik here to view. With occurrence, you can bulk apply operator to all occurrences of keyword within target.
• You can edit more declaratively than imperatively, also can reduces need of . repeat.

Image may be NSFW.
Clik here to view.

Occurrence: How it works

Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.

Occurrence is not difficult, technically it's marker edit

• Mark keyword under cursor then edit as in normal way.
• You can mark keyword by either of following way
  • operator-modifier: o(word) and O(subword).(e.g. d o p, c O z)
  • preset-occurrence command: g o and g O. I'm remapping to m and M locally.

1. Mark keyword by g o or g O(subword)
2. Select visually
3. c to change, I to insert at start A to append to end of occurrence.

Image may be NSFW.
Clik here to view. Advice to improve vim-skill

• Image may be NSFW.
  Clik here to view. Understand this formula. Editing = Operator + Target(Motion or TextObject).

  • Image may be NSFW.
    Clik here to view. Install Operator + Target mental model into your brain by shouting loudly while typing.
  • y("Operator"!!) i p("Target!!")

• Image may be NSFW.
  Clik here to view. Pick and master from high-return Motion, TextObject first.

  • Motion: g g, G, [, ](VMP only)
  • TextObjet: i p, i w, i z(VMP only), i ,(VMP only)

• Image may be NSFW.
  Clik here to view. Use it in daily editing.

• Image may be NSFW.
  Clik here to view. Repeat, repeat, repeat! Till your finger moves without THINKING.

  • Vim: y i p, y i p, y i p... c i p, c i p... d i p...
  • Vim: y i ,, y i ,, y i ,... c i ,, c i ,... d i ,...
  • vmp shorthand: y p, y p, y p... c p, c p... d p...
  • vmp shorthand: y ,, y ,, y ,... c ,, c ,... d ,...

• Image may be NSFW.
  Clik here to view. Gradually increase TextObject, Motion of daily use.

Image may be NSFW.
Clik here to view.: VMP is the most ambitious vim emulator in the world(IMO!).

• Image may be NSFW.
  Clik here to view. Bundled so many non-default Motion, TextObject, Operator.
• Image may be NSFW.
  Clik here to view. Introduces new editing concept: e.g. occurrence, persistent-selection.
• Image may be NSFW.
  Clik here to view. UX improvement to make Vim easy to use, easy to understand.
• Image may be NSFW.
  Clik here to view. vmp is NOT aiming to become a perfect Vim emulator(no interest!).
• Image may be NSFW.
  Clik here to view. My mental stance is just borrowing favorite Vim features.
• Image may be NSFW.
  Clik here to view. Motivation is to experiment what-if ideas with hackable editor(Atom!).
• Image may be NSFW.
  Clik here to view. Ideas comes from frustration I encounter in daily vmp-dev. Endless feedback loop!
• I'm really SERIOUS for vmp, but vmp is NOT STRICT.

This GIF is now removed "show operator representing emoji" feature. You see how vmp is NOT strict?

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view. Thank you!!! Image may be NSFW.
Clik here to view.