VSCodeの便利なショートカットメモ

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

2023/04/22

VSCodeの用語説明

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

※ここで紹介するショートカットキーはMacのキーです。

VSCodeの用語説明

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

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

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

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

基本的なエディタウインドウ間の移動やエディタ内の最低限覚えておきたい操作コマンドです。エディタ内での操作コマンドは他にもいろいろあるので、こんなコマンドないかと気になったらぜひ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でターミナルを利用している人はぜひターミナルの操作もショートカットで操作をできると楽ができます。

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

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