VS Code 効率化Tips:知らないと損をするショートカットとおすすめ拡張機能

実務での使用頻度が高いショートカット

スクロールできます

操作	Windows	macOS
定義へジャンプ	F12 / Ctrl + クリック	F12 / Cmd + クリック
定義をその場でプレビュー	Alt + F12	Option + F12
参照一覧を表示	Shift + F12	Shift + F12
行削除	Ctrl + Shift + K	Cmd + Shift + K
クイックオープン(ファイル検索)	Ctrl + P	Cmd + P
行を複製する	Shift + Alt + ↑ / ↓	Shift + Option + ↑ / ↓
行を選択	Ctrl + L	Cmd + L
すべてのエディタを閉じる	Ctrl+K Ctrl+W	Cmd+K Cmd+W
次の一致箇所を選択	Ctrl + D	Cmd + D
すべて折りたたむ	Cmd + K → Cmd + 0	Cmd + K → Cmd + 0
ファイル内のシンボル検索	Ctrl + Shift + O	Cmd + Shift + O
シンボルの一括リネーム	F2	F2
ドキュメントの自動整形	Shift + Alt + F	Shift + Option + F

以下はMac

キー	動作
control + P	上の行へカーソル移動
control + N	下の行へカーソル移動
control + B	左へカーソル移動
control + F	右へカーソル移動

同じ列の複数行に対して同時に入力したい場合

Ctrl + Alt + ↑/↓(macOSはCmd + Option + ↑/↓)を使う。こちらはカーソルを縦方向に追加する操作で、揃った位置に同じ文字列を一括で挿入したいとき(配列の各要素にカンマを足す、複数行にセミコロンを追加するなど)に向いている。

任意の位置に自由にカーソルを追加したい場合はAlt + クリック(macOSはOption + クリック)を使う。列を揃える必要がなく、クリックした場所すべてにカーソルが立つため、バラバラの位置を同時に編集したいときに向いている。

すべて折りたたむ

Ctrl+K Ctrl+0

全て折りたたまれており一つずつ展開して使用すると素早く作業できます

何の閉じタグかを分かりやすくする方法

タグ名.クラス名|c

デバッグ実行に関する操作は以下の通り

スクロールできます

操作	Windows	macOS
デバッグ開始/継続	F5	F5
ステップオーバー現在の行を実行するが、その行が関数呼び出しなら関数の中には入らず、呼び出し結果だけ受け取って次の行に進む。	F10	F10
ステップイン現在の行が関数呼び出しなら、その関数の中に入って1行ずつ追う	F11	F11
ステップアウト今いる関数の残りを一気に実行し、呼び出し元の場所まで戻る。	Shift + F11	Shift + F11

シンボルの名前変更（F2）

定義だけでなく、そのシンボルを参照しているすべての箇所が一括で変更されます。

単純な文字列置換と違い、エディタが構文を理解したうえで同名の別シンボルを誤って書き換えることなく、正確にリネームできます

「Surround With」で既存コードを囲む

既存のコードを if などで囲みたい場合は、VS Codeの「Surround With」が便利です。

囲みたいコードを選択した状態でコマンドパレットを開き、

Surround With...

を選択します。

Macの場合は、コマンドパレットを ⌘ ⇧ P で開けます。

たとえば、以下のコードを選択します。

foo()
bar()

「Surround With」から if を選択すると、選択したコードをそのまま if ブロックで囲めます。

if (condition) {
  foo()
  bar()
}

既存コードの前後に {} を手作業で追加してインデントを調整する必要がないため、ちょっとした条件分岐を追加するときに便利です。

CursorのキーバインドをVS Codeに合わせる

Cursorでは、一部のショートカットがCursor独自の機能に割り当てられており、VS Codeと同じキー操作が使えない場合があります。

たとえばVS Codeで、

Cmd + K → Cmd + W

を使って「すべてのエディターを閉じる」操作をしていても、Cursorでは別のショートカットが割り当てられていることがあります。

その場合は、キーボードショートカットから変更できます。

Cmd + K → Cmd + S

で「キーボードショートカット」を開きます。

変更したいコマンドを検索し、VS Codeと同じキーバインドを設定します。

「すべてのエディターを閉じる」のコマンドは以下です。

workbench.action.closeAllEditors

これに、

Cmd + K → Cmd + W

を設定すれば、VS Codeと同じ操作で全タブを閉じられます。

ファイルのタイムライン

VS Codeのタイムライン機能は、エクスプローラーサイドバー下部にあるパネルで、選択中のファイルの変更履歴を時系列で表示する。

主な用途は以下の通り。

履歴の確認: Gitコミット履歴とローカル保存履歴（Local History）の両方が一覧で表示される。「ファイルが保存されました」がローカル保存、コミットメッセージ付きのものがGit履歴。

差分の確認: エントリをクリックすると、その時点と現在のファイルとのdiffが開く。2つのエントリを選択して右クリックすれば、任意の2時点間の差分も比較できる。

復元: エントリを右クリックして「内容の復元」を選ぶと、その時点の内容にファイルを戻せる。Gitのrevertと違いワーキングツリー上の変更なので、気に入らなければUndoで元に戻せる。

フィルタリング: パネル上部のフィルターアイコンから、Gitコミットだけ・ローカル履歴だけに絞り込める。

Local HistoryはGit管理外のファイルでも記録されるので、.gitignore対象のファイルやGitリポジトリ外のファイルでも過去の状態に戻せる点が便利。