command lab
  • TOP
  • BLOG
  • japan

  • 練習機能付き!vscodeのショートカット一覧

練習機能付き!vscodeのショートカット一覧

Microsoftが開発したWindows、Linux、macOSで動くエディタで、フロントエンジニアに絶大な人気を誇るVisual Studio Code。豊富に用意されているショートカットを覚えることで凄まじいパフォーマンスでのコーディングが可能になります。

ココではそんな便利なvscodeのショートカットキーの一覧と共に直感的に練習ができる練習機能でショートカットキーを短時間で覚えることができます。

ショートカットの練習できます

継続的に次々と出題されるショートカットキーの課題を何度もこなすことで、指にショートカットを覚え込ませることができ、いざと言う時に自然にショートカットキーを使えるようになれます。また下記の練習機能はvscodeの練習課題がすべて入っていますのでジャンルごとに分けて練習したい場合は当サイトの「TRAINING」内からメニューを選んで練習してください。

下記STARTボタンを押下すると練習モードに入ります。
推奨ブラウザ:Google Chrome
STARTSTOP
※入力モード切り替え ctrl + shift + alt + space
PRE
NEXT
ガイドモード
リピートモード
ENTERで次へ

基本的な編集

まずは基本的な編集用のショートカットからおさらいです。基本とは言っても、行ごとコピー・カットのショートカットキーや、インデント関連、行移動などは覚えておくとかなり便利なので網羅的にしっかり覚えておいてもらいたいです。

コピーWindowsCtrlc
mac(command)c
カットWindowsCtrlx
mac(command)x
行をコピー(選択してない状態)WindowsCtrlc
mac(command)c
行をカット(選択してない状態)WindowsCtrlx
mac(command)x
貼り付けWindowsCtrlv
mac(command)v
undoWindowsCtrlz
mac(command)z
redoWindowsCtrly
mac(command)y
現在の行にインデントを追加WindowsCtrl]
mac(command)]
現在の行のインデントを削除WindowsCtrl[
mac(command)[
行移動のダイヤログ表示WindowsCtrlg
mac(control)g

空白行の追加

現在いるカーソル位置の下または上に空白行を追加するショートカットです。このショートカットの良いところはわざわざカーソルを行末や行頭に移動しなくても空白行を追加できるという点です。

下に行追加WindowsCtrlEnter
mac(command)Enter
上に行追加WindowsCtrlshiftEnter
mac(command)(shift)Enter

カーソル行の移動

カーソルがある行ごと上下に移動できるショートカットです。このショートカットを覚えておくと行の順番を変えたい時に非常に便利です。複数行を選択していれば、選択範囲ごと移動できます。コーディングをやっていると使う場面あるので絶対覚えておきたいショートカットです。

カーソル位置の行を下に移動WindowsAlt
mac(option)
カーソル位置の行を上に移動WindowsAlt
mac(option)

カーソル行のコピー

上記のカーソル行の移動にshiftキーを足すとコピーになります。

複数行を選択している状態なら選択範囲ごとコピーされるので、ブロックごとのコピーも非常に簡単にできます。使ってみるとわかりますが、普通にコピーペーストするよりも数倍効率が良いですので是非覚えてください。

カーソル位置の行を下にコピーWindowsAlt
mac(shift)(option)
カーソル位置の行を上にコピーWindowsAlt
mac(shift)(option)

コメントのトグル

行コメント・ブロックコメントのつけ外しができるショートカットです。 プログラムを書く人にとってはよく使う機能なので覚えておくと便利です。ちなみにHTMLではコメントは1種類ですが、プログラムとなるとコメントアウトは1行に対してと複数行に対しての2種類あります。ちょっとしたコメントは大体1行コメントで済ませます。

行コメントをトグルWindowsCtrl/
mac(command)/
ブロックコメントのトグルWindowsshiftalta
mac(shift)(option)a

現在行を選択

カーソルがいる行を選択できるショートカットです。連続して入力すれば複数行選択できます。このショートカットを覚えてしまえば、わざわざ行頭から行末にかけてドラッグせずとも行を選択できるので、非常に作業効率が上がります。

現在行を選択WindowsCtrll
mac(command)l
3行選択WindowsCtrllCtrllCtrll
mac(command)l(command)l(command)l

選択ワードの複数選択

選択しているワードが複数ある場合、このショートカットを使うと同時に編集可能になります。繰り返し入力すると選択するワードの個数を増やせます。使い所としては、HTMLでいうと例えばclassネームを変更する場合、プログラムであれば変数名を変更する場合などに非常に便利です。

単語の選択WindowsCtrld
mac(command)d
同一単語を複数選択(コマンド例は3つ選択)WindowsCtrldCtrldCtrld
mac(command)d(command)d(command)d

表示関係

「サイドバーの表示切り替え」はエクスプローラー(ファイル管理タブ)や検索機能、git機能などを格納しているサイドバーの表示・非表示を切り替えます。ノートパソコンなど狭いディスプレイで作業する場合はこのショートカットを覚えておくと便利です。

「折返し位置切り替え」はコードの自動折返しの有無を切り替えるショートカットです。画面端で折返しの有無を切り替えます。自動折返しがあったほうが編集しやすいですが、可読性が落ちるので、場面場面で使い分けると非常に便利です。

サイドバーの表示切り替えWindowsCtrlb
mac(command)b
折返し位置切り替えWindowsAltz
mac(option)z

検索・置換のいろいろ

定番ですが、検索・置換に関しても一通りショートカットがあります。開いているドキュメント内の検索・置換とフォルダやワークスペース内での検索・置換があり、正規表現も使えます。

エディタ内の検索WindowsCtrlf
mac(command)f
エディタ内の置換WindowsCtrlh
mac(command)(option)f
選択範囲で検索Windows 規定なし
mac(command)e
フォルダ/ワークスペース全体を検索WindowsCtrlshiftf
mac(command)(shift)f
フォルダ/ワークスペース全体を置換WindowsCtrlshifth
mac(command)(shift)h

ファイル操作

ファイル操作関連のショートカットです。覚えておいてとにかく便利なのは「ファイルを名前で検索」のショートカットキーです。私は基本的にこれでファイルの移動を行っています。ファイル名さえ覚えておけば瞬時にそのファイルに飛べるのでかなり重宝しています。

新規ファイルを開くWindowsCtrln
mac(command)n
ファイルを開くWindowsCtrlo
mac(command)o
フォルダを開くWindowsCtrlk
mac規定なし
ファイルを保存WindowsCtrls
mac(command)s
ファイルを名前で検索WindowsCtrlp
mac(command)p

関連記事