vs codeのショートカットの練習と一覧

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

基本的な編集

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

コピー	WindowsCtrlc
	mac⌘(command)c
カット	WindowsCtrlx
	mac⌘(command)x
行をコピー（選択してない状態）	WindowsCtrlc
	mac⌘(command)c
行をカット（選択してない状態）	WindowsCtrlx
	mac⌘(command)x
貼り付け	WindowsCtrlv
	mac⌘(command)v
undo	WindowsCtrlz
	mac⌘(command)z
redo	WindowsCtrly
	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ではコメントは１種類ですが、プログラムとなるとコメントアウトは１行に対してと複数行に対しての２種類あります。ちょっとしたコメントは大体１行コメントで済ませます。

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

現在行を選択

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

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

選択ワードの複数選択

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

単語の選択	WindowsCtrld
	mac⌘(command)d
同一単語を複数選択（コマンド例は３つ選択）	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