「コードのどこかにエラーがあるはずなのに、見つけるのに時間がかかっている」 「マウスでパネルを行ったり来たりして疲れる……」
そんな悩みを持つあなたへ。Visual Studio Code（VS Code）には、問題箇所を最短で見つけ出し、修正までを爆速にするショートカットキーが備わっています。
今回は、日々の開発スピードを一段階引き上げる「デバッグ効率化」のための必須ショートカットを5つ厳選してご紹介します。
1. 「問題パネル」を即座に開く
まずは現状把握です。コードのどこにエラーや警告があるかを一覧表示しましょう。
Windows / Linux:
Ctrl+Shift+MMac:
Cmd+Shift+M
このパネルが開けば、どこで構文エラーが起きているか、どのCSSが読み込めていないかなどが一目瞭然です。
2. エラー箇所へ「F8」でジャンプ
問題パネルを開いた後、わざわざマウスでクリックする必要はありません。
共通:
F8
F8を押すたびに、次のエラー箇所へカーソルが自動移動します。Shift + F8 を押せば前のエラーに戻れるため、エラーが多いファイルでもパズルのように修正していけます。
3. 「クイックフィックス」で自動修正
エラー箇所に波線が出ている場合、VS Codeが修正案を提示してくれることがあります。
Windows / Linux:
Ctrl+.Mac:
Cmd+.
タグの閉じ忘れや、インポート忘れなどは、このショートカットで「修正案を選択」するだけで解決します。自分でタイピングする手間が省ける最強の機能です。
4. コマンドパレットで何でも検索
VS Codeの全機能はここから呼び出せます。設定や拡張機能の呼び出しもキーボードから離れずに完了。
Windows / Linux:
Ctrl+Shift+PMac:
Cmd+Shift+P
「Toggle Problems」と入力するだけで、問題パネルのON/OFFも自由自在です。
5. 定義元へジャンプ
「このクラス名、CSSではどう定義してたっけ？」と迷ったらこれ。
共通:
F12
スタイルの適用がうまくいかないときは、F12でCSSの定義元に飛んで確認しましょう。構造の把握が格段に速くなります。
まとめ：キーボードから手を離さない習慣を
これらのショートカットを使いこなすと、「エラー発生 → 調査 → 修正」というループが数秒短縮されます。1日の中では数分の違いかもしれませんが、積み重なれば大きな時間資産になります。
まずは今日から、F8キーだけでも意識して使ってみてください。開発のストレスが驚くほど軽減されるはずですよ！
コメント