VSCodeで複数箇所を一括編集する方法について

採用はこちら

Visual Studio Code(VSCode)には、複数の場所を同時に編集できる「マルチカーソル」機能が搭載されています。

通常は1つのカーソルだけを使って文字を入力しますが、マルチカーソルを使うと複数の位置にカーソルを配置し、同じ内容を一括で入力・削除できます。

たとえば、HTMLやCSSで同じクラス名を複数箇所変更したり、複数行の末尾に同じ記号を追加したりする作業を効率化できます。

また、VSCodeにはマルチカーソル以外にも、検索・置換やRename Symbolなど、複数箇所をまとめて変更するための機能があります。

編集内容に応じて適切な方法を使い分けることが重要です。

目次

Alt+クリックで任意の場所にカーソルを追加する

離れた場所を同時に編集したい場合に便利

標準設定のVSCodeでは、WindowsやLinuxでAlt + Click、macOSでOption + Clickを使用すると、クリックした位置にカーソルを追加できます。

たとえば、次のHTMLがあるとします。

<div class="item">Apple</div>
<div class="item">Banana</div>
<div class="item">Orange</div>

3つのitem部分にそれぞれカーソルを配置してproductと入力すると、次のようにまとめて編集できます。

<div class="product">Apple</div>
<div class="product">Banana</div>
<div class="product">Orange</div>

同じ文字列でなくても、任意の場所を自由に選択して編集できる点が特徴です。

マルチカーソルの修飾キーは変更できる

VSCodeでは、マルチカーソルに使用する修飾キーを設定で変更できます。

標準設定では次のようになっています。

"editor.multiCursorModifier": "alt"

この場合、WindowsやLinuxではAlt + Click、macOSではOption + Clickを使用します。

次のように変更することもできます。

"editor.multiCursorModifier": "ctrlCmd"

この設定では、WindowsやLinuxではCtrl + Click、macOSではCommand + Clickがマルチカーソル操作になります。

そのため、ショートカットを説明する際は「標準設定では」という前提を付けておくと正確です。

Ctrl+Dで同じ文字列を順番に選択する

次の一致箇所を追加選択できる

WindowsやLinuxではCtrl + D、macOSではCommand + Dを押すと、現在選択している文字列と同じ次の出現箇所を追加選択できます。

たとえば、次のコードがあるとします。

const userName = "Taro";

console.log(userName);

document.title = userName;

最初のuserNameを選択した状態でCtrl + Dを押すと、次のuserNameも選択されます。

さらにCtrl + Dを押すことで、その次の一致箇所も選択できます。

選択した状態でcustomerNameと入力すると、まとめて変更できます。

const customerName = "Taro";

console.log(customerName);

document.title = customerName;

すべての一致箇所を変更する必要がなく、一部だけを順番に選択したい場合に便利です。

Ctrl+K、Ctrl+Dで不要な一致箇所を飛ばす

変更したくない箇所がある場合に使える

Ctrl + Dで同じ文字列を順番に選択していると、途中の一致箇所だけ変更したくない場合があります。

WindowsやLinuxでは、次のキーを順番に押します。

Ctrl + K
Ctrl + D

macOSでは次の操作になります。

Command + K
Command + D

この操作を使うと、最後に追加した選択範囲を次の一致箇所へ移動できます。

ユーザー視点では、「現在の一致箇所を飛ばして次へ進む」操作として利用できます。

Ctrl+Shift+Lですべての一致箇所を選択する

同じ文字列を一括編集したい場合に便利

現在選択している文字列と一致するすべての箇所を一度に選択したい場合は、WindowsやLinuxで次のショートカットを使用します。

Ctrl + Shift + L

macOSでは次の操作になります。

Command + Shift + L

たとえば、次のCSSがあるとします。

.card {
    color: red;
}

.title {
    color: red;
}

.button {
    color: red;
}

redを選択してCtrl + Shift + Lを押し、blueと入力すると、すべてのredをまとめて変更できます。

.card {
    color: blue;
}

.title {
    color: blue;
}

.button {
    color: blue;
}

同じ文字列をファイル内で一括編集したい場合に便利です。

Ctrl+F2で現在の単語をすべて選択する

カーソル位置の単語をまとめて編集できる

