VSCodeの開発効率を向上させる便利なショートカット集

VSCodeのショートカットキーを活用することで、プログラミングの作業効率を向上することができます。
この記事では、普段の開発作業で使える有効なショートカットを紹介します。キーバインドを覚えるのは大変ですが、マウスを使わずVSCodeのショートカットを使いこなして開発スピードをさらに加速させましょう！
※ここで紹介するショートカットキーはMacのキーです。

VSCodeの用語説明

VSCodeの主要な各エリアの用語を説明します。

VSCodeの用語説明

左右に「エクスプローラ」があり、ファイルツリーや検索、拡張機能などの表示ができます。
真ん中には「エディタウインドウ」 があり１つだけでなく複数のエディタをグループ分けして表示することができます。
下には「ターミナル」がありコマンドの実行ができます。

これら、VSCodeの各エリアの操作に対して、マウスを使わずにいかに素早く操作をしていくか大切です。

VSCodeのすべてのコマンド・ショートカットの検索

はじめに、迷ったときに覚えておいたほうがよいコマンド検索とショートカット検索です。また、ショートカット画面でうまくショートカットが見つけられない場合はChatGPTに聞くと7-8割ぐらいは正しいコマンドを教えてくれます。

key	説明
cmd + shift + p	コマンド検索パネルを開く。コマンドを忘れたらとりあえずコレ
cmd + ks	: ショートカット画面を開く。ショートカットを忘れたらとりあえずコレ

VSCodeのエディタウインドウの操作

基本的なエディタウインドウ間の移動やエディタ内の最低限覚えておきたい操作コマンドです。エディタ内での操作コマンドは他にもいろいろあるので、こんなコマンドないかと気になったらぜひChatGTPに聞いてみてください。

key	説明
cmd + shift + [/]	エディタウインドウを左右に移動
cmd + 1	エディタウインドウに移動 ※1,2,3などの数字はウインドウグループ番号に移動
control + shift + ←/→	左右に開く(Split Editor Left / Right) ※ユーザー設定
cmd + d	同じ単語を選択
cmd + shift + l	ファイル内のすべての同じ単語を選択
cmd + option + ↑/↓	カーソルを上下に増やす
option + ↑/↓	カーソルのある行か選択した行を上下と入れ替え
option + shift + ↑/↓	カーソルのある行か選択した行を上下にコピー

VSCodeのエクスプローラの操作

エディタとエクスプローラの移動をいききしたり、エクスプローラの開閉ができることでぐっとマウスの操作を減らすことができます。

key	説明
cmd + b	左側のエクスプローラーの開閉
option + cmd + b	右側のエクスプローラーの開閉
cmd + shift + e	ファイルツリーに移動
↑/↓/←/→	ファイルツリー内での移動
cmd + shift + f	エクスプローラの検索を開く
cmd + shift + h	エクスプローラの置換検索を開く
cmd + shift + c	選択しているファイルのパスをコピー

VSCodeのターミナルの操作

VSCodeでターミナルを利用している人はぜひターミナルの操作もショートカットで操作をできると楽ができます。

key	説明
control + `	ターミナルを開く・移動
control + shift + `	ターミナルの開閉
control + shift + ^	新しいターミナルを開く
cmd + shift + [/]	ターミナルグループの左・右へ移動

ChatGPTにVSCodeのショートカットを教えてもらう

VSCodeのショートカットを調べるにあたり、VSCodeのコマンド一覧ではうまく検索できない場合にChatGTPに聞くことで的確な答えをえることができました。たまに、答えのコマンドが間違っていた場合もありましたが...

ChatGTP-4 に VSCodeのショートカットについて教えてもらう