マルチカーソルを使わないVSCodeはただのVSCodeだ！〜解説編〜
先日投稿した以下のエントリで、「使い方がわからない」という意見を多く頂いた。
マルチカーソル自体の操作方法は調べれば出てくるし、事例だけ紹介しとけばええやろ、と思っていたのだが、いきなり応用のサンプルを貼りすぎてわけがわからなかったらしい。申し訳ない。
せっかくなので、基礎から含め、どういったキー入力で上記のような操作を実現しているのかを紹介したいと思う。
🔥実践！マルチカーソル / 入門編
なおmac環境です。Windowsやその他環境の方は気合で調べてください。
また、言い訳臭くて申し訳ないが、私は普段はSublime Text Keymap and Settings Importerを使っており、SublimeTextっぽいキーバインドに変えて編集している。
一旦無効にしたうえでVSCodeデフォルトの状態で一通り調べて書いたつもりだが、もし違ってるところがあったらごめん。
📝 マルチカーソルの前に...
マルチカーソルの動作例を見てるとまるで魔法のように見えるかもしれないが、結局のところ「マルチカーソルはカーソルが複数になっただけ」ということを意識するといい。
つまり、通常編集時に単一のカーソルに対して行えることはだいたいできる。正直、これが全てと言っても過言ではなく、このあとに出てくる操作は全部これを応用しただけだったりする。
特に
- 行頭と行末への移動・選択
- 単語単位の移動・選択
は良く使うので、そもそもこれらの操作に慣れていない場合は、まずそこから始めるといい。
💪 基本 / マルチカーソルのつくりかた
作り方はいくつかある。状況と経験と勘で選ぶ。
選択したものと同じものを1つずつ選択する
command + D で選択されている文字列と同じものを片っ端から選択状態にすることが出来る。その状態からカーソル操作を行うと、全カーソルを選択位置を基準に動かせる。
選択したものと同じものを一気に選択する
command + shift + L で 一発で全部選択することもできる。
ちなみにcommand + D のときと同じだが、文字列を選択していない状態の場合はカーソル位置にある単語をそれっぽく抜いてくれる。
クリックで任意の位置にカーソルを作る
optionを押しながらクリックするだけ。
なお、設定で editor.multiCursorModifier いじることで修飾子を変えることが出来る。私はcommand + D と同様にcommandで操作したいので、"editor.multiCursorModifier": "ctrlCmd" という設定にしている。
マウスとかトラックパッドでポチポチやっても作れる。 文字列に何の規則も無いようなところにカーソルを作るときはこちらを使う。
範囲選択の各行の末尾をカーソル化する
これが最強。とにかくcommand + D とこれだけを覚えると良い。かなり応用が効く。
デフォルトだとおそらく option + shift + I でいける。
現在のカーソル位置から上下行にカーソルを作る
command + option + ↑ or ↓ でいける。
現在の位置から上下にカーソルを増やしていくこともできる。 ただ、私はあんまり使ってない。これも使いこなすと便利だと思う。
ここまでの内容を見てもらうと既にわかるかもしれないが、結局はあとはこれらを応用して編集しているだけで、たいしたことはやってない。
🔥実践！マルチカーソル / 応用編
というわけで、上記を踏まえた上で、前回のエントリで貼ったサンプルはどのように操作しているかを紹介していく。なお、他の例と操作がほぼかぶっているものや、まあ見ればわかるでしょ、というものは省略する。
JSONで書かれたキーを定数に定義
command + Dで連打したあとに選択範囲を変えてコピーして貼ってるだけ。
JSONやyamlなどをマルチカーソルで取り扱うには、一定の規則で入力されているものを見つけ出すのがコツだと思う。慣れると息を吸う用にできる。
上記の例の場合には、JSONのキーを抜きたいのだが、キーの後ろには大概 : や ': や ": があるので、そこを対象にマルチカーソルで選択し、選択範囲を手前側に倒すことで一気にコピーしている。
貼り付けたあとは、範囲選択から各行末尾にカーソルを作りカンマを入力している。
他のサンプルにあった、「クォートで囲まれた中身だけ抜き出す」もほぼ同じようなことをやってるだけ。
これも結局、it(' を command + D で選択したあとに範囲を変更してるだけなのが理解出来ると思う。
JSONの整形
これもどうということはない。
- 最初に全行にカーソルを作成
- 行頭に持ってくる
- deleteキーで改行を削除
とすることで一行に整形している。複数行に戻す場合には、
- 要素の区切りの
,を選択 - Enterキーを叩く
とすることで一気に改行できる。
行の追加・削除的なことと組み合わせだすと混乱しがちだが、使いこなせるととても便利。
クエリを書くとき（選択範囲のマージについて）
「クエリを書くとき」は、ほぼここまでの応用なので省略したいが、一点特徴的な挙動があり、マルチカーソルは選択範囲が重なると合体して１つになる。
これを利用することでこんなことが可能になる。
前エントリの、テーブル定義的なものをペーストしたあとに論理名だけ残るように削除しているのはこれを利用している。
いい感じに全部のケース変換をする
command + shift + P でコマンドパレットを開けるが、これをマルチカーソル状態から開いているだけ。あとはここまでの応用でできる。
ざっくりこんな感じ。
あとは「全行にデバッグログを突っ込む」が見た目としては派手な感じがあるが、ここまでのを見てくれたのであれば、それほど難しいことはやってないのはわかると思う。
まとめ
というわけで、ざっとコマンド付きのGifを撮り直して一通り説明を書いてみた。（つかれた..）
他のエディタでもマルチカーソルが使えるのであれば似たようなことが可能で、微妙に違いはあれども操作の勘所とかも同じはず。
あとは自分で調べたり試したりしてマルチカーソルライフをエンジョイしてほしい。
最後に、わりと書くの頑張ったので良かったらTwitterフォローしてやってください。 twitter.com
おわり。
