VSCode(Visual Studio Code)では、マウス操作だけでなく、キーボードショートカットを使って単語や文字列を効率よく選択できます。
特に、同じ単語を複数箇所まとめて編集したい場合は、Ctrl + DやCtrl + F2などのショートカットを活用すると便利です。
単語選択とマルチカーソル機能を組み合わせれば、変数名やクラス名などを複数箇所まとめて編集できます。
ただし、VSCodeのショートカットはWindows、macOS、Linuxで一部異なるため、自分の環境に合った操作を確認しておきましょう。
マウスで単語を選択する方法
ダブルクリックで単語を選択する
もっとも簡単なのは、選択したい単語をマウスでダブルクリックする方法です。
たとえば、次のコードがあるとします。
const username = "Taro";
console.log(username);
usernameの上でダブルクリックすると、その単語を選択できます。
コードだけでなく、コメントや通常のテキストでも利用できます。
単純に1つの単語だけを選択したい場合は、もっとも直感的な方法です。
ドラッグして任意の範囲を選択する
単語全体ではなく、一部分だけを選択したい場合は、マウスでドラッグします。
たとえば、
console.log(username);
から、
console.log
だけを選択するといった操作ができます。
複数の単語や記号を含む文字列を自由に選びたい場合にも便利です。
Ctrl + Dで単語や次の一致箇所を選択する
Ctrl + Dの基本操作
VSCodeで特に覚えておきたいのがCtrl + Dです。
WindowsとLinuxでは、
Ctrl + D
macOSでは、
Command + D
を使用します。
選択範囲がない状態でカーソルを単語内に置き、Ctrl + Dを押すと、カーソル位置の単語が選択されます。
さらにもう一度押すと、同じ文字列の次の一致箇所が追加で選択されます。
Ctrl + Dで複数箇所を選択する
次のコードを例にします。
const price = 1000;
const tax = price * 0.1;
const total = price + tax;
最初のpriceにカーソルを置いてCtrl + Dを押すと、最初のpriceが選択されます。
続けてCtrl + Dを押すと、次のpriceも選択されます。
さらに押せば、その次のpriceも追加されます。
複数箇所を選択した状態で文字を入力すると、選択しているすべての箇所を同時に編集できます。
Ctrl + Dは必要な箇所だけ選びたいときに便利
Ctrl + Dの特徴は、一致箇所を1つずつ追加できることです。
同じ単語が10箇所あっても、そのうち3箇所だけ変更したい場合などに向いています。
すべての一致箇所を一括選択したい場合は、後述するCtrl + F2やCtrl + Shift + Lを使うほうが効率的です。
Ctrl + F2で現在の単語をすべて選択する
同じ単語を一括選択できる
カーソル位置にある単語と同じ単語を、ファイル内ですべて選択したい場合はCtrl + F2を使用します。
WindowsとLinuxでは、
Ctrl + F2
macOSでは、
Command + F2
です。
たとえば、次のコードがあります。
const price = 1000;
const tax = price * 0.1;
const total = price + tax;
console.log(price);
priceにカーソルを置いてCtrl + F2を押すと、同じpriceがまとめて選択されます。
その状態で、
amount
と入力すれば、すべての選択箇所を同時に変更できます。
Ctrl + Dとの違い
Ctrl + DとCtrl + F2は似ていますが、用途が異なります。
Ctrl + Dは、同じ文字列の一致箇所を1つずつ追加します。
一方、Ctrl + F2は、現在の単語と同じ単語をまとめて選択します。
必要な場所だけ変更したい場合はCtrl + D、すべてまとめて変更したい場合はCtrl + F2という使い分けができます。
Ctrl + Shift + Lで選択した文字列をすべて選択する
選択中のテキストを基準に一括選択できる
WindowsとLinuxでは、
Ctrl + Shift + L
macOSでは、
Shift + Command + L
を使うと、現在選択している文字列と一致する箇所をまとめて選択できます。
たとえば、
<div class="card">
<h2 class="card-title">Title</h2>
</div>
<div class="card">
<h2 class="card-title">Title</h2>
</div>
card-titleを選択してCtrl + Shift + Lを押すと、同じcard-titleをまとめて選択できます。
Ctrl + F2との違い
Ctrl + F2は、カーソル位置の「単語」を基準にします。
一方、Ctrl + Shift + Lは、自分で選択した「文字列」を基準にします。
そのため、
card-title
や、
data-user-id
など、複数の記号や単語を含む文字列をまとめて選択するときに便利です。
Ctrl + K → Ctrl + Dで一致箇所をスキップする
変更したくない一致箇所を飛ばせる
Ctrl + Dで一致箇所を追加している途中で、特定の箇所だけ変更したくない場合があります。
その場合は、WindowsとLinuxで、
Ctrl + K
Ctrl + D
macOSでは、
Command + K
Command + D
を使用します。
この操作をすると、最後に追加した選択が次の一致箇所へ移動します。
たとえば、
const item = "A";
console.log(item);
// このitemは変更したくない
console.log(item);
console.log(item);
というコードで、途中のitemだけ変更対象から外したい場合に便利です。
Ctrl + Uでカーソル操作を取り消す
Ctrl + Dを押しすぎたときに便利
複数選択をしていて、1箇所余計に選択してしまった場合はCtrl + Uを使用できます。
WindowsとLinuxでは、
Ctrl + U
macOSでは、
Command + U
です。
これは通常の編集内容を元に戻すCtrl + Zとは異なり、最後に行ったカーソル操作を取り消す機能です。
Ctrl + Dを1回多く押してしまった場合などに役立ちます。
Shift + 矢印キーで文字単位に選択する
1文字ずつ細かく範囲を調整できる
細かく選択範囲を調整したい場合は、Shiftキーと矢印キーを組み合わせます。
Shift + ←
Shift + →
Shift + ↑
Shift + ↓
これにより、カーソル位置を基準に選択範囲を広げたり縮めたりできます。
単語の一部だけを選択したい場合や、記号を含めて細かく範囲を調整したい場合に便利です。
Ctrl + Shift + ← / →で単語単位に選択する
単語ごとに素早く選択できる
WindowsやLinuxでは、
Ctrl + Shift + →
で右方向へ単語単位に選択でき、
Ctrl + Shift + ←
で左方向へ単語単位に選択できます。
1文字ずつ選ぶよりも素早く範囲を広げられるため、文章やコードの編集で便利です。
ただし、どこまでを1つの単語として扱うかは、文字列の内容やVSCodeの設定によって変わることがあります。
Shift + Alt + → / ←で選択範囲を構造的に広げる
コードの構造に合わせて選択できる
WindowsとLinuxでは、
Shift + Alt + →
で選択範囲を拡張し、
Shift + Alt + ←
で選択範囲を縮小できます。
macOSでは、
Control + Shift + Command + →
Control + Shift + Command + ←
です。
この機能は、単純に1文字ずつ選択範囲を広げるのではなく、構文解析の結果に応じて意味のあるコード単位で選択範囲を広げます。
ただし、実際にどのような単位で選択されるかは、使用している言語、コードの構造、カーソル位置などによって異なります。
Ctrl + Lで現在の行を選択する
行全体をすぐに選択できる
単語ではなく、現在の行全体を選択したい場合はCtrl + Lを使用します。
WindowsとLinuxでは、
Ctrl + L
macOSでは、
Command + L
です。
たとえば、
const name = "Taro";
const age = 20;
const country = "Japan";
const age = 20;の行にカーソルを置いてCtrl + Lを押すと、その行を選択できます。
繰り返し押すことで、複数行へ選択範囲を広げることもできます。
Alt + クリックで複数カーソルを配置する
任意の場所を同時に編集できる
VSCodeでは、複数箇所にカーソルを置いて同時編集できます。
WindowsとLinuxでは、
Alt + クリック
macOSでは、
Option + クリック
を使用します。
たとえば、
const name = "";
const email = "";
const address = "";
それぞれの行にカーソルを追加すれば、複数箇所へ同時に文字を入力できます。
editor.multiCursorModifierで変更できる
マルチカーソルを追加するときに使用する修飾キーは、editor.multiCursorModifier設定で変更できます。
そのため、環境によってはCtrl + クリックやCommand + クリックなどになっている場合があります。
ショートカットが説明どおりに動作しない場合は、設定を確認してみましょう。
上下にカーソルを追加する方法
Windowsの場合
Windowsでは、
Ctrl + Alt + ↑
Ctrl + Alt + ↓
で現在のカーソルの上または下にカーソルを追加できます。
ただし、グラフィックドライバーなどOS側のショートカットと競合する場合があります。
macOSの場合
macOSでは、
Option + Command + ↑
Option + Command + ↓
を使用します。
Linuxの場合
Linuxでは、
Shift + Alt + ↑
Shift + Alt + ↓
がデフォルトです。
Windowsとはショートカットが異なる点に注意しましょう。
矩形選択で縦方向をまとめて選択する
WindowsではShift + Alt + ドラッグを使う
Windowsでは、
Shift + Alt + マウスドラッグ
によって、矩形選択や列選択ができます。
たとえば、
001 apple
002 banana
003 orange
004 grape
の先頭にある、
001
002
003
004
部分だけを縦方向に選択するといった使い方ができます。
複数行の同じ列をまとめて編集したい場合に便利です。
macOSではShift + Option + ドラッグを使う
macOSでは、
Shift + Option + マウスドラッグ
を使用します。
なお、editor.multiCursorModifierの設定を変更している場合は、矩形選択に使う修飾キーも変わることがあります。
Ctrl + FとAlt + Enterで検索結果をすべて選択する
検索条件を指定しながら一括選択できる
単語や文字列を検索し、その検索結果をすべて選択することもできます。
WindowsとLinuxでは、
Ctrl + F
で検索ボックスを開きます。
macOSでは、
Command + F
です。
検索したい文字列を入力したあと、WindowsとLinuxでは、
Alt + Enter
macOSでは、
Option + Enter
を押すと、検索結果をすべて選択できます。
この方法は、大文字・小文字の区別や単語単位、正規表現などの検索条件を使って選択したい場合に便利です。
F2で変数名や関数名を変更する
コードのシンボル変更にはRename Symbolが向いている
Ctrl + DやCtrl + F2は、同じ文字列をまとめて編集するときに便利です。
ただし、変数名、関数名、クラス名などを変更する場合は、単純な文字列選択よりもF2による「Rename Symbol」を使ったほうが適しているケースがあります。
たとえば、
const user = {};
console.log(user);
console.log("user");
というコードがある場合、単純な文字列選択では文字列リテラルの"user"まで変更対象にしてしまう可能性があります。
一方、対応する言語サービスがシンボルを認識していれば、F2で変数としてのuserを対象に名前を変更できます。
Ctrl + DとF2を使い分ける
文字列として複数箇所をまとめて編集したい場合は、Ctrl + DやCtrl + F2が便利です。
変数名や関数名をリファクタリングしたい場合は、F2を使うとよいでしょう。
VSCodeの単語選択で覚えておきたいショートカット一覧
Windows・macOS・Linuxの違い
主要なショートカットをまとめると、次のようになります。
| 操作 | Windows | macOS | Linux |
|---|---|---|---|
| 次の一致を選択に追加 | Ctrl + D | Command + D | Ctrl + D |
| 現在の単語をすべて選択 | Ctrl + F2 | Command + F2 | Ctrl + F2 |
| 選択中の文字列をすべて選択 | Ctrl + Shift + L | Shift + Command + L | Ctrl + Shift + L |
| 次の一致へ選択を移動 | Ctrl + K→Ctrl + D | Command + K→Command + D | Ctrl + K→Ctrl + D |
| 最後のカーソル操作を取り消す | Ctrl + U | Command + U | Ctrl + U |
| 現在の行を選択 | Ctrl + L | Command + L | Ctrl + L |
| 選択範囲を拡張 | Shift + Alt + → | Control + Shift + Command + → | Shift + Alt + → |
| 選択範囲を縮小 | Shift + Alt + ← | Control + Shift + Command + ← | Shift + Alt + ← |
| 上にカーソルを追加 | Ctrl + Alt + ↑ | Option + Command + ↑ | Shift + Alt + ↑ |
| 下にカーソルを追加 | Ctrl + Alt + ↓ | Option + Command + ↓ | Shift + Alt + ↓ |
| 任意位置にカーソル追加 | Alt + クリック | Option + クリック | Alt + クリック |
| 検索結果をすべて選択 | Alt + Enter | Option + Enter | Alt + Enter |
| シンボル名を変更 | F2 | F2 | F2 |
VSCodeでは、キーボードショートカットをユーザー側で変更することもできます。
WindowsとLinuxでは、
Ctrl + K
Ctrl + S
macOSでは、
Command + K
Command + S
でKeyboard Shortcuts画面を開けます。
ショートカットが期待どおりに動作しない場合は、現在の割り当てや拡張機能との競合を確認するとよいでしょう。
VSCodeで単語を選択するときはCtrl + Dを覚えておくと便利
VSCodeで単純に1つの単語を選択するだけなら、マウスのダブルクリックが手軽です。
一方、コード編集の効率を高めたい場合は、まずCtrl + Dを覚えておくと便利です。
Ctrl + Dを使えば、カーソル位置の単語を選択し、同じ文字列の一致箇所を1つずつ追加できます。
同じ単語をすべてまとめて選択したい場合はCtrl + F2、選択した文字列の一致箇所をすべて選択したい場合はCtrl + Shift + Lを使えます。
また、Ctrl + K→Ctrl + Dによる一致箇所のスキップや、Ctrl + Uによるカーソル操作の取り消しを組み合わせれば、必要な場所だけを効率よく編集できます。
さらに、変数名や関数名を変更する場合は、単純な文字列選択ではなくF2のRename Symbolを利用することで、より安全にリファクタリングできる場合があります。
VSCodeでは単語選択、マルチカーソル、検索、シンボル変更などを使い分けることで、大量のコードでも効率よく編集できます。
以上、VSCodeで単語を選択する方法とショートカットについてでした。
最後までお読みいただき、ありがとうございました。










