Visual Studio Code(以降 VScode)に標準搭載されている便利なショートカットキーをご存じでしょうか？
ショートカットキーをマスターすれば開発効率を大きく向上させることができます。
本記事ではVScodeを利用してWeb開発する際によく利用されるショートカットキーの一覧を用途ごとにご紹介していきます。
ショートカットキーがあることを知らなかった開発初心者の方や使いこなせれば便利なことは知っているが覚えるのがめんどくさいと敬遠している方も
特に利用頻度の高いコマンドについては赤字で表示していますので、まずは赤字部分のコマンドから習得してストレスフリーで効率的な開発を行えるようにステップアップしましょう
VScodeショートカットキー一覧(Windows版)
Windows専用のショートカットキー一覧となります。Macを使用している方は後続のMac専用のショートカットキー一覧をご覧ください。
編集系(Win)
| 用途 | ショートカットキー |
|---|---|
| コードの整形 | Shift+Alt+F |
| カーソルのある1行のみ切り取り (範囲選択なし) | Ctrl+X |
| カーソルのある1行のみ行のコピー (範囲選択なし) | Ctrl+C |
| 行を移動(範囲選択可能) | Alt+↓または↑ |
| 行をコピー(範囲選択可能) | Shift+Alt+↓または↑ |
| 行の削除 | Ctrl+Shift+K |
| 行のインデント追加 | Ctrl+] |
| 行のインデント削除 | Ctrl+[ |
| 補完候補を開く | Ctrl+Space |
選択＆検索系(Win)
| 用途 | ショートカットキー |
|---|---|
| ファイル内検索 | Ctrl+F |
| ファイル内置換 | Ctrl+H |
| 次を検索 | F3 |
| 前を検索 | Shift+F3 |
| プロジェクト内検索 | Ctrl+Shift+F |
| 矩形選択(マウス選択) | Shift+Alt+ドラッグ |
| 矩形選択(キーボード選択) | Ctrl+Shift+Alt+方向キー |
| 選択範囲と同じ文字列の複数指定 | Ctrl+D |
移動(カーソル、ファイル)系(Win)
| 用途 | ショートカットキー |
|---|---|
| フォルダ内のファイル表示 | Ctrl+P |
| 直近で開いたファイルを表示 | Ctrl+Tab |
| 行の先頭に移動 | Home |
| 行の最後に移動 | End |
| ファイルの先頭に移動 | Ctrl+Home |
| ファイルの末尾に移動 | Ctrl+End |
| 行コメントの切り替え | Ctrl+/ |
| 指定行へ移動 | Ctrl+G |
| 前に戻る | Alt+← |
| 次に進む | Alt+→ |
【VScode】爆速でWeb開発(HTML/CSS)を行えるEmmetチートシート(ショートカット)
VScode開発画面操作系(Win)
| 用途 | ショートカットキー |
|---|---|
| エクスプローラー(フォルダ構成の表示画面)の表示/非表示 | Ctrl+B |
| ターミナルの表示/非表示 | Ctrl+@ |
| 新しく統合ターミナルを表示 | Ctrl+Shift+@ |
VScodeショートカットキー一覧(Mac版)
Mac専用のショートカットキー一覧となります。Windowsを使用している方は前述のWindows専用のショートカットキー一覧をご覧ください。
編集系(Mac)
| 用途 | ショートカットキー |
|---|---|
| コードの整形 | ⇧+option+F |
| カーソルのある1行のみ切り取り (範囲選択なし) | command+X |
| カーソルのある1行のみ行のコピー (範囲選択なし) | command+C |
| 行を移動(範囲選択可能) | option+↓または↑ |
| 行をコピー(範囲選択可能) | ⇧+option+↓または↑ |
| 行の削除 | ⇧+command+K |
| 行のインデント追加 | command+] |
| 行のインデント削除 | command+[ |
| 補完候補を開く | ⌃+Space |
選択＆検索系(Mac)
| 用途 | ショートカットキー |
|---|---|
| ファイル内検索 | command+F |
| ファイル内置換 | option+command+H |
| 次を検索 | command+G |
| 前を検索 | ⇧+command+G |
| プロジェクト内検索 | ⇧+command+F |
| 矩形選択(マウス選択) | ⇧+option+ドラッグ |
| 矩形選択(キーボード選択) | ⇧+option+command+方向キー |
| 選択範囲と同じ文字列の複数指定 | command+D |
移動(カーソル、ファイル)系(Mac)
| 用途 | ショートカットキー |
|---|---|
| フォルダ内のファイル表示 | command+P |
| 直近で開いたファイルを表示 | ⌃+Tab |
| 行の先頭に移動 | Home |
| 行の最後に移動 | End |
| ファイルの先頭に移動 | command+↑ |
| ファイルの末尾に移動 | command+↓ |
| 行コメントの切り替え | command+/ |
| 指定行へ移動 | ⌃+G |
| 前に戻る | ⌃+- |
| 次に進む | ⌃+⇧+- |
【VScode】爆速でWeb開発(HTML/CSS)を行えるEmmetチートシート(ショートカット)
VScode開発画面操作系(Mac)
| 用途 | ショートカットキー |
|---|---|
| エクスプローラー(フォルダ構成の表示画面)の表示/非表示 | command+B |
| ターミナルの表示/非表示 | ⌃+@ |
| 新しく統合ターミナルを表示 | ⌃+⇧+@ |
