同じ文字、何度も直してない？VS Codeの Ctrl＋D
HTMLのクラス名など、同じ文字を何か所か直したいとき。ひとつずつ書き換えるのは少し面倒ですよね。VS Codeの「マルチカーソル」を使うと、複数の場所を同時に編集できます。まず覚えたいのが、同じ文字を順番に選べる Ctrl＋D です。
選んで、追加して、まとめて入力
変更したい文字を選択し、Windowsでは Ctrl＋D、Macでは Command＋D を押します。同じ文字の次の出現箇所が選択に加わり、繰り返すと対象をひとつずつ増やせます。その状態で入力すると、選んだ箇所がまとめて書き換わります。
HTMLのクラス名を直すなら
たとえば、次のHTMLで3つの card-old を card-new に変更したい場合。最初の card-old を文字列全体で選択し、Ctrl＋Dを2回押して残りの2か所も選びます。あとは card-new と入力するだけです。
<div class="card-old">お知らせ</div>
<div class="card-old">制作実績</div>
<div class="card-old">お問い合わせ</div>編集を終えたら Esc キーで複数の選択を解除します。ページ内の数か所だけ変えたいときや、対象を確認しながら作業したいときに便利です。
全部を変える前に、選択範囲を確認
同じ文字でも、コメントや別の用途のクラス名など、変更したくない場所が混ざることがあります。追加するたびに選択箇所を見て、入力前に対象を確認しましょう。選択した文字の一部だけを置き換えると、意図しない名前になることもあるので、最初の選び方も大切です。
この操作だけで別ファイルのCSSやJavaScriptまで自動で更新されるわけではありません。クラス名を変更した場合は、対応するセレクターも確認してください。ファイルをまたいだ一括変更には検索・置換、変数や関数などの名前の変更には、言語の対応状況に応じて「シンボルの名前変更」も検討できます。
キー割り当てを変更している場合や拡張機能の影響で動かない場合は、キーボードショートカット画面で editor.action.addSelectionToNextFindMatch を検索し、割り当てを確認してみてください。
参考：Visual Studio Code公式ドキュメント「Multiple selections（multi-cursor）」