VScodeのショートカットの練習

使い方
STARTSTOP
※入力モード切り替え ctrl + shift + alt + space
PRE
NEXT
現在の問題をリストから除外
除外したリストを復活
現在の除外状況のURL取得
https://command-lab.com
コピー
ガイドモード
リピートモード

※推奨ブラウザ Google Chrome

PUSH ENTER
気に入ってもらえたらシェアいただけるとうれしいです!

VS Codeのショートカットキー一覧(全57個)

上の練習で出題されるVS Codeのショートカットキーを、すべて一覧にまとめました。WindowsとMacそれぞれのキーと、その操作が何をするものかの解説を載せています。気になるものを見つけたら、練習で実際に指を動かして覚えてください。

編集

VS Code — 編集
操作 Windows Mac 解説
カーソルがある行の下に空行を挿入 Ctrl+Enter +Enter カーソルがある行を分割せずに、その下に新しい空行を挿入して移動するコマンドです。行の途中にカーソルがあっても文字列を分断せずに次の行を追加できるため、コードを書き足したいときに便利です。
カーソル行がある上に空行を挿入 Ctrl+Shift+Enter ++Enter カーソルがある行の上に新しい空行を挿入して移動するコマンドです。関数の直前に1行追加したいときなど、今の行を崩さずに上へスペースを作りたい場面で使います。
カーソル行の内容を↑にコピー Alt+Shift+ ++ カーソルがある行をコピーして、その真上に複製を挿入するコマンドです。似たような処理を並べて書きたいときや、1行をベースに少し変えたコードを追加したいときに使います。
カーソル行の内容を↓にコピー Alt+Shift+ ++ カーソルがある行をコピーして、その真下に複製を挿入するコマンドです。似たような処理を並べて書きたいときや、1行をベースに少し変えたコードを追加したいときに使います。
行にインデントを追加 Ctrl+] +] カーソルがある行、または選択している複数行に、インデント(字下げ)を1段階追加するコマンドです。if文やforループの中身など、階層構造をコードで表現したいときに使います。
行のインデントを削除 Ctrl+[ +[ カーソルがある行、または選択している複数行のインデント(字下げ)を1段階削除するコマンドです。ネストが深くなりすぎたコードの階層を1つ浅くしたいときに使います。
カーソルがある行をコピー Ctrl+C +C 何も選択していない状態で実行すると、カーソルがある行全体をクリップボードにコピーするコマンドです。単語や範囲をドラッグで選択する手間なく、行単位でコピーしたいときに便利です。
ペースト Ctrl+V +V クリップボードにコピーまたは切り取った内容を、カーソルの位置に貼り付けるコマンドです。行単位でコピーした場合は、カーソルがある行の上に新しい行として挿入されます。
カーソルがある行を切り取り Ctrl+X +X 何も選択していない状態で実行すると、カーソルがある行全体を切り取ってクリップボードに移すコマンドです。行を削除しつつ、あとで別の場所に貼り付けたいときに使います。
ペースト Ctrl+V +V 切り取った行をクリップボードから取り出し、カーソルの位置に貼り付けるコマンドです。行を切り取った直後に別の場所へ移動させたいときに続けて使います。

移動

VS Code — 移動
操作 Windows Mac 解説
カーソル行の内容を↑に移動 Alt+ + カーソルがある行を、そのままの内容で1つ上の行と入れ替えるように移動するコマンドです。コードの順序を調整したいときに、切り取り・貼り付けをせずに素早く行を動かせます。
カーソル行の内容を↓に移動 Alt+ + カーソルがある行を、そのままの内容で1つ下の行と入れ替えるように移動するコマンドです。コードの順序を調整したいときに、切り取り・貼り付けをせずに素早く行を動かせます。
行頭に移動 Home +A カーソルを、今いる行の先頭に一気に移動させるコマンドです。行頭からコードを書き始めたいときや、インデント部分の直前に戻りたいときによく使います。
行末に移動 End +E カーソルを、今いる行の末尾に一気に移動させるコマンドです。行の最後にセミコロンやカンマを追加したいときなど、行末での編集を素早く始められます。
20行目にジャンプ Ctrl+G 2 0 Enter +G 2 0 Enter 行番号を直接入力して、その行へ一気にジャンプするコマンドです。エラーメッセージなどで指摘された特定の行番号にすぐ移動したいときに使います。
サイドバーにフォーカスを移動 Ctrl+0 +0 キーボード操作の対象(フォーカス)を、エディタからサイドバーへ移動させるコマンドです。マウスを使わずにファイルツリー内を矢印キーで移動したいときに使います。
単語の先頭にジャンプ Ctrl+ + カーソルを、現在位置から単語の先頭(区切り文字の直後)まで移動させるコマンドです。矢印キーで1文字ずつ動かすより速く、単語単位でカーソルを動かしたいときに使います。
単語の後方にジャンプ Ctrl+ + カーソルを、現在位置から次の単語の末尾(区切り文字の直前)まで移動させるコマンドです。矢印キーで1文字ずつ動かすより速く、単語単位でカーソルを動かしたいときに使います。
ファイルの先頭に移動 Ctrl+Home + カーソルを、ファイルの一番先頭まで一気に移動させるコマンドです。長いファイルの冒頭にあるimport文やヘッダーコメントをすぐ確認したいときに使います。
ファイルの末尾に移動 Ctrl+End + カーソルを、ファイルの一番末尾まで一気に移動させるコマンドです。ログファイルの最新行や、ファイル末尾に新しいコードを追記したいときに使います。

コメント

VS Code — コメント
操作 Windows Mac 解説
行コメントにする Ctrl+/ +/ カーソルがある行、または選択した複数行を、その言語のコメント記法で一括コメントアウトするコマンドです。デバッグ中に特定のコードを一時的に無効化したいときによく使います。
行コメントをはずす Ctrl+/ +/ 行コメントにしていた行のコメント記号を外し、通常のコードに戻すコマンドです。ショートカットはコメント化と同じキーで、コメント済みの行に対して実行すると解除として働きます。
ブロックコメントにする Alt+Shift+A ++Å 選択した範囲を「/* */」のようなブロックコメント記法で囲むコマンドです。行コメントが使えない箇所や、複数行をまとめて1つのコメントブロックとして囲みたいときに使います。
ブロックコメントをはずす Alt+Shift+A ++Å ブロックコメントで囲んでいた「/* */」を外し、コメント範囲を通常のコードに戻すコマンドです。ショートカットはブロックコメント化と同じキーで、コメント済みの範囲に対して実行すると解除として働きます。

表示

VS Code — 表示
操作 Windows Mac 解説
折返し位置切り替え Alt+Z +Ω 長い行を折り返して画面内に収めて表示するか、折り返さずに横スクロールで表示するかを切り替えるコマンドです。長いコメントや文章を含むファイルを見やすくしたいときに使います。
フォントサイズ等を大きくする。 Ctrl+Shift++ ++; エディタのフォントサイズなどの表示要素を大きくするコマンドです。細かい文字が見づらいときや、画面共有でコードを見やすく表示したいときに使います。
フォントサイズ等を小さくする。 Ctrl+- +- エディタのフォントサイズなどの表示要素を小さくするコマンドです。1画面によりたくさんのコードを表示したいときや、拡大しすぎた表示を元に戻したいときに使います。

選択

VS Code — 選択
操作 Windows Mac 解説
カーソルの単語選択 Ctrl+D +D カーソル位置にある単語をひとまとまりとして選択するコマンドです。ダブルクリックで単語を選ぶのと同じ結果を、キーボードだけで得られます。
カーソルの単語4つ選択 Ctrl+D Ctrl+D Ctrl+D +D +D +D 選択中の単語と同じ文字列を、次に出現する箇所まで含めて追加選択していくコマンドです。同じキーを繰り返し押すたびに選択対象が1つずつ増え、複数箇所を一度に編集するマルチカーソル操作の準備になります。
現在行を選択 Ctrl+L +L カーソルがある行全体を選択状態にするコマンドです。行頭から行末まで選択する手間を省き、行単位での削除や書式変更をすぐに行えます。
現在行から下に2行選択 Ctrl+L Ctrl+L +L +L 現在行を選択したあと、同じキーを重ねて押すことで、選択範囲を下の行へ1行ずつ広げていくコマンドです。複数行をまとめて削除・移動したいときに使います。
アクションスマートセレクトを2つ広げる Alt+Shift+ Alt+Shift+ +++ +++ カーソル位置を起点に、単語→式→文といった構文のまとまりを段階的に広げながら選択していくコマンドです。同じキーを繰り返すたびに選択範囲が1段階ずつ外側に広がります。
アクションスマートセレクトを2つ縮める Alt+Shift+ Alt+Shift+ +++ +++ スマートセレクトで広げた選択範囲を、1段階ずつ内側に縮めていくコマンドです。広げすぎた選択を少し戻したいときに、拡張と逆方向のキーで使います。

検索・置換

VS Code — 検索・置換
操作 Windows Mac 解説
エディタ内の検索 Ctrl+F +F 開いているファイル内から特定の文字列を検索するコマンドです。検索ボックスが画面右上に表示され、一致した箇所がハイライトされて次々にジャンプできます。
エディタ内の置換 Ctrl+H ++Ƒ 開いているファイル内の文字列を、別の文字列に置き換えるコマンドです。検索ボックスの下に置換用の入力欄が現れ、1件ずつ確認しながら、またはまとめて一括置換できます。
フォルダ/ワークスペース全体を検索 Ctrl+Shift+F ++F 開いているファイルだけでなく、フォルダやワークスペース全体を対象に文字列を検索するコマンドです。関数や変数がどのファイルで使われているかを横断的に調べたいときに使います。
フォルダ/ワークスペース全体を置換 Ctrl+Shift+H ++H フォルダやワークスペース全体を対象に、文字列をまとめて置換するコマンドです。ファイルをまたいで変数名や関数名を一括で変更したいときに使いますが、影響範囲が広いため置換前の確認が重要です。

UI操作

VS Code — UI操作
操作 Windows Mac 解説
サイドバーを開く Ctrl+B +B エクスプローラーなどが表示されるサイドバーの表示・非表示を切り替えるコマンドです。ファイルツリーが隠れているときに実行すると再び表示されます。
サイドバーを閉じる Ctrl+B +B サイドバーの表示・非表示を切り替えるコマンドです。ファイルツリーを一時的に隠して、エディタ領域を広く使いたいときに実行します。表示・非表示は同じキーで切り替わります。
エクスプローラーを開く Ctrl+Shift+E ++E サイドバーにファイルツリー(エクスプローラー)を表示するコマンドです。プロジェクト内の別のファイルを開きたいときに、まずこのビューに切り替えます。
検索を開く Ctrl+Shift+F ++F サイドバーに検索専用のビューを表示するコマンドです。エディタ内検索とは異なり、プロジェクト全体を対象にした検索・置換を行うためのパネルが開きます。
設定画面を開く Ctrl+, +, VSCodeの各種設定を変更できる設定画面を開くコマンドです。フォントサイズやテーマ、自動保存の有無など、エディタ全体の挙動をカスタマイズしたいときに使います。
ソース管理を開く Ctrl+Shift+G ++G Gitの変更状況を確認できるソース管理ビューを開くコマンドです。変更されたファイルの一覧やステージング、コミットといったGit操作をGUIから行いたいときに使います。
デバッグを開く Ctrl+Shift+D ++D デバッグ実行やブレークポイントを管理するデバッグビューを開くコマンドです。プログラムをステップ実行しながら変数の値を確認したいときに使います。
拡張機能を開く Ctrl+Shift+X ++X 拡張機能を検索・インストール・管理するビューを開くコマンドです。新しい言語サポートやテーマなど、VSCodeの機能を追加したいときに使います。
パネルを開く Ctrl+J +J 画面下部にターミナルや出力などが表示されるパネルの表示・非表示を切り替えるコマンドです。パネルが隠れているときに実行すると再び表示されます。
パネルを閉じる Ctrl+J +J 画面下部のパネルの表示・非表示を切り替えるコマンドです。ターミナルや出力を一時的に隠して、エディタ領域を広く使いたいときに実行します。表示・非表示は同じキーで切り替わります。
出力を開く Ctrl+Shift+U ++U 拡張機能やビルドツールなどのログが表示される「出力」パネルを開くコマンドです。処理がうまくいかないときに、原因を示すメッセージを確認したい場合に使います。
出力を閉じる Ctrl+Shift+U ++U 「出力」パネルの表示・非表示を切り替えるコマンドです。ログの確認が終わったあと、パネルを閉じてエディタ領域を広く使いたいときに実行します。
問題を開く Ctrl+Shift+M ++M コード中のエラーや警告が一覧表示される「問題」パネルを開くコマンドです。ファイルを保存する前に、構文エラーや型エラーがないかまとめて確認したいときに使います。
問題を閉じる Ctrl+Shift+M ++M 「問題」パネルの表示・非表示を切り替えるコマンドです。エラーの確認が終わったあと、パネルを閉じてエディタ領域を広く使いたいときに実行します。
デバッグコンソールを開く Ctrl+Shift+Y ++Y デバッグ実行中に変数の値を出力したり式を評価したりできる「デバッグコンソール」を開くコマンドです。ブレークポイントで止めた状態で、その場で値を確認・変更したいときに使います。
デバッグコンソールを閉じる Ctrl+Shift+Y ++Y 「デバッグコンソール」の表示・非表示を切り替えるコマンドです。デバッグ作業がひと段落したあと、パネルを閉じてエディタ領域を広く使いたいときに実行します。

基本操作

VS Code — 基本操作
操作 Windows Mac 解説
上書き保存 Ctrl+S +S 編集中のファイルを、これまでのファイルに上書きして保存するコマンドです。作業中はこまめに実行して、変更内容を失わないようにするのが基本です。
名前を付けて保存 Ctrl+Shift+S ++S 編集中の内容を、新しいファイル名や別の場所に保存するコマンドです。元のファイルを残したまま、内容をコピーして別バージョンを作りたいときに使います。

エディタ

VS Code — エディタ
操作 Windows Mac 解説
2つ目のエディタグループを作成 Ctrl+2 +2 現在のエディタの隣に、2つ目のエディタグループ(分割エリア)を作成するコマンドです。2つのファイルを左右に並べて見比べながら編集したいときに使います。
1つめのエディタグループに移動 Ctrl+1 +1 フォーカス(操作対象)を、分割された1つめのエディタグループへ移動させるコマンドです。エディタを左右2分割している状態で、左側のファイルに戻って編集したいときに使います。
最上部に移動