こんにちは、さち です。
普段、ウェブサイトを作るときは「Visual Studio Code（以下：VSCode）」を使っています。動作が軽く色々な機能も追加できるのに、無料で利用できる最強のコードエディターアプリです。
今回は、この VSCode で複数の文字列をまとめて「選択」する方法についてまとめていきます。
たまに使おうとして、キーボード操作を忘れてしまっていることがあるので、備忘録としてこの記事を残しておきます。
同じ文字列を選択する
同じ文字列を1つ選択する
ショートカットキー
Ctrl + D キー
ショートカットのコマンド
editor.action.addSelectionToNextFindMatch
あいを選択しました。この状態で Ctrl + D キーを押すと……
- 「同じ文字列」が選択されます。
- Ctrl + D キーを押すたびに、「同じ文字列」の選択を追加できます。
選択を1つ取り消す
ショートカットキー
Ctrl + U キー
ショートカットのコマンド
cursorUndo
- Ctrl + D キーを押して「同じ文字列」を選択します。
- しかし、操作ミスで予定よりも多く選択してしまいました。そういう時は、Ctrl + U キーを押すと……
- 「同じ文字列」の選択を1つ戻すことができます。
1つ飛ばして選択する
ショートカットキー
Ctrl を押しながら K → D
ショートカットのコマンド
editor.action.moveSelectionToNextFindMatch
- Ctrl + D キーを押して「同じ文字列」を選択する時に、ここは選択したくないという場合もあります。そういう時は、Ctrl を押しながら K D キーの順に押すと……
- 1つ飛ばして、次にある「同じ文字列」を選択できます。
同じ文字列をすべて選択
ショートカットキー
Ctrl + Shift + L キー
ショートカットのコマンド
editor.action.selectHighlights
あいを選択しました。この状態で Ctrl + Shift + L キーを押すと……
- 「同じ文字列」がすべて選択されます。
その他の複数選択
マウスで複数選択をする
ショートカットキー
Alt を押しながら「ドラッグ」
- 文字列を「選択」した状態です。
- Alt キーを押しながら「ドラッグ」すると、文字列の選択を追加できます。
矩形選択（長方形状の選択）をする
ショートカットキー
Ctrl + Shift + Alt + 方向 キー
- Ctrl + Shift + Alt + ↓ キーを押していくと……
- 複数の行にカーソルが配置されました。さらに、この状態で Ctrl + Shift + Alt + → キーを押していくと……
- 矩形選択ができました。
Shift + Alt キーを押しながら「ドラッグ」でも矩形選択をできます
【おまけ】 知っていると便利な操作
編集
| 行の内容を下／上にコピー | Shift + Alt + ↓ / ↑ |
| 行の内容を下／上に移動 | Alt + ↓ / ↑ |
| 行を削除 | Ctrl + Shift + K |
| 新しい行を下に挿入 | Ctrl + Enter |
| 新しい行を上に挿入 | Ctrl + Shift + Enter |
選択
| 行を選択 | Ctrl + L |
| 同じ文字列を1つ選択 | Ctrl + D |
| 同じ文字列の選択を1つ取り消す | Ctrl + U |
| 1つ飛ばして同じ文字列を選択 | Ctrl を押しながら K → D |
| 同じ文字列をすべて選択 | Ctrl + Shift + L |
| マウスで複数選択 | Alt + ドラッグ または Ctrl + ドラッグ |
| 矩形選択 | Ctrl + Shift + Alt + 方向 |
| マウスで矩形選択 | Shift + Alt + ドラッグ |
検索・置換
| 文字列を検索 | Ctrl + F |
| 文字列を置換 | Ctrl + H |
| 変数・関数の名前を一括変更 | F2 |
| 変数・関数の定義に移動 | F12 |
| 変数・関数の定義をここに表示 | Alt + F12 |
| 変数・関数の参照に移動 | Shift + F12 |
| 変数・関数の定義と参照を検索 | Shift + Alt + F12 |
「変数・関数の名前を一括変更」の使い方の詳細は、こちらの記事で紹介しています。
VSCode： 同じスコープにある変数の名前だけを一括変更する
こんにちは、さち です。今回は、この VSCode で、同じスコープにある変数の名前だけを変える方法について書いていきます。
at.sachi-web.com
2022.02.23
また、「変数・関数の定義に移動」の使い方の詳細は、こちらの記事で紹介しています。
【VSCode】 関数の「定義」場所に一瞬で移動する方法
こんにちは、さち です。VSCode で JavaScript を書いている時に、コードの中で呼び出している「関数」の内容を変更したいことがあります。その場合、関数が「定義」されている場所に移動する必要がありますが、それが地味に面倒……。…
at.sachi-web.com
2022.07.27
カーソル
| カーソルを行頭／行末に移動 | Home / End |
| カーソルをファイルの最初／最後に移動 | Ctrl + Home / End |
| カーソルを下／上に追加 | Ctrl + Shift + ↓ / ↑ |
| クリックした位置にカーソルを追加 | Alt + クリック または Ctrl + クリック |
| 対応するカッコにカーソルを移動 | Ctrl + Shift + ￥ |
| カーソル移動せずに下／上にスクロール | Ctrl + ↓ / ↑ |
その他
| 右端で折り返しの有効／無効 | Alt + Z |
| コマンドパレットを開く | Ctrl + Shift + P |
| 設定を開く | Ctrl + ， |
| サイドバーを表示／非表示 | Ctrl + B |
| パネルを表示／非表示 | Ctrl + J |
| ターミナルを表示／非表示 | Ctrl + @ |
サイドバーとパネルの表示／非表示については、具体的な操作をこちらの記事で紹介しています。
【VSCode】 「サイドバー（左側）」と「パネル（下部）」を隠す／表示する方法
こんにちは、さち です。今回はこの VSCode で、ウィンドウの左側にあるエクスプローラーなどの「サイドバー」と、下部にある「パネル」の非表示／表示を切り替える方法について書いていきます。
at.sachi-web.com
2023.03.27
コメント