VSCodeを使いこなすための一歩、コードを書く時に知っていると便利なショートカットのまとめ

Visual Studio Codeでコードを書く時に知っていると便利なショートカットを紹介します。コードを書く時に自分がよく実行する操作のショートカットを覚えておくと、作業効率は格段にアップします。

21 VSCode Shortcuts to Make Coding Faster and More Fun
by jsmanifest

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

VSCodeで利用できるショートカットのいくつかを見逃しているかもしれません。すべての人がすべてのショートカットを調べて、より速くコードを作成し、より多くの人に役立つショートカットを見つける時間があるわけではありません。

この記事では、より高速なプログラマーになるためのお気に入りのショートカットをリストアップしました。これらのショートカットを覚えることで、コーディングが非常に楽しくなると思います。
また、ショートカットをカスタマイズする方法にも言及しています。自分の覚えやすいものに変更することで、ショートカットを調べる必要はなくなります。

1. すべてのファイルからテキストを一度に検索

VSCodeで私が気に入っている機能の1つは、プロジェクト・ディレクトリ内のすべてのファイルから、テキストを一度に検索できることです。しかも、高速です！

Windows:

Ctrl + Shift + F

macOS:

command + shift + F

ショートカットを押すと、サイドバーが広がり、検索パネルが表示されます。

検索ボックスにテキストを入力すると、すぐに一致するテキストがリストされます。

置換するのも、簡単です。
左側の小さな矢印をクリックし、置換するためのテキストボックスが表示されます。

2. タブのアクセントカラーを変える

タブの同じアクセントカラーを見るのにうんざりしていませんか？
VSCodeにMaterial Themeを使用している場合は、タブのアクセントカラーを簡単に変えることができます。

16色から、アクセントカラーを選べる

Windows:

Ctrl + Shift + P

macOS:

command + shift + P

Material Themeのエクステンションがインストールされている場合は、コマンドパレットを開き（Ctrl + Shift + P）、「Material Theme: Set accent color」を選択してリストからカラーを選択すると、タブの下線が変わります。

これは、Material Themeを使用している必要はありません。エクステンションがインストールされていれば、すべてのテーマで利用できます。

3. プロセス エクスプローラー

VSCodeの動作が重いと感じたことはありませんか？ そんな時にはメモリの消費がどのくらいか、VSCode付属のプロセス エクスプローラーで確認できます。
メニューの「ヘルプ」から「プロセス エクスプローラー」を選択。

似たような画面を見たことがあるかもしれません。
おそらく、タスクマネージャー（macOSならアクティビティモニタ）でしょう。

Windows:

Ctrl + Alt + Delete

macOS:

command + shift + U でユーティリティフォルダが表示されるので、「アクティビティモニタ」を選択。

4. 選択範囲を拡張

VSCodeの「管理」から「キーボード ショートカット」を開き、 「選択範囲を拡張」を検索してみてください。私はこの機能の名前を推測できなかったので、発見するのにしばらく時間がかかりました。

この機能を使用すると、括弧の最初から最後までのブロック全体を自動的に選択できます。

Windows:

Shift + Alt + 右矢印

macOS:

control + shift + command + 右矢印

ifとelseのブロックを交換したい状況などで、非常に役に立つと思います。

5. 閉じたエディタを再度開く

ファイルがあちこちに散らばっている巨大なプロジェクトで作業している時、誤ってタブを閉じてしまい、サイドメニューで再度検索しなければならない場合、VSCodeにはディレクトリを自動的に展開するため、イライラするかもしれません。

Windows:

Ctrl + Shift + T

macOS:

command + shift + T

このショートカットは、閉じたエディタを再度開きます。タブ専用の機能で、前に閉じたタブを開き、そしてその前に閉じたタブも、その前の前に閉じたタブも開くこともできます。

6. テキストを一致させてファイルを開く

ファイルの検索と言えば、ファイルをその場で検索して開くことができます。これは、開いていないファイルを再度開くために手動でディレクトリをクリックする必要がないため、私のお気に入りの機能の1つです。これで毎日どれだけの時間が節約できるか信じられないでしょう。

Windows:

Ctrl + T

macOS:

command + T

この機能を使用するには、キーボードショートカットをCtrl + Tにバインドします。このショートカットを押すと、ファイルウィンドウ内のシンボルへ移動ウィンドウが開くことがあります。私はその機能を実際には使用しないので、無効にしています。

この機能をホットキーにバインドしたい場合は、キーボードショートカットを開き、workbench.action.quickOpenを検索してください。ダブルクリックしてCtrl + Tを割り当てます。

7. ターミナル

Ctrl + '（バッククォート）を押すことで、VSCodeのターミナルを開き、通常のCLIのように使用することができます。VSCodeから離れる必要がないのは素晴らしいと思いませんか？

Windows:

Ctrl + '

macOS:

control + '

8. 実行中の機能拡張の表示