WindowsやLinuxではCtrl + F2を使用すると、現在カーソルがある単語と一致する箇所をすべて選択できます。

macOSではCommand + F2を使用します。

たとえば、次のコードでcountにカーソルを置きます。

let count = 0;

count++;

console.log(count);

Ctrl + F2を押すと、同じ単語であるcountがまとめて選択されます。

Ctrl + Shift + Lと似ていますが、Ctrl + Shift + Lは現在選択している文字列を基準にするのに対し、Ctrl + F2は現在カーソルがある単語を基準にするという違いがあります。

上下の行にカーソルを追加する

縦に並んだ複数行を同時編集できる

上下の行にカーソルを追加したい場合は、OSによってショートカットが異なります。

Windowsでは次の操作を使用します。

Ctrl + Alt + ↑
Ctrl + Alt + ↓

macOSでは次の操作です。

Option + Command + ↑
Option + Command + ↓

Linuxでは次のショートカットが使用されます。

Shift + Alt + ↑
Shift + Alt + ↓

たとえば、次のようなテキストがあるとします。

Apple
Banana
Orange
Grape

各行の先頭にカーソルを配置し、- を入力すると次のようにまとめて編集できます。

- Apple
- Banana
- Orange
- Grape

Windowsでは他のショートカットと競合する場合がある

Windows環境では、Ctrl + Alt + ↑やCtrl + Alt + ↓がグラフィックドライバーなどのショートカットとして使用されていることがあります。

その場合は、VSCodeのKeyboard Shortcutsから別のキーへ変更できます。

Shift+Alt+Iで各行の末尾をまとめて編集する

複数行の末尾に同じ文字を追加できる

複数行の末尾に同じ文字を追加したい場合は、対象行を選択してからWindowsでは次のショートカットを使用します。

Shift + Alt + I

macOSでは次の操作になります。

Shift + Option + I

この操作を行うと、選択した各行の末尾にカーソルが配置されます。

たとえば、次のテキストがあるとします。

Apple
Banana
Orange

各行末にカーソルを配置した状態で,を入力すると、次のように変更できます。

Apple,
Banana,
Orange,

CSV形式のデータやコードを整形するときにも便利です。

列選択で縦方向をまとめて編集する

長方形の範囲を選択できる

VSCodeでは、通常の文字選択だけでなく、長方形の形で範囲を選択する「Column Selection」も利用できます。

標準設定のWindowsでは、Shift + Altを押しながらマウスをドラッグすることで列選択できます。

たとえば、次のようなテキストがあるとします。

001 Apple
002 Banana
003 Orange
004 Grape

左側の番号部分だけを縦方向に選択して削除すると、次のようになります。

Apple
Banana
Orange
Grape

表形式のデータ、ログ、固定長データなどを編集するときに便利です。

ただし、editor.multiCursorModifierの設定によって使用する修飾キーが変わる場合があります。

検索結果をまとめて選択する

Alt+Enterで一致箇所を一括選択できる

WindowsやLinuxではCtrl + Fで検索欄を開いたあと、Alt + Enterを押すことで、検索条件に一致する箇所をまとめて選択できます。

macOSではOption + Enterを使用します。

検索では、大文字・小文字の区別、単語単位、正規表現などを利用できます。

そのため、単純な文字一致より柔軟に対象を絞り込んで一括編集できます。

Ctrl+Hで現在のファイルを検索・置換する

同じ文字列を大量に変更したい場合に便利

WindowsやLinuxではCtrl + Hを使用すると、現在開いているエディターで検索・置換を行えます。

たとえば、old-classをnew-classに変更したい場合は、検索欄と置換欄にそれぞれ文字列を入力して置換します。

検索
old-class

置換
new-class

マルチカーソルは複数箇所を自由に編集するのに向いています。

一方、検索・置換は同じパターンを大量に別の文字列へ変更する場合に適しています。

Ctrl+Shift+Hで複数ファイルを一括置換する

プロジェクト全体の変更に使える

複数ファイルにまたがって同じ文字列を変更したい場合は、WindowsやLinuxで次のショートカットを使用します。

Ctrl + Shift + H

ワークスペースや開いているフォルダー全体を対象に検索・置換できます。

たとえば、複数のHTMLやJavaScript、設定ファイルに含まれるURLをまとめて変更する場合に便利です。

