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

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

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

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

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

筆者

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

目次

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

MacWindows動作の説明
Shift + 矢印Shift + 矢印一文ずつ選択
Cmd + ACtrl + A全選択
Cmd + CCtrl + C選択文字をコピー
Cmd + XCtrl + X選択文字を切り取り
Cmd + VCtrl + V貼り付け
Cmd + SCtrl + S保存
Cmd + FCtrl + F文字の検索
Cmd + HCtrl + H文字の置換
HomeHome文字の先頭にカーソルを移動
EndEnd文字の最後にカーソルを移動
PageUpPageUpページ単位で上に移動
PageDownPageDownページ単位で下に移動
Cmd + ZCtrl + Z1つ前の操作に戻る
筆者

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

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

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

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

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

筆者

5分置き、数行に1回など、こまめに保存することをオススメします!

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

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

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

エディタ以外での操作

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

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

エディタでの操作

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

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

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

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

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

カーソルがある行の削除

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

カーソルがある行の複製

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

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

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

MacWindows動作の説明
Option + ClickAlt + Clickカーソルを複製(同時に複数個所を編集できる)
筆者

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

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

MacWindows動作の説明
Cmd + DCtrl + D単語を選択、複数回追加することで、同一の単語を選択する
筆者

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

同一の単語を同時に選択

MacWindows動作の説明
Cmd + Shift + LCtrl + Shift + L同一の単語を一気に選択
筆者

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

コードの自動整形

MacWindows動作の説明
Option + Shift + FAlt + Shift + Fコードの自動整形
筆者

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

矩形(くけい)選択 ※ボックス選択

MacWindows動作の説明
Option + Shift + マウスで選択Alt + Shift + マウスで選択マウス操作での矩形選択(ボックス選択)
Cmd + Option + Shift + 矢印キーCtrl + Alt + Shift + 矢印キー矢印キーでの矩形選択(ボックス選択)

マウスで選択した場合

矢印キーで選択した場合

筆者

箱型で選択できるため、ボックス選択とも呼ばれます。
このように選択することで一部のテキストだけを削除したり、あるいは変更といったことが簡単にできるようになります。

さいごに

いかがでしたでしょうか?

ショートカットキーは知っているだけで、作業時間の短縮に繋がりますので覚えていきたいですね!

今回の記事が少しでも参考になりましたら幸いです。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次