VSCodeのマルチカーソル機能で編集速度を3倍にする方法｜現場で使える実践テクニック

こんにちは！

今日は「VSCodeのマルチカーソル機能で編集速度を3倍にする方法」について解説します。

僕が最初マルチカーソルを使わなかった理由

実は、僕も最初は「マルチカーソル？何それ、別に普通の置換機能でいいやん」って思ってました。
新人時代は同じ単語を何度も手作業で修正してたんですよ。
それがめっちゃ時間かかるわけです。

ある日、先輩に「クリオ、それマルチカーソルで一気にやっちゃえば5分かからんで」って指摘されたんです。
そこからマルチカーソルの虜になりました。
今では1日に何回も使ってますし、これなしの仕事は考えられません。

最初は「複雑そう」って感じるかもしれませんが、実は3つの基本パターンを覚えたらめちゃくちゃ簡単です。
これからそれをお話しします。

基本的なマルチカーソルの3つの使い方

1. 同じ単語を一気に選択・編集する（Ctrl+D / Cmd+D）

これが一番使うパターンです。
カーソルを単語の上に置いて、Ctrl+D（MacはCmd+D）を押すと、その単語が選択されます。
もう一度押すと、次の同じ単語も選択されます。

例えば、HTMLでclassName="btn"という記述が複数あって、すべてをclassName="button"に変更したいとしましょう。
「btn」の上にカーソルを置いてCtrl+Dを3回押せば、3つ一気に選択できるわけです。
そして一度に入力すればすべて変わります。

ほんま便利ですよ。

2. 複数行の同じ位置にカーソルを置く（Alt+Click）

今度は複数行の同じ列にカーソルを置きたい場合です。
例えば、複数の行の最後に同じコードを追加したいときですね。

Altキーを押しながら、各行をクリックするだけです。
すると、クリックした位置すべてにカーソルが出現します。
後は普通に入力するだけで、すべての行に同時に入力されます。

僕の現場では、CSSで複数のプロパティに同じ値を付けたいときや、JavaScriptの複数行を同時に編集するときに使ってます。

3. 選択範囲を含むすべての行に対して編集（Ctrl+Shift+L）

これはちょっと上級ですが、選択した単語のすべての出現箇所に一気にカーソルを置く方法です。
選択状態でCtrl+Shift+L（MacはCmd+Shift+L）を押すと、マッチしたすべての箇所にカーソルが出現します。

置換機能と違って、各箇所でちょっとずつ違う編集ができるのが強みです。

実務で役立つマルチカーソルのテクニック

複数のクラス名を一気に変更する

HTMLリファクタリングのときに活躍します。
例えば、.old-buttonというクラスを.btn-primaryに全部変えたいとき。

単語の上に置いてCtrl+Dを何度も押して全選択してから入力し直すと、すべて同時に変わります。
現場では「あ、このクラス名センスなかったな」ってなることめっちゃ多いんですよ。
そういう時に重宝します。

複数の変数に同じ初期値を代入する

JavaScriptで同じような変数を複数定義するときも役立ちます。
例えば、複数の変数をnullで初期化したいとき。

最初のnullを入力してからCtrl+Dで次のnullを選択、またその次を選択…という流れで、複数の値を同時に編集できます。

CSSでselectorsを一気に修正する

CSSファイルで同じセレクタが複数回出てきて、一つだけ変えたい…ってときもあります。
マルチカーソルなら、該当する行をすべて一気に確認・編集できるので、ミスも減ります。

僕も以前、同じセレクタを修正し忘れて本番環境でバグったことあります。
その経験以来、マルチカーソルで全部確認するようにしてます。

まとめ

VSCodeのマルチカーソル機能は、一見地味ですが、毎日の編集時間を劇的に短縮します。
特にCtrl+D（Cmd+D）とAlt+Clickの2つを覚えるだけで、十分な効果が出ます。

最初は「何これ？」って感じるかもしれませんが、一度使い始めたらやめられませんよ。
ぜひ今日からプロジェクトで試してみてください。
きっと「あ、めっちゃ早くなった」って実感できると思います。