ただし、変数名や関数名などのプログラム上の識別子を変更する場合は、単純な文字列置換ではなくRename Symbolを利用したほうが適しています。

F2で変数名や関数名をまとめて変更する

Rename Symbolを使うと安全にリファクタリングしやすい

対応しているプログラミング言語では、変更したい変数や関数、クラスなどにカーソルを置いてF2を押すと、Rename Symbolを実行できます。

たとえば、次のコードがあるとします。

function getUserName() {
    return "Taro";
}

const name = getUserName();

console.log(getUserName());

getUserNameにカーソルを置いてF2を押し、fetchUserNameに変更すると、対応する参照もまとめて変更できます。

Rename Symbolは単なる文字列検索ではなく、対応している言語サービスがコード上のシンボルを認識して変更します。

そのため、変数名や関数名、クラス名などのリファクタリングでは、検索・置換より意図しない箇所を変更するリスクを抑えやすくなります。

すべての言語で同じように使えるわけではない

Rename Symbolは、使用している言語や拡張機能、言語サーバーの対応状況によって利用できる範囲が異なります。

そのため、必ずすべてのファイルやすべての言語で同じように動作するわけではありません。

F2を使う場合は、「対応している言語では利用できる」と理解しておくことが重要です。

マルチカーソルを解除する方法

Escで通常のカーソルに戻せる

複数カーソルを解除したい場合は、Escを押す方法が簡単です。

通常の位置をクリックすることでも、単一カーソルへ戻せます。

Ctrl+Uで直前のカーソル操作を取り消せる

WindowsやLinuxでは次のショートカットを使用します。

Ctrl + U

macOSでは次の操作です。

Command + U

この操作は、直前のカーソル追加などを取り消す機能です。

一般的な編集内容を取り消すCtrl + ZやCommand + Zとは役割が異なります。

ショートカットが使えない場合の対処方法

Keyboard Shortcutsから設定を確認する

ショートカットが反応しない場合は、OSやほかのアプリケーションとキー操作が競合している可能性があります。

WindowsやLinuxでは、次のキーを順番に押すことでKeyboard Shortcutsを開けます。

Ctrl + K
Ctrl + S

Keyboard Shortcutsでは、各コマンドに現在割り当てられているキーを確認できます。

たとえば、カーソルを下へ追加するコマンドを探したい場合は、Insert Cursor Belowと検索できます。

競合している場合は、自分が使いやすいショートカットに変更することも可能です。

VSCodeで複数箇所を編集するときの使い分け

用途によって最適な方法が異なる

VSCodeには複数箇所をまとめて編集する方法が複数あります。

用途ごとに整理すると、次のようになります。

編集したい内容おすすめの方法
任意の複数箇所Alt + Click
同じ文字列を順番に選択Ctrl + D
同じ文字列をすべて選択Ctrl + Shift + L
現在の単語をすべて選択Ctrl + F2
上下の行にカーソルを追加Ctrl + Alt + ↑ / ↓など
各行の末尾を一括編集Shift + Alt + I
縦方向を矩形選択Shift + Alt + ドラッグ
現在のファイルを検索・置換Ctrl + H
複数ファイルを検索・置換Ctrl + Shift + H
変数・関数・クラス名を変更F2

OSやキーボード設定によって一部のショートカットは異なる場合があります。

また、マルチカーソルの修飾キーを変更している場合は操作方法も変わります。

VSCodeの複数箇所編集ではCtrl+Dを覚えると便利

VSCodeで複数箇所を一括編集する場合、特に覚えておきたいのがAlt + Click、Ctrl + D、Ctrl + Shift + Lです。

任意の場所を編集したい場合はAlt + Click、同じ文字列を順番に選択したい場合はCtrl + D、一致する文字列を一括編集したい場合はCtrl + Shift + Lが便利です。

さらに、変数名や関数名、クラス名などを変更する場合は、対応している言語であればF2のRename Symbolを利用すると、単純な検索・置換より安全にリファクタリングしやすくなります。

文字列そのものを変更したいのか、プログラム上のシンボルを変更したいのかを判断し、目的に合わせて機能を使い分けることが重要です。

以上、VSCodeで複数箇所を一括編集する方法についてでした。

最後までお読みいただき、ありがとうございました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次