VSCode（Visual Studio Code）のマルチカーソルとは、エディター内の複数の場所に同時にカーソルを配置し、一括で文字を入力・削除・編集できる機能です。
通常のテキストエディターでは、カーソルは基本的に1か所だけに表示されます。
一方、VSCodeではマルチカーソルを利用することで、複数の行や同じ単語をまとめて編集できます。
たとえば、次のようなコードがあるとします。
<div>Apple</div>
<div>Orange</div>
<div>Banana</div>
3行の同じ位置にカーソルを配置すれば、複数の行へ同じ文字列を一度に入力できます。
HTMLやCSSだけでなく、JavaScript、TypeScript、PHP、Python、Markdownなど、さまざまなファイルの編集で利用できます。
特に、同じ文字列を複数箇所で変更したい場合や、複数行の先頭・末尾へ同じ文字を追加したい場合に便利です。
Alt＋クリックで任意の位置にカーソルを追加する
WindowsではAlt＋クリックを使う
VSCodeで最も基本的なマルチカーソル操作が、Alt + クリックです。
Windowsでは、Altキーを押しながらエディター内の任意の場所をクリックすると、その位置に追加のカーソルを配置できます。
たとえば、次のコードがあるとします。
const apple = 100;
const orange = 200;
const banana = 300;
それぞれの数値の前をAlt + クリックすると、3か所にカーソルを配置できます。
その状態で文字を入力すると、すべてのカーソル位置へ同じ内容が反映されます。
規則的に並んでいない場所を編集したい場合には、非常に使いやすい方法です。
macOSではOption＋クリックを使う
macOSでは、WindowsのAlt + クリックに相当する操作として、
Option + クリック
を使用します。
Optionキーは、キーボード上では⌥と表示されている場合があります。
Linuxでは、基本的にAlt + クリックを利用できます。
上下の行にカーソルを追加する
WindowsではCtrl＋Alt＋上下キーを使う
連続した複数行にカーソルを追加する場合は、マウスよりもキーボードショートカットを使ったほうが効率的です。
Windowsでは、
Ctrl + Alt + ↓
を押すと、現在のカーソルの下の行に新しいカーソルを追加できます。
反対に、
Ctrl + Alt + ↑
を押すと、上の行へカーソルを追加できます。
たとえば、
apple
orange
banana
grape
という4行があり、1行目にカーソルを置いているとします。
Ctrl + Alt + ↓を3回押せば、4行すべてにカーソルを配置できます。
その状態で、
const
と入力すれば、
const apple
const orange
const banana
const grape
のように一括編集できます。
macOSとLinuxではショートカットが異なる
macOSでは、上下にカーソルを追加する操作として、
Option + Command + ↓
Option + Command + ↑
を使用します。
Linuxでは、標準設定で、
Shift + Alt + ↓
Shift + Alt + ↑
が利用されます。
WindowsとLinuxではデフォルトのショートカットが異なるため、OSをまたいでVSCodeを使用する場合は注意が必要です。
Ctrl＋Dで同じ単語を順番に選択する
次の一致箇所を1つずつ追加できる
VSCodeのマルチカーソル機能の中でも特に便利なのが、Ctrl + Dです。
WindowsとLinuxでは、
Ctrl + D
macOSでは、
Command + D
を使用します。
このショートカットを使うと、現在選択している文字列と同じ内容の次の一致箇所を追加選択できます。
また、文字列をあらかじめドラッグで選択していなくても、カーソル位置の単語を対象として使用できます。
たとえば、
const item = 100;
console.log(item);
return item;
というコードがあるとします。
最初のitemにカーソルを置いてCtrl + Dを押すと、itemが選択されます。
さらにCtrl + Dを押すと、次のitemも追加で選択されます。
もう一度押せば、3つ目のitemも選択できます。
その状態で、
product
と入力すると、
const product = 100;
console.log(product);
return product;
のように、一括で変更できます。
必要な箇所だけ選択できる
Ctrl + Dのメリットは、すべての一致箇所を一度に選択するのではなく、1つずつ確認しながら追加できる点です。
同じ文字列が10か所存在していても、そのうち3か所だけ変更したい場合は、必要なところまでCtrl + Dを繰り返せば対応できます。
大量のコードの中から対象を確認しながら編集したい場合に適しています。
参考サイト
VSCode マルチカーソルの活用方法を基礎から徹底解説 #Windows – Qiita
不要な一致をスキップする
Ctrl＋K、Ctrl＋Dで次の一致へ移動できる
Ctrl + Dを繰り返していると、途中に変更したくない一致箇所が出てくる場合があります。
その場合、WindowsとLinuxでは、
Ctrl + K
Ctrl + D
を順番に押すことで、現在の一致をスキップして次の一致箇所へ移動できます。
macOSでは、
Command + K
Command + D
を使用します。
たとえば、同じitemという文字列が複数存在していても、特定の1か所だけ変更対象から除外できます。
Ctrl + Dを使った編集を頻繁に行う場合は、あわせて覚えておくと便利です。
Ctrl＋Shift＋Lですべての一致箇所を選択する
同じ文字列を一気に編集できる
現在選択している文字列と同じ文字列をすべてまとめて選択したい場合は、
Ctrl + Shift + L
を使用します。
macOSでは、
Command + Shift + L
です。
たとえば、
const userName = "Taro";
console.log(userName);
document.title = userName;
というコードがあるとします。
userNameを選択してCtrl + Shift + Lを押すと、同じ選択内容に一致する箇所がまとめて選択されます。
その状態で、
customerName
と入力すれば、
const customerName = "Taro";
console.log(customerName);
document.title = customerName;
のように一括変更できます。
Ctrl＋Dとの違い
Ctrl + DとCtrl + Shift + Lは似ていますが、用途が異なります。
Ctrl + Dは、次の一致箇所を1つずつ追加します。
一方、Ctrl + Shift + Lは、現在の選択内容と同じ一致箇所をまとめて選択します。
そのため、
変更箇所を確認しながら選びたい
→ Ctrl + D
同じ文字列をまとめて変更したい
→ Ctrl + Shift + L
という使い分けができます。
Ctrl＋F2で現在の単語をすべて選択する
カーソル位置の単語を対象にできる
WindowsとLinuxでは、
Ctrl + F2
macOSでは、
Command + F2
を使用すると、現在カーソルが置かれている単語と同じ単語をまとめて選択できます。
Ctrl + Shift + Lと似ていますが、基準となる対象が異なります。
Ctrl + Shift + Lは現在の選択内容を基準にします。
一方、Ctrl + F2は現在の単語を基準にします。
文字列をドラッグで選択する手間を省きたいときに便利です。
検索結果をマルチカーソルで編集する
Ctrl＋FとAlt＋Enterを組み合わせる
検索機能とマルチカーソルを組み合わせる方法も便利です。
Windowsでは、まず、
Ctrl + F
を押して検索ボックスを表示します。
変更したい文字列を検索したあと、
Alt + Enter
を押すと、現在の検索条件に一致する箇所をまとめて選択できます。
macOSではOption + Enterを利用します。
VSCodeの検索では、
- 大文字と小文字を区別する
- 単語単位で検索する
- 正規表現を使用する
といった条件も指定できます。
単純な単語だけでは対象を絞り込めない場合に有効です。
複数行の末尾にカーソルを追加する
Shift＋Alt＋Iを使う
複数行それぞれの末尾へカーソルを配置したい場合は、
Shift + Alt + I
を使用します。
macOSでは、
Shift + Option + I
です。
たとえば、
Apple
Orange
Banana
という3行をまとめて選択してからShift + Alt + Iを押すと、それぞれの行末にカーソルが配置されます。
その状態でカンマを入力すれば、
Apple,
Orange,
Banana,
のように一括編集できます。
配列、CSV、JSON、HTMLなどの編集でも便利です。
矩形選択で縦方向に編集する
Shift＋Alt＋ドラッグで矩形選択できる
VSCodeには、通常の範囲選択とは別に、縦方向へ範囲を指定できる矩形選択機能があります。
Windowsでは、
Shift + Alt + マウスドラッグ
macOSでは、
Shift + Option + マウスドラッグ
を利用できます。
たとえば、
Apple 100
Orange 200
Banana 300
Grape 400
というテキストがある場合、数値部分だけを縦方向に選択できます。
普通の範囲選択では連続する文字列として選択されますが、矩形選択では列単位で対象を指定できます。
表形式のテキストやデータを編集するときに特に便利です。
Windowsではキーボードから矩形選択することもできる
Windowsでは、
Ctrl + Shift + Alt + 矢印キー
を利用して、キーボード操作でColumn Selectionを広げることもできます。
ただし、このショートカットはOSによって異なります。
LinuxではColumn Selection用のデフォルトキーボードショートカットが設定されていない場合があるため、必要であればキーバインドを設定します。
すべてのOSで同じ操作が使えるわけではない点に注意しましょう。
マルチカーソルの操作を1段階戻す
Ctrl＋Uで直前のカーソル操作を元に戻せる
カーソルを追加しすぎた場合には、
Ctrl + U
を使用できます。
macOSでは、
Command + U
です。
このショートカットは、直前のカーソル操作を元に戻すためのものです。
たとえば、Ctrl + Dを1回余計に押してしまった場合などに便利です。
通常の、
Ctrl + Z
とは役割が異なります。
Ctrl + Zはテキストの編集内容などを元に戻すためのUndoです。
一方、Ctrl + Uはマルチカーソルに関するカーソル操作を戻したい場合に利用します。
Escキーでマルチカーソルを解除する
編集後は通常のカーソルへ戻す
マルチカーソルでの編集が終わった場合は、Escキーを押すことでマルチカーソル状態を終了できます。
複数のカーソルが残った状態で文字を入力すると、意図していない場所まで変更される可能性があります。
そのため、マルチカーソル編集が終わったら通常の単一カーソルへ戻しておくと安全です。
マルチカーソルに使う修飾キーは変更できる
editor.multiCursorModifierで変更できる
VSCodeでは、マルチカーソルを追加するときに使用する修飾キーを設定から変更できます。
関連する設定項目は、
editor.multiCursorModifier
です。
代表的な設定値として、
alt
と、
ctrlCmd
があります。
ctrlCmdを指定すると、WindowsではCtrl + クリック、macOSではCommand + クリックを使ってカーソルを追加できるようになります。
ただし、この設定を変更すると、「定義へ移動」などのクリック操作に使う修飾キーとの関係も切り替わります。
普段利用している操作との兼ね合いを確認しながら変更するとよいでしょう。
マルチカーソルのショートカットが動かない場合の対処法
他のソフトとショートカットが競合している可能性がある
Windowsでは、
Ctrl + Alt + ↑
Ctrl + Alt + ↓
などのショートカットが、GPUドライバーやOSのユーティリティなどに割り当てられている場合があります。
その場合、VSCodeのマルチカーソル操作を実行しても反応しないことがあります。
ショートカットが正常に動作しない場合は、VSCodeで、
Ctrl + K
Ctrl + S
を順番に押します。
すると「Keyboard Shortcuts」を開けます。
検索欄で、
Insert Cursor Below
や、
Insert Cursor Above
を検索すれば、現在設定されているショートカットを確認できます。
競合している場合は、別のキーへ変更することも可能です。
マルチカーソルとF2のRename Symbolは使い分ける
単純なテキスト変更ならマルチカーソルが便利
マルチカーソルは、同じ文字列を複数箇所で編集するときに便利です。
HTMLのクラス名、CSSの値、文章、設定ファイルなど、単純なテキストとして変更したい場合には、
Ctrl + D
や、
Ctrl + Shift + L
が役立ちます。
変数や関数名の変更にはF2を検討する
JavaScriptやTypeScriptなどのプログラミングでは、変数名や関数名、クラス名を変更するケースがあります。
そのような場合は、
F2
の「Rename Symbol」を利用したほうが適していることがあります。
たとえば、
const userName = "Taro";
function showName() {
console.log(userName);
}
のuserNameを変更するとします。
マルチカーソルは基本的に一致するテキストを対象とします。
一方、Rename Symbolは、利用している言語や言語サーバーが対応していれば、コード上のシンボルとして参照関係を判断して名前を変更できます。
そのため、
単純な同一テキストの編集
→ マルチカーソル
変数・関数・クラスなどの名前変更
→ F2のRename Symbol
という使い分けをすると安全です。
VSCodeのマルチカーソルで覚えておきたいショートカット
Windowsでよく使う操作
Windowsで特に覚えておきたいマルチカーソル関連のショートカットは、次のとおりです。
| 操作 | ショートカット |
|---|---|
| 任意の位置にカーソルを追加 | Alt + クリック |
| 下の行にカーソルを追加 | Ctrl + Alt + ↓ |
| 上の行にカーソルを追加 | Ctrl + Alt + ↑ |
| 次の一致を追加選択 | Ctrl + D |
| 現在の一致をスキップ | Ctrl + K → Ctrl + D |
| 同じ選択内容をすべて選択 | Ctrl + Shift + L |
| 現在の単語をすべて選択 | Ctrl + F2 |
| 検索結果をまとめて選択 | Alt + Enter |
| 選択した各行の末尾にカーソルを追加 | Shift + Alt + I |
| 矩形選択 | Shift + Alt + ドラッグ |
| 直前のカーソル操作を戻す | Ctrl + U |
すべてを一度に覚える必要はありません。
まずは、
Alt + クリック
Ctrl + D
Ctrl + Shift + L
Ctrl + Alt + ↑ / ↓
の4つを覚えるだけでも、VSCodeでの編集効率は大きく向上します。
VSCodeのマルチカーソルを使えば編集作業を効率化できる
VSCodeのマルチカーソルは、複数の場所を同時に編集できる便利な機能です。
任意の場所へカーソルを追加するAlt + クリックだけでなく、同じ単語を順番に選択するCtrl + Dや、同じ選択内容を一括選択するCtrl + Shift + Lなどを組み合わせることで、さまざまな編集作業を効率化できます。
また、複数行の末尾へカーソルを追加するShift + Alt + Iや、縦方向に編集できる矩形選択も覚えておくと便利です。
ただし、変数や関数などプログラム上のシンボルを安全に変更したい場合は、マルチカーソルだけでなくF2のRename Symbolを利用する方法もあります。
用途に応じてマルチカーソルとVSCodeのリファクタリング機能を使い分けることで、コードや文章をより速く、正確に編集できるようになります。
以上、VSCodeのマルチカーソルとはについてでした。
最後までお読みいただき、ありがとうございました。
