今回は以前のVSCode解説記事の第3弾として、前回の画面説明に続き、基本的な機能の解説をしていきます。
VSCodeには開発を支える様々な便利な機能が備わっています。それらの機能を「ファイル操作」「コード入力補助」「コードナビゲーション」「実行＆デバッグ」の四つに分け、押さえておきたい機能を順に解説していきます。
ファイル操作＆ナビゲーション
クイックオープン
ファイル名を入力するだけで目的のファイルを即表示する検索機能です。Ctrl+P（macOSは⌘+P）で入力ボックスを呼び出し、名前の一部を入力するとリアルタイムに候補が絞り込まれます。複雑なディレクトリを潜る手間がなくなるため、大規模プロジェクトのファイルアクセスが格段に速くなります。
自動保存
編集中の変更を自動的に保存し、書き込み忘れを防ぐ機能です。設定で一定時間経過やウィンドウ非アクティブ時に自動保存が実行され、データ消失のリスクを減らします。手動保存の手間を減らし、作業に集中しやすくなります。
有効化の方法は、設定画面を開いてから「Files:Auto Save」を検索し、同名のチェックボックスをONにします。
コード入力補助機能
IntelliSense（コード補完）
入力中に入力候補をリアルタイムに表示し、Tabキーで補完を完結させる機能です。変数名や関数、モジュールの候補をポップアップ表示し、型の情報やなども同時に提示します。間違いを減らしつつ、ドキュメント参照の往復を省略できるのが大きなメリットです。
有効化の方法は、設定画面を開いてから「Editor: Quick Suggestions」を検索し、各項目の値をONにします。
コード整形
保存時に統一された書式スタイルで自動整形する機能です。インデントや改行、空白などの細かなスタイルを自動で整えます。
有効化の方法は、設定画面を開いてから「Editor: Format On Save」を検索し、同名のチェックボックスをONにします。
コメントアウトトグル
選択範囲をまとめてコメント化・解除し、一時的にコードを無効化できる機能です。 利用するにはコメントアウトを切り替えたい部分を選択し、Ctrl+/（macOSは⌘+/）を入力します。デバッグやテスト時に一部コードを一時的に止めたい場合などもすぐにコメントアウト切替できます。
使用する言語に応じて、行コメントとブロックコメントの形式が自動で切り替わります。
コードアクション（Quick Fix）
エラーや警告箇所で修正候補を即表示して修正を簡略化する機能です。Ctrl+.（macOSは⌘+.）を押すだけで、該当する修正候補を表示し、クリック選択で修正を適用できます。
手動入力を大幅に削減します。
シンボルのリネーム
変数や関数名をプロジェクト全体で一括変更できるリファクタリング機能です。F2で新しい名前を入力すると、呼び出し箇所をプレビューしながら安全に名前を更新します。
文字列リテラル内やコメント内の名称もオプションでリネーム対象に含めることができます。
Emmet省略記法（HTML/CSS入力補助機能）
省略記法によってタグ入力を高速化する機能です。エイリアスを入力し、Tabで押下すると瞬時に該当のタグに展開します。マークアップ作業を劇的に速めます。
複数カーソル編集
同時に複数箇所を選択し、まとめて編集できる機能です。Alt（macOSはOption）+クリックやCtrl+Alt+↑↓でカーソルを増設し、一度の入力で複数行に反映できます。
矩形選択モード（Ctrl+Alt+Shift＋ドラッグ）で列範囲の編集も行えます。
コードナビゲーション
シンボルナビゲーション＆行ジャンプ
関数・クラスの一覧表示や行番号指定で、目的の位置に即移動できる機能です。Ctrl+Shift+Oでシンボル一覧を開き、Ctrl+Gで行番号入力による移動が可能です。
`@`プレフィックスでシンボル一覧をフィルタリングできます。
定義の参照＆定義へ移動
関数の呼出し先や変数の値を変更しているコードから、その関数定義や宣言を参照したり、そこに移動したりする機能でｓ。 Ctrl+マウスオーバーで定義を表示し、クリックで定義元にジャンプできます。コードの実行＆デバッグ
デバッグ実行の始め方
VSCodeでデバッグを行うには、サイドバーの実行とデバッグビューから行います。まずは左端のアクティビティバーから実行とデバッグのアイコンをクリックし、画面を開きましょう。「実行とデバッグ」ボタンを押下するとセッションが開始されます。
デバッグの各種機能（デバッグツールバー・ブレークポイント・デバッグコンソール）
デバッグ実行中はブレークポイントを設定して実行を中断したり、１行ずつ実行を進めるステップ実行などを行うことができます。ブレークポイントの設定には、コードの処理を止めたい部分に移動してF9を押すか、その行の左端をクリックします。
ステップ実行にはF10～F11のいずれかのキーを押下すると、1行ごとに進みます。
ちなみにF10がステップオーバー(子関数の中は飛ばす)、F11がステップイン((子関数の中もステップ実行)、F12がステップアウト(今の関数を飛ばして呼び元の関数に戻る)と、挙動が少しずつ変わります。
これらの機能を利用し、中断してサイドバーのウオッチビューOKで変数の値が正しいか確認したり、どこで問題が起きているか1行ずつ追ったりして、問題点をつきとめていきます。
まとめ
今回はVSCodeのコード作成に関わる便利な機能の紹介と、デバッグのやり方までをご説明しました。細かい機能の説明も多くなりましたが、いきなりすべてを覚える必要はありません。
まずは自分のプログラミングを行う中で、使ってみたい機能を実際に試してみてください。
継続的な活用を通じて、より高度な活用方法も自然と身につくでしょう。
