マルチカーソルを使わないVSCodeはただのVSCodeだ！

  • VSCode
  • プログラミング

Misoca+弥生+ALTOA Advent Calendar 2018の10日目のエントリです。

グッと来るタイトルにしようと思った結果、意味不明になってしまったのは自覚している。許してほしい。

※解説編について

何やってるかわからんという声を多数頂いたため、解説編を書いた。

よかったら併せてご覧ください。

マルチカーソルを使わないVSCodeはただのVSCodeだ！〜解説編〜 - memo.md

🤔 マルチカーソル？

さて、VSCodeではカーソルを複数作ることができる。

https://vscode-doc-jp.github.io/docs/userguide/codebasics.html#%E8%A4%87%E6%95%B0%E3%81%AE%E9%81%B8%E6%8A%9E%E7%AF%84%E5%9B%B2-%E3%83%9E%E3%83%AB%E3%83%81%E3%82%AB%E3%83%BC%E3%82%BD%E3%83%AB

簡単な動作例

これはVSCodeに限った機能ではなく、SublimeText, Atom, JetBrains製IDEなどでも似たようなことができる。

昔にSublimeTextを使い始めたころから愛用している機能で、私はこれが無いと生きていけない体になっている。

意外と使ってる人いないことに気付く

普段から仕事でもペアプロ・モブプロをすることが多いが、対応しているエディタ・IDEを利用していても、マルチカーソルをゴリゴリ使う人はあまりいないような印象がある。

いつ使えば良いかがわからない？

そういう機能があるのは知ってるし、なんか便利そうなのも知ってるけど、結局どういうときに使えば良いのかが良くわからない、という人がいるかもしれない、と勝手に予想した。

もったいない！

マルチカーソルは非常に強力な機能で、これを使いこなすかどうかでVSCodeの編集速度は劇的に変わると思っている。せっかくVSCodeを使っているのであれば、マルチカーソルもぜひ使いこなして快適なコーディングを楽しんでほしい。

そこで、キー操作などの使い方は調べれば腐るほど出てくるので、**「私はこういう時にマルチカーソルを使ってるよ！」**というのを紹介したい。

なお、「これがベストな方法だ」ということを言いたいわけでは決して無い。普通に他の機能で代替出来るものもあるし、無駄に思えるものもあるかもしれない。あくまでも参考として受け止めてほしい。

🔥 実例！マルチカーソル

ちなみに私はVim/Emacs両方共のキーバインドを利用していないのでご了承ください。

Vimも一時期使っていたが、キーリピート速度を限界まで高める＆マウスを素早く操作するという強引なスタイルのほうが、スマートではないのはわかりつつも自分には合ってた。

検索からの置換

これが一番多く、かつ強力で便利。

let → const に置き換える例

なお、言うまでもないが普通にエディタやCLIから検索＆置換でも同じことは出来る。

検索欄に入力やコピペしなくても良いので、1ステップ分速いのが良くて使うことが多い。

ちなみに、CMD+dを連打して1個ずつ選択しているが、置換対象が適切かどうかの目視での確認も兼ねている。一気に全て選択するショートカットを使うときもある。

JSONで書かれたキーを定数に定義

JSONのフォーマットはわかっていて、それを全部変数に入れたい、みたいなケース。たまにある。

JSONのキーを一気に抜く

クォートで囲まれた中身だけ抜き出す

たとえば、テストコードからitとして書かれている文字列のみ抜き取りたい、みたいなケースを考えてみてほしい。

愚直に1件ずつやろうとすると結構めんどくさいはず。

itの名称のみを抜き出す

JSONの整形

何かが一定の規則で羅列されている場合に、それを横並びから一行ずつ、あるいはその逆へ変換するのが非常に強い。

たとえば、JSONの一部だけを横並びで書きたい場合などは便利。

複数行のJSONを単一行にする。その後複数行に再度戻す。

クエリを書くとき

テーブルの定義は何らかの別の形式で記載されていることが大半だと思う。可能性としては色々ある。

などだろうか。

雑にコピー＆ペーストしたところからフィールド名だけぶっこ抜いてクエリにする、みたいなときにササッとやれる。

DB定義のようなものからカラム名を抜いてクエリを作る

最近だと、大量のIDはわかっていてそれをIN句に放り込んでクエリを投げたい、みたいな時にも便利だった。

大量のIDをIN句に含むクエリを書く

配列の定義を書く

とにかくある一定のルールで列挙されたものを整形する、という用途に関しては強い。

たとえば、Rubyで%記法での文字列配列を作る場合などに使える。

Rubyで%記法の文字列をサッと作る

いい感じに全部のケース変換をする

VSCodeはマルチカーソルとは別にケース変換ができる機能がある。 以下のプラグインを入れると、デフォルトに加えてさらに様々な変換も可能になる。

https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case

そしてこれらはマルチカーソルと組み合わせ可能であり、それが非常に強力。

たとえば、APIレスポンスがキャメルケースだが、サーバサイドがRubyで書かれてるのでスネークケースにしたい場合とかがある。

キャメルケースのレスポンス内容をスネークケースの変数に格納する

あるいは、Vueを使ってるとテンプレート上だけはケバブケースにしたい、みたいなことがある。

Vueコンポーネントをケバブケースでテンプレートに記述する

全行にデバッグログを突っ込む

愚直にデバッグログを仕込みまくる、みたいなことはコード書いてる人なら誰も経験があると思う。（ちなみにもちろんデバッガを使えるなら使ったほうがいい）

各行ごとの実行後の状態を見たい場合などは、出力するログに番号も採番しないと後で判別がつかないが、これがまた面倒くさい。

VSCodeには vscode-input-sequence という素晴らしい拡張機能がある。 https://marketplace.visualstudio.com/items?itemName=tomoki1207.vscode-input-sequence

これとマルチカーソルを組み合わせることで一気に連番を振ったログ出力を差し込むことが出来る。

連番を振ったconsole.logを一気に埋め込む

まとめ

というわけで、事例を元にしたマルチカーソルの使い方を紹介した。

特にここ最近はVSCodeを利用する人が増えてきたと思うけど、マルチカーソルを使わないとかなり勿体無いと思っているので、ぜひ積極的に試してみてほしい。

問題があるとすると、これに慣れるとシェル芸をしなくても大体のことが出来るようになっていくので脳が死んでいく。そして中毒性が高い。

VSCodeで開いてマルチカーソル使ったほうが速いことが多いけど、たまには意識的にターミナルでawkとかsedとか使って操作するようにしたほうがいいとは思う。

冒頭にも書いてありますが、解説編でキー操作を紹介しています。よければあわせてどうぞ。

http://mugi1.hateblo.jp/entry/2018/12/11/215808

Misoca+弥生+ALTOA Advent Calendar 2018、次のエントリは @shinya_kubotaさんによるXamarinの話です！