コマンドパレットを開いて「Show Running Extensions」と入力すると、実行中のすべての機能拡張を表示できます。

それだけではありません。どの機能拡張がアクティベーションに時間がかかるかを確認するための情報も表示されます。あなたのVSCodeがいつもより遅くロードした理由を疑問に思ったなら、その答えはこのウィンドウの中にあるかもしれません。

9. リロード

個人的には、これはVSCodeの最もクールな機能の1つだと思います。なぜなら、エディタを開いたまま、エディタを閉じて再び開くのと同じ効果が得られるからです。

Windows:

Ctrl + R

macOS:

command + R

10. タブをグループ分け

私はコードを書いている時に、間違ったタブグループにタブを含めてしまうことがあります。キーボードからは手を離したくないので、マウスの操作が必要なく、それを直したいです。

Windows:

Ctrl + Alt + 右 or 左矢印

macOS:

command + control + 右 or 左矢印

VSCodeには、そのショートカットがあります。左右の矢印キーを変えることで、左にも右にもタブを移動できます。

11. 前後のすべてを選択

カーソルの前すべて、あるいは後すべてを削除したいと思ったことはありませんか？ VSCodeにはショートカットが用意されており、素早く選択できます。

Windows:

Ctrl + Shift + Home or End

macOS:

command + shift + 上 or 下矢印

カーソルの右または左のほとんどすべてを選択するには下記のようにします。

12. 直前の単語を削除

一文字単位ではなく、直前の単語を削除するショートカットが用意されています。単語を間違えた場合に、Backspaceを押し続けなければならないことが嫌いな人に非常に役立ちます。

Windows:

Ctrl + Backspace

macOS:

option + Backspace

実はこの機能、VSCode以外のどのソフトウェアでも利用できます。

13. 起動時のパフォーマンス

パフォーマンスの問題の原因を突き止めようとしている時に、パフォーマンスに関する詳細な情報が不足していると、問題が生じることがあります。

VSCodeでは、起動時のパフォーマンスが最優先事項です。コマンドパレットから「Startup Performance」と入力すると、パフォーマンスに関する詳細な情報が表示されます。

14. 単語単位で選択

ショートカットで単語ごとにテキストを選ぶことができます。

Windows:

Ctrl + Shift + 右矢印

macOS:

command + shift + 右矢印

早く単語を選択するのに非常に便利です。

15. 行の複製

VSCodeで選択行を複製するには、Alt+Shift+下・上矢印を使用します。

Windows:

Alt + Shift + 下 or 上矢印

macOS:

option + shift + 下 or 上矢印

Sublime TextのようにCtrl+Shift+Dにショートカットを変更してもよいでしょう。

16. ファイルの一番上・一番下に移動

ファイルの一番上、または一番下の行にカーソルを移動する最も簡単な方法は、ショートカットを使用することです。

Windows:

Ctrl + Home or End

macOS:

command + Home or End

17. ファイル内の一致するすべてのテキストを置換

コーディングを始めた頃は、一致するテキストをマウスで手動選択しなければなりませんでした。VSCodeはすべてのテキストを置換する機能を備えているので、そうした時代が終わったことを嬉しく思います。

Windows:

Ctrl + F2

macOS:

command + F2

選択範囲として任意のテキストグループを選択でき、その選択範囲に複数の出現箇所がある場合は、Ctrl+F2を押すことで、一度にすべてを変更できます。F3だったら、手首に負担がかからないのにと思います。

18. 行を上・下に移動

行を上・下に動かすことは文字通り、10分毎に役立つでしょう。

Windows:

Alt + 上 or 下矢印

macOS:

option + 上 or 下矢印

このショートカットは、行のどの位置にカーソルがあっても機能します。

19. 行の削除

行を削除するには、2つの方法があります。
まずは、行をカット（Ctrl+X）する方法です。ただし、クリップボードにカットした行が上書きされます。

クリップボードに削除する行を保存したくない場合は、下記のショートカットを使用します。

Windows:

Ctrl + Shift + K

macOS:

command + shift + K

これで、行を簡単に削除できます。
個人的には、Crtl+Alt+Dが操作しやすいです。

20. エディタを左・右へ移動

タブが互いに関連していて、左側にあるタブが上位レベルのファイルで、右側にあるファイルが下位レベルのファイルであるようなグループでは、タブの順序を変更したいと思うかもしれません。

このショートカットを使用すると、それが簡単にできます。

Windows:

Ctrl + Shift + PageUP

macOS:

command + K, command + shift + 左矢印

私はこの操作をCtrl+Num Pad 4とCtrl+Num Pad 6に割り当てたので、直感的に分かりやすくなりました。

21. カーソルを上・下に挿入

カーソルの複製は、おそらくVSCodeの中で最も時間を節約する機能の1つです。これは、typescriptのような場合に便利です。

Windows:

Ctrl + Alt + 上 or 下矢印

macOS:

command + option + 上 or 下矢印