Visual Studio Codeで有能なショートカットキーを紹介

こんにちは。
開発チームのワイルド担当、まんだいです。

開発をしていると、エディタが手に馴染んでいるかどうかが作業スピードに関わってきたりするので、ショートカットキーはできるだけ頭を使わず、手が勝手に動くくらいになじませたいと思っています。

それでもたまにしか使わなかったり、よく使うのにどうしても染み付かず、体が拒絶しているショートカットがあったりします。
あと、うわ～便利だわ～と思っても、後で忘れてしまうかなりもったいないケースを防ぐための備忘録として、Visual Studio Code（以下、VSCode）で使える、知る人ぞ知る検索してもなかなか出てこないショートカットを紹介したいと思います。

なお、利用するバージョンによってキーコンフィグが変わったりしますが、この記事に載っているショートカットの確認環境は、1.17.2です。

対応する括弧（かっこ）にカーソルをジャンプする

Ctrl + Shift + \

JSやPHPの場合は、「[」、「{」、「(」などに反応する。

なおHTMLの場合は、タグの前後に入れる「<」、「>」のペアに反応する模様。

 

カーソル位置でコードフォルディング

Ctrl + Shift + [
Ctrl + Shift + ]

上が折りたたみ、下が展開になっています。
使っていると、いちいち行番号のところまでマウスカーソルを動かすのも面倒になってきますよ。

 

ファイル全体を対象にコードフォルディングで折りたたむ

Ctrl + k -> Ctrl + 0

Ctrlを押しながら、kと0を順に押せばOK。

 

折りたたんだすべてのコードフォルディングを展開する

Ctrl + k -> Ctrl + j

Ctrlを押しながら、kとjを順に押せばOK。

 

選択中のJSONデータを改行 + インデントを入れて見やすくする（JSON pretty）

Alt + Ctrl + m

パースできない場合は警告が表示されるので、JSONデータの構造チェックにも使える。

標準機能ではなかったのに紹介してしまいました。つい便利すぎて……。
JSON Toolsをインストールしてください。

 

一行をまるごと削除

Ctrl + Shift + k

EclipseではCtrl + Shiftが設定されていて、左手だけで削除できた。

 

カーソル行の前に改行を追加

Ctrl + Shift + Enter

よくわからない場合は、「Homeを押して、Enter、カーソルキーで左を1回打鍵」をすることを想像してください。

 

ファイルの先頭/末尾へ移動

Ctrl + Home
Ctrl + End

Shiftを追加して現在位置から先頭/末尾までを選択状態にすることも。

 

エディタタブの切り替え

幾つかキーボードからのエディタタブを切り替える方法が提供されているのでまとめて紹介します。

Ctrl + Tab

開いているファイルのリストから選択する。

Ctrl + PageUp
Ctrl + PageDown

隣のエディタタブへ移動する。

 

コメントアウト / アンコメント

Ctrl + /

コメントアウトはジョーシキの機能ですが、以下の理由から、よほどの理由がない限り、必ずショートカットキーを経由して行うようにしています。

• ショートカットからコメントアウトすると、インデントを壊さないように適切なインデントでコメントアウトしてくれる
• ブロックコメントのショートカットキーの組み合わせが不遇すぎる（Ctrl + Shift + a）
• 選択範囲とブロックコメント化の組み合わせの動きはこちらの意図とずれていて、複数行を行コメント化する方が意図した結果になる
• VSCodeが拡張子からプログラミング言語に合わせてコメントアウトしてくれるので、いろんな言語を行ったり来たりする人にとって便利

まぁ、余計なことを考える必要がなくなるというのが一番大きいかも知れません。
デメリットは、複数行の行コメントに対しては、コードフォルディングが効かないという点でしょうか。

 

まとめ

開発をしている時、一番長い時間やっていることは、右手がマウスとキーボードを行ったり来たりしていることじゃないでしょうか（やや言い過ぎ）。
その時間が少しでも減れば、開発スピードも上がって、より生産性が高くいい仕事ができればいいんですが。

意外に好評、Altに執着した、Altから始めるVisual Studio Codeのショートカットまとめというのもありますので、合わせてどうぞ。

以上です。