【VSCODE】Visual Studio Codeでよく使用するショートカットキーを厳選

2024年2月23日

こんにちは。IWACODEの岩村彰斗です。

今回はHTMLやCSSのコーディングで使用するVisual Studio Code、通称VSCODEでよく使用するショートカットキーをご紹介いたします。

ショートカットキーはかなりたくさんあり、すべて覚えるのは中々ハードルが高いですが、その中でも覚えたら時短に繋がるものについて厳選しました。

たくさんあって覚えられないです・・・

筆者

いきなり全部覚えようとすると、かなり大変なので、まずはどんなものがあるか認識していただき、少しずつでいいので自然に使えるようになりましょう！

一般的な基本的なショートカットキー

Mac	Windows	動作の説明
Shift + 矢印	Shift + 矢印	一文ずつ選択
Cmd + A	Ctrl + A	全選択
Cmd + C	Ctrl + C	選択文字をコピー
Cmd + X	Ctrl + X	選択文字を切り取り
Cmd + V	Ctrl + V	貼り付け
Cmd + S	Ctrl + S	保存
Cmd + F	Ctrl + F	文字の検索
Cmd + H	Ctrl + H	文字の置換
Home	Home	文字の先頭にカーソルを移動
End	End	文字の最後にカーソルを移動
PageUp	PageUp	ページ単位で上に移動
PageDown	PageDown	ページ単位で下に移動
Cmd + Z	Ctrl + Z	１つ前の操作に戻る

筆者

これらは一般的なショートカットキーになります。

Excelなどの別ツールでも同様に使用できるショートカットのため、別枠でご紹介させていただきました。

特にCmd +s , Ctrl + s の保存についてはかなり重要です。

作業をしていて、「あ、保存してなかった」など保存を忘れてしまうお話をよく耳にします。

こまめにCmd + s , Ctrl + s で保存することで、そういったことを防ぐこともできますので、保存についてはこまめに行うことを推奨いたします。

筆者

５分置き、数行に１回など、こまめに保存することをオススメします！

Cmd + c , Ctrl + c のコピー、Cmd + v , Ctrl + v の貼り付けもかなり大事なショートカットなので、もし使用されていない場合は、ぜひ覚えていってください。

右クリックでメニューを出してコピー、貼り付けをするよりもかなり時短になります。

VSCODEでの操作で使用するショートカットキー

エディタ以外での操作

Mac	Windows	動作の説明
Cmd + P	Ctrl + P	クイックオープンウィンドウ
Cmd + Shift + P	Ctrl + Shift + P	コマンドパレットを開く
Cmd + B	Ctrl + B	サイドバーの開閉
Cmd + ¥	Ctrl + ¥	エディターの分割
Option + 左右矢印キー	Alt + 左右矢印キー	タブの移動

筆者

特にCmb + b,Ctrl + bのサイドバーの開閉は、画面を広く使えるようになるので、覚えておくと便利です！

エディタでの操作

Mac	Windows	動作の説明
Option + 上下矢印キー	Alt + 上下矢印キー	カーソルがある行ごと移動
Cmd + Shift + K	Ctrl + Shift+ K	カーソルがある行の削除
Option + Shift + 上下矢印キー	Alt+ Shift + 上下矢印キー	カーソルがある行の複製
Cmd + /	Ctrl + /	選択行、またはカーソル行のコメントアウト
Option + Click	Alt + Click	カーソルを複製（同時に複数個所を編集できる）
Cmd + D	Ctrl + D	単語を選択、複数回追加することで、同一の単語を一気に選択する
Cmd + Shift + L	Ctrl + Shift + L	同一の単語を同時に選択
Cmd + Z	Ctrl + Z	１つ前の操作に戻る
Cmd + Y	Ctrl + Y	１つ後の操作に戻る ※Ctrl+Zで戻りすぎた場合など
Cmd + ＋キー	Ctrl + ＋キー	ズーム
Cmd + ーキー	Ctrl + ーキー	ズームアウト
Option + Shift + F	Alt + Shift + F	コードの自動整形
Option + Shift + マウスで選択	Alt + Shift + マウスで選択	マウス操作での矩形選択（ボックス選択）
Cmd + Option + Shift + 矢印キー	Ctrl + Alt + Shift + 矢印キー	矢印キーでの矩形選択（ボックス選択）

筆者

これらのショートカットは使えるとかなり便利なため、出来るだけ使いながら覚えていきたいですね！
文字だけではわかりずらいものについては抜粋してご紹介いたします。

カーソルがある行ごと移動

Mac	Windows	動作の説明
Option + 上下矢印キー	Alt + 上下矢印キー	カーソルがある行ごと移動

筆者

タグの位置を入れ替えたい、といった場面で便利です。

カーソルがある行の削除

Mac	Windows	動作の説明
Option + 上下矢印キー	Alt + 上下矢印キー	カーソルがある行ごと移動

カーソルがある行の複製

Mac	Windows	動作の説明
Option + Shift + 上下矢印キー	Alt + Shift + 上下矢印キー	カーソルがある行の複製

筆者

同様のタグを複製したい時に便利です。

カーソルを複製（同時に複数個所を編集できる）

Mac	Windows	動作の説明
Option + Click	Alt + Click	カーソルを複製（同時に複数個所を編集できる）

筆者

同じ記載を複数個所に入れる場合に便利です。

単語を選択、複数回追加することで、同一の単語を一気に選択する

Mac	Windows	動作の説明
Cmd + D	Ctrl + D	単語を選択、複数回追加することで、同一の単語を選択する

筆者

同じ記載の場所を同時に編集したい場合に便利です。

同一の単語を同時に選択

Mac	Windows	動作の説明
Cmd + Shift + L	Ctrl + Shift + L	同一の単語を一気に選択

筆者

Ctrl（Cmd） + D でも同様のことが可能ですが、こちらのショートカットでは一気に行うことが可能です。

コードの自動整形

Mac	Windows	動作の説明
Option + Shift + F	Alt + Shift + F	コードの自動整形

筆者

インデント（左側のスペース）が自動的にそろってくれます。インデントがずれていると、どこからどこまでがタグで囲まれているのか、とても分かりずらいため、ずれている場合はこのように成型するのが重要です。

矩形（くけい）選択　※ボックス選択

Mac	Windows	動作の説明
Option + Shift + マウスで選択	Alt + Shift + マウスで選択	マウス操作での矩形選択（ボックス選択）
Cmd + Option + Shift + 矢印キー	Ctrl + Alt + Shift + 矢印キー	矢印キーでの矩形選択（ボックス選択）

マウスで選択した場合