はじめに
こんにちは、WESEEK でエンジニアをしている、藤澤です。
この記事では VS Code でマルチカーソルを使う方法をその具体例とともに解説します。
マルチカーソルを使いこなすことで日々の業務の時間短縮が図れるはずです。
ぜひこの記事を見て、マルチカーソルを使うことを検討してもらえればと思います。
マルチカーソルとは
VS Code では複数のカーソルをサポートしていて、マルチカーソルと呼ばれています。それぞれのカーソルはユーザの入力に対して独立に、並列に動作します。
詳しく説明するよりも見た方が早いので以下の動画を見てください。
以上の動画のように複数のカーソルを並列に動作させ、似たような作業が同時にできます。
VS Code の KeyBindings を設定することでより使いやすくなるので、以下では KeyBindings について説明します。
設定しておくべき KeyBindings
マルチカーソルを使用する際にいくつか設定しておくべき KeyBindings があるので紹介します。
KeyBindings の設定方法はこちらを参考にしてください。
ここでは VS Code の KeyBindings 名で紹介します。
- AddCursorBelow/Above
- 現在カーソルがあるところから上下へマルチカーソルのカーソルを追加します
- cursorWordEndRight/Left
- Right、 Left とあり、左右 1 単語分移動します。
- マルチカーソルで使用する際にはカーソルのみだと単語の文字数によって各カーソルがずれるので使う機会は多いです。
- cursorEndRight/Left
- Right、Left とあり、インデントやスペースを除いて左右行けるところまで行きます。
- 2回 cursorEndLeft でインデントやスペースを超えて一番左まで行きます。
- マルチカーソルでは上の cursorWordEnd と組み合わせて使ったり、使う機会が多いです。
- cursorWordEndRightSelect/LeftSelect
- cursorWordEndRight/Left 同様カーソルが移動し、 さらに移動した範囲を選択します。
- コピーや削除と組み合わせて使うことが多いです。
- 後述の Add Selection To Next Find Match と組み合わせて使うことも多いです。
- cursorEndRightSelect/LeftSelect
- cursorEndRight/Left 同様カーソルが移動し、さらに移動した範囲を選択します。
- こちらもコピーや削除と組み合わせて使うことが多いです。
- Add Selection To Next Find Match
- 現在選択中の文字を検索し、次に近い部分に追加でカーソルを置きます。
- replace で全体をやるほどでもないときに使うことが多いです。(関数内のみでの replace をしたいとき等)
- Move Last Selection To Next Find Match でカーソルを置くのを一つスキップできます。
- Move Last Selection To Next Find Match
- 上述の Add Selection To Next Find Match を一つスキップできます。
具体例
具体例をもとに使い方を説明します。
コード自体はテキトーです。
- 文字列の配列からオブジェクトを作る
- そんな場面があるかはわかりませんが配列の各文字列からオブジェクトを作りました。
- まず[]はいらないので普通に消します。
- 次にカンマを選択し、 Add Selection To Next Find Match を使いそれぞれ改行します。その際に全部の行頭の位置を揃えます。
- escape でいったんカーソルを外し、1行目頭にカーソルを置き、AddCursorBelow によって各行の頭にカーソルを持ってきます。
- あとは一つの行に注目し、オブジェクトを作るような操作をすれば全行でオブジェクトが完成します。この際に各行の差異が出ないようになるべくカーソルキーを単体で使わないことが大事です。
まとめ
今回は一つ具体例を挙げましたが、使い方はもっといろいろあるはずです。
マルチカーソルが手になじむとちょっとしたときに大変便利で時間短縮ができます、是非使ってみてください。
また、拡張機能と組み合わせることで各カーソルで選択中のものの命名ケースを変えたり(camel case -> snake case)、HTML の閉じタグをカーソルごとに追加したり、といろいろな使い方ができるので是非探してみてください。
参考
https://code.visualstudio.com/docs/editor/codebasics#_multiple-selections-multicursor
