はじめに
前回の記事では、行操作やカーソル移動といった「テキスト編集」にフォーカスしたショートカットをご紹介しました✨
しかし、実際の開発業務において、私たちがコードを「書いている」時間は意外と短く、既存のコードを「読んでいる」「探している」時間の方が圧倒的に長いです。
そこで第2弾となる本記事では、コマンドパレットでの全体操作をはじめ、ファイル・タブの高速移動やコードの解析（リーディング）速度を向上させるショートカット をご紹介します！
マウスでファイルツリーを行ったり来たりする時間を削り、さらなる開発効率爆上げを目指しましょう！🚀
対象読者
- Mac で VS Code を使用しているエンジニア
- 前回紹介したショートカットに慣れてきて、さらにマウスを使う頻度を減らしたい方
- 大規模なプロジェクトで、目的のファイルや関数を見失いがちな方
1. コマンドパレット
コマンドパレットとは、一言で表すと 「VS Codeの様々な機能を検索・実行できる万能な検索窓」 です。
設定の変更、拡張機能の実行、ショートカットが割り当てられていない機能の呼び出しなど、ありとあらゆる操作がここに集約されています。
コマンドパレットの起動
前回紹介したファイル検索（Cmd + P）の親玉とも言える機能です。
-
ショートカット:
Cmd+Shift+P -
操作: 実行したい機能の名前を入力（あいまい検索対応）して
Enterを押します。
よく使うおすすめコマンド
コマンドパレットから呼び出すと特に便利な、実務で多用するコマンドをいくつかピックアップしてみました。該当する英単語を途中まで打てば候補に出てきます！
エディタの瞬時再起動 (Reload Window)
-
入力キーワード:
reload - メリット: 拡張機能の調子が悪い時や、LSP（言語サーバー）がエラーを吐いたまま固まった時に使います。VS Codeアプリ自体を終了することなく、現在のウィンドウだけを1秒で再起動（リロード）できるので、「何か変だなぁ」と思った時によく使います！
設定ファイル（JSON）を直接開く (Open Settings (JSON))
-
入力キーワード:
sett -
メリット: GUIの設定画面ではなく、
settings.jsonを直接編集して詳細な設定を行いたい時に、一発でファイルを開くことができます。
集中空間を作る (Toggle Zen Mode)
-
入力キーワード:
zen -
メリット: サイドバーやターミナル、ステータスバーなどのUI要素をすべて非表示にし、コードだけを全画面で表示します。複雑なロジックを組む時など、100%コードに没頭したい時はおすすめです！
（※元の画面に戻る時はEscキーを2回押すだけでサクッと戻れます✨）
すべてのショートカットを暗記するのは不可能です！
「あれ、画面分割のショートカットなんだっけ？」と思ったら、コマンドパレットを開いて split と打ち込めば、機能の横にショートカットキーも表示してくれます！ショートカットのカンペとしても優秀です！
2. ファイル・タブの高速移動
複数のファイルを行き来しながら実装する際、トラックパッドで上のタブを選択したり、スクロールして該当行を探したりするのは時間がかかります。
ここでは、作業中のファイルや特定の行へ、キーボードだけを使って瞬時に移動する操作を紹介します。
指定行へのジャンプ
ターミナルやブラウザのコンソールで「app.python:142 でエラー」と出たとき、ひたすらスクロールして142行目を探すのは大変です。
-
ショートカット:
Ctrl+G -
操作: 押下後に表示される入力欄に「142」などの行番号を入力して
Enterを押します。 - メリット: 目的の行へピンポイントでワープできるため、エラー修正時の初動が劇的に速くなります！
隣のタブへの移動
現在開いている別のタブ（ファイル）に切り替えます。ブラウザのタブ移動と全く同じ感覚で操作できます。
-
ショートカット:
Cmd+Option+←/→ - メリット: タブをマウスでクリックする視線移動と手の移動を省き、サクサクとファイルを切り替えられます。
最近開いたファイルの切り替え
Macの Cmd + Tab（アプリ切り替え）のVS Codeタブ版です。
-
ショートカット:
Ctrl+Tab（押しっぱなしで選択） - メリット: 直近で作業していた2〜3個のファイルを交互に見比べたい時に便利です。たくさんタブを開いていても、直前に開いていたファイルに一瞬で戻ることができます！
また、Ctrl + Shift + Tab のように、Shift も一緒に押すと逆回りでファイル選択できるようになります！通り過ぎてしまった時などに便利です。
3. コードリーディング効率化
他人が書いたコードや、別ファイルに切り出されたコンポーネントを読む際、ファイルツリーから目視で探すのは非効率です。
定義元へのジャンプ
使用されている関数や変数が、一体どこで定義されているのかを瞬時に突き止めます。
-
ショートカット:
F12
※Touch Bar搭載モデルや設定によってはFn+F12 -
メリット: 該当するファイルが自動で開き、定義されている行へ直接カーソルが移動します。戻りたい時は
Ctrl + -で元の場所へ帰れます。
一応、cmd + カーソルで関数・変数を押下でも定義元へジャンプすることが可能です。
定義をその場で表示（Peek）
今回一番おすすめしたい操作です！
-
ショートカット:
Option+F12 -
メリット: 今開いているファイルを離れずに、その場に小窓（ポップアップ）を開いて定義元のコードを確認・編集できます。
ファイルを行き来すると「あれ、さっきまで何書いてたっけ？」というコンテキストスイッチが起こりやすいですが、これを使えば思考を途切らせずに実装を続けられます！
4. クイックフィックス
エラーの赤波線が出たとき、手動でタイポを直したり、import文を一番上に書きに行ったりしていませんか？
クイックフィックスを用いることで言語サーバー（LSP）の提案をワンアクションで受け入れることができます。
クイックフィックスの表示
-
ショートカット:
Cmd+.（エラー箇所や波線の出ている単語にカーソルを合わせて実行） -
メリット: 不足している
importの自動追加や、ESLintの自動修正などをエディタが提案してくれます。マウスで「電球アイコン（💡）」をクリックする操作の代替です。
不要なimportの削除なども一瞬で終わるのでかなり便利です！
5. コードの折りたたみ
数百行に及ぶ長いファイルや、ネストの深いJSONを扱う際、情報量が多すぎて目当てのコードが見つからない時に使用します！
コードの折りたたみ
関数やクラスのブロック単位で、コードを折りたたんだり展開したりします。
-
折りたたむ:
Option+Cmd+[ -
展開する:
Option+Cmd+] - 活用例: クラス内のメソッドを一旦すべて折りたたみ、全体の構造だけを俯瞰してから、目的のメソッドだけを展開して修正する。
おわりに
第1弾の「テキスト編集」と、今回の 「コマンドパレットでの全体操作」「ファイル・タブ移動」「コード解析」 のショートカットを組み合わせることで、マウスに手を伸ばす回数はそれなりに減るはずです！
Peek機能（Option + F12）やコマンドパレット（Cmd + Shift + P）等、最初は慣れない操作が多いですが、息をするように使えると、どんどん開発効率が上がっていくと思います！まずは「定義元を見に行く時は絶対にF12を使う」など、一つずつ指に覚えさせてみてください！
他にも「こんな操作で効率化しているよ！」というものがあれば、ぜひコメント欄で教えてください！！💻
vscodeの開発効率爆上げ操作術はまだまだあると思うので、今後も発信していきたいと思います！
最後までお読みいただきありがとうございました！✨