vim-mode-plus の occurrence のぱわ〜( と demo-mode  のぱわ〜)

[vim-mode-plus](https://atom.io/packages/vim-mode-plus) は、ユーザーも増えて、有名なプログラマ達も使っているとか、使おうとしているとかがあるのですが、皆、当たり前ですが、vim と同等の機能を探したがります。

それはそれで仕方がないのですが、vim-mode-plus の独自の拡張機能は知られないまま、使われないままというケースがとても多い。
これは色々理由があるだろうけど、一番大きな理由として、"ノーマルな Vim の動作を尊重する" ようにデフォルト値を設定しているので、そもそも独自機能が知られていない、というものがある。

そもそも俺が vim-mode-plus を興奮してやっているのは、ノーマルな Vim では難しい実験機能を JavaScript( CoffeeScript ) powered な Hackable な Atom でやれるからだ。

なのにそれが知られていない、というのは本末転倒だ、俺は別に「完全な Vim エミュレーター」を作りたい訳ではない。
だったらそもそもピュアな Vim 使えばいいわけだ。

そこで、この状況から少し前進する為に、まずはアニメ GIF を作ってみようと考えた。

以下サンプルです。
元ネタは、以下のツイッター連投。日本語でも共有したいと思いまして。
https://twitter.com/t9md/status/849872727540342784

<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">When I replace multiple `decorationOptions` to `options` by occurrence of vim-mode-plus. 1) place cursor at word, 2) `d O p` then `g u o p`. <a href="https://t.co/EbzcrBVCsC">pic.twitter.com/EbzcrBVCsC</a></p>&mdash; t9md (@t9md) <a href="https://twitter.com/t9md/status/849872727540342784?ref_src=twsrc%5Etfw">April 6, 2017</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

# The power of occurrence

以下の GIF では色々な方法で Paragraph 内の、`decorationOptions` を `options` に書き換えている。

お分かりいただけるだろうか？


カーソルを `decorationOptions` にカーソル移動してからの `d O p`, `g u o p`
![demo-occurrence.gif](https://qiita-image-store.s3.amazonaws.com/0/30758/9dd17688-a09d-f44d-d48c-f2046ab420d5.gif)


ただ、殆どの場合 `c o p ` してから直接マルチカーソルで `options` をインサートした方が楽。
![demo-occurrence-2.gif](https://qiita-image-store.s3.amazonaws.com/0/30758/77d2192b-4c83-e1d9-31a1-2891059cae68.gif)


レジスタ(クリップボード的なやつ)に、すでに `options` というテキストが入ってるなら、`replace-with-register` operator が楽な場合もある。俺は `_` にマッピングしているので、キーストロークは `_ o p`.
![demo-occurrence-3.gif](https://qiita-image-store.s3.amazonaws.com/0/30758/444de13b-e883-2ebf-4c6a-4213c8424cdf.gif)


`occurrence` は `g o` や `g O`(subword 用) でプリセット(事前配置) 出来るので、`g O` で、`decoration` に occurrence-marker をプリセットしてからの `c i p` でもいける。最後にマルチカーソルで、"O" を小文字にすればOK.
![demo-occurrence-4.gif](https://qiita-image-store.s3.amazonaws.com/0/30758/96243eaa-9f60-d8e1-bf40-19d16ea434cc.gif)



# もう一つの例

これは atom-narrow での一括編集時に、occurrence の機能で、narrow-editor を一括置換し、保存すると、プロジェクト全体の変数名が、リプレイスできる、というシナリオ。
以下の例ではプロジェクト全体の `OUTPUT_AREA_URI` を `URI_OUTPUT_AREA` に変えている。

どうやっているか？ポイントは narrow-editor 上で `preset-occurrence` でマーク後、`_ cmd-a`している。

0. まず置き変え結果となる `URI_OUTPUT_AREA` のテキストを作り、yank してレジスタに入れる。
1. `m`: `preset-occurrence` してカーソル配下の `OUTPUT_AREA_URI` をマーク.(`m` の部分はデフォルトキーマップでは `g o`)
2. `_ cmd-a`: `replace-with-register`, `inner-entire` narrow-editor 全体をレジスタに入ったテキスト(`URI_OUTPUT_AREA`)と置き換え。ただし、occurrence が preset されてるので各 occurrence が 置き換わる。

![practical-occurrence.gif](https://qiita-image-store.s3.amazonaws.com/0/30758/88828365-d6e5-7608-7247-56ec40300173.gif)

`c o p`後、マルチカーソルで編集してもいいけど、`_ cmd-a` で一括で変わると気持ちいいと言うのがあるし、実際レジスタに必要なものがすでに入っている場合も結構あるので、このパターンも覚えておくと便利。

# demo-mode とは？

[demo-mode](https://atom.io/packages/demo-mode)
vim-mode-plus で上記の様な GIF を作りやすくするために作った Atom package。
作ったばかりだが、アニメGIFを作るのが超楽になった。

これで Vim or vim-mode-plus の応用的な操作を説明するのが簡単になるはず。

以下は、色々なテキストオブジェクト( TextObject )を `y` でヤンクするGIF.

![demo-motion-stop.gif](https://qiita-image-store.s3.amazonaws.com/0/30758/ec0b7238-0b39-8cbd-3589-74389a15e2bd.gif)


vim-mode-plus では demo-mode が提供する hook( service )を使って、より説明的な GIF が作れるように連携させている。
 - 通常はすぐ消える operator のターゲット範囲のフラッシュ効果を保持
 - Operation の種類( Operato, Motion or TextObject )を表示

# 最後に

お分かりいただけただろうか？