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

  • プログラミング
  • VSCode
  • マルチカーソル

先日投稿した以下のエントリで、「使い方がわからない」という意見を多く頂いた。

http://mugi1.hateblo.jp/entry/vscode_multi_cursor

マルチカーソル自体の操作方法は調べれば出てくるし、事例だけ紹介しとけばええやろ、と思っていたのだが、いきなり応用のサンプルを貼りすぎてわけがわからなかったらしい。申し訳ない。

せっかくなので、基礎から含め、どういったキー入力で上記のような操作を実現しているのかを紹介したいと思う。

🔥実践！マルチカーソル / 入門編

なおmac環境です。Windowsやその他環境の方は気合で調べてください。

また、言い訳臭くて申し訳ないが、私は普段はSublime Text Keymap and Settings Importerを使っており、SublimeTextっぽいキーバインドに変えて編集している。

一旦無効にしたうえでVSCodeデフォルトの状態で一通り調べて書いたつもりだが、もし違ってるところがあったらごめん。

📝 マルチカーソルの前に...

マルチカーソルの動作例を見てるとまるで魔法のように見えるかもしれないが、結局のところ**「マルチカーソルはカーソルが複数になっただけ」**ということを意識するといい。

つまり、通常編集時に単一のカーソルに対して行えることはだいたいできる。正直、これが全てと言っても過言ではなく、このあとに出てくる操作は全部これを応用しただけだったりする。

特に

は良く使うので、そもそもこれらの操作に慣れていない場合は、まずそこから始めるといい。

いろんなカーソル移動・選択

💪 基本 / マルチカーソルのつくりかた

作り方はいくつかある。状況と経験と勘で選ぶ。

選択したものと同じものを1つずつ選択する

command + D で選択後にカーソルを移動・編集

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で書かれたキーを定数に定義

選択範囲が合体してカーソルが1つに戻る様子

これを利用することでこんなことが可能になる。

CSVから1列目だけ残してあとは消す

前エントリの、テーブル定義的なものをペーストしたあとに論理名だけ残るように削除しているのはこれを利用している。

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

一気にスネークケースに変換する

command + shift + P でコマンドパレットを開けるが、これをマルチカーソル状態から開いているだけ。あとはここまでの応用でできる。

ざっくりこんな感じ。

あとは**「全行にデバッグログを突っ込む」**が見た目としては派手な感じがあるが、ここまでのを見てくれたのであれば、それほど難しいことはやってないのはわかると思う。

まとめ

というわけで、ざっとコマンド付きのGifを撮り直して一通り説明を書いてみた。（つかれた..）

他のエディタでもマルチカーソルが使えるのであれば似たようなことが可能で、微妙に違いはあれども操作の勘所とかも同じはず。

あとは自分で調べたり試したりしてマルチカーソルライフをエンジョイしてほしい。

最後に、わりと書くの頑張ったので良かったらTwitterフォローしてやってください。 https://twitter.com/mugi_uno

おわり。