コードナビゲーション

Visual Studio Code は、プログラミング言語サービスと組み合わせることで、IDE の機能性とテキスト エディターのスピードを提供する、生産性の高いコード エディターを備えています。このトピックでは、まず VS Code の言語インテリジェンス機能（提案、パラメーター ヒント、スマート コード ナビゲーション）について説明し、その後にコア テキスト エディターの強力な機能を紹介します。

クイック ファイル ナビゲーション

ヒント: ⌘P (Windows、Linux は Ctrl+P) と入力すると、名前を指定して任意のファイルを開くことができます (クイック オープン)。

エクスプローラーは、プロジェクトを探索しながらファイルを移動するのに最適です。しかし、特定のタスクに取り組んでいるときは、同じ一連のファイル間をすばやく行き来することになります。VS Code は、使いやすいキーボード ショートカットを使用して、ファイル内およびファイル間を移動するための 2 つの強力なコマンドを提供します。

Ctrl を押し続けながら Tab を押すと、エディター グループで開かれているすべてのファイルのリストが表示されます。これらのファイルのいずれかを開くには、再度 Tab を使用して移動先のファイルを選択し、Ctrl を離して開きます。

または、⌃- (Windows は Alt+Left、Linux は Ctrl+Alt+-) と ⌃⇧- (Windows は Alt+Right、Linux は Ctrl+Shift+-) を使用して、ファイル間や編集位置の間を移動することもできます。同じファイル内の異なる行の間を行き来する場合、これらのショートカットを使用すれば、それらの位置の間を簡単に移動できます。

パンくずリスト

エディターのコンテンツの上部には、ブレッドクラムと呼ばれるナビゲーション バーがあります。これは現在の場所を表示し、フォルダー、ファイル、シンボルの間をすばやく移動できるようにします。

ブレッドクラムには常にファイル パスが表示され、言語拡張機能の助けを借りてカーソル位置までのシンボル パスも表示されます。表示されるシンボルは、アウトライン ビューや「シンボルに移動」で表示されるものと同じです。

パス内のブレッドクラムを選択すると、そのレベルの兄弟要素を含むドロップダウンが表示され、他のフォルダーやファイルにすばやく移動できます。

現在のファイル タイプがシンボルの言語サポートに対応している場合、現在のシンボル パスと、同じレベルおよびそれ以下の他のシンボルのドロップダウンが表示されます。

ブレッドクラムは、表示 > ブレッドクラムの表示 の切り替え、または breadcrumbs.enabled VS Code で開く VS Code Insiders で開く 設定でオフにすることができます。

ブレッドクラムのカスタマイズ

ブレッドクラムの外観はカスタマイズできます。非常に長いパスがある場合、またはファイル パスかシンボル パスのいずれか一方のみに関心がある場合は、 breadcrumbs.filePath VS Code で開く VS Code Insiders で開く と breadcrumbs.symbolPath VS Code で開く VS Code Insiders で開く 設定を使用できます。どちらも on、off、last をサポートしており、パスのどの部分を表示するかを定義します。デフォルトでは、ブレッドクラムの左側にファイルとシンボルのアイコンが表示されますが、 breadcrumbs.icons VS Code で開く VS Code Insiders で開く を false に設定することでアイコンを非表示にできます。

ブレッドクラム内のシンボルの順序

ブレッドクラムのドロップダウンでシンボルがどのように並べ替えられるかは、 breadcrumbs.symbolSortOrder VS Code で開く VS Code Insiders で開く 設定で制御できます。

許容される値は次のとおりです

• position - ファイル内での位置 (デフォルト)
• name - アルファベット順
• type - シンボル タイプ順

ブレッドクラム パスのコピー

エディター タブを右クリックして ブレッドクラム パスのコピー を選択すると、ブレッドクラムのフル パスをコピーできます。これにより、ファイル名とシンボル名を含むフル パスがクリップボードにコピーされます。

シンボル パスの区切り文字は、 breadcrumbs.symbolPathSeparator VS Code で開く VS Code Insiders で開く 設定で構成できます。デフォルト値は . です。

ブレッドクラムのキーボード ナビゲーション

ブレッドクラムを操作するには、ブレッドクラムにフォーカス コマンドを使用するか、⇧⌘. (Windows、Linux は Ctrl+Shift+.) を押します。最後の要素が選択され、兄弟ファイルやシンボルに移動できるドロップダウンが開きます。現在の要素の前後の要素に移動するには、キーボード ショートカット ← (Windows、Linux は Left) および → (Windows、Linux は Right) を使用します。ドロップダウンが表示されたら入力を開始します。一致するすべての要素がハイライトされ、クイック ナビゲーション用に最適な一致が選択されます。

ドロップダウンを使用せずにブレッドクラムを操作することもできます。⇧⌘; (Windows、Linux は Ctrl+Shift+;) を押して最後の要素にフォーカスし、← (Windows、Linux は Left) と → (Windows、Linux は Right) を使用して移動し、Space を使用してエディター内の要素を表示します。

定義へ移動

言語がサポートしている場合、F12 を押すことでシンボルの定義に移動できます。

Ctrl を押しながらシンボルの上にホバーすると、宣言のプレビューが表示されます。

ヒント: Ctrl+クリックで定義にジャンプするか、Ctrl+Alt+クリックで定義を横に開くことができます。

型定義に移動

一部の言語では、エディターのコンテキスト メニューまたはコマンド パレットから型定義に移動コマンドを実行して、シンボルの型定義にジャンプすることもサポートしています。これにより、シンボルの型の定義に移動します。コマンド editor.action.goToTypeDefinition にはデフォルトでキーボード ショートカットが割り当てられていませんが、独自のカスタム キーバインドを追加できます。

実装に移動

言語によっては、⌘F12 (Windows、Linux は Ctrl+F12) を押してシンボルの実装にジャンプすることをサポートしている場合もあります。インターフェースの場合、これはそのインターフェースのすべての実装元を表示し、抽象メソッドの場合、そのメソッドのすべての具体的な実装を表示します。

シンボルに移動

⇧⌘O (Windows、Linux は Ctrl+Shift+O) を使用して、ファイル内のシンボルを移動できます。: を入力すると、シンボルがカテゴリごとにグループ化されます。上 または 下 を押して、目的の場所に移動します。

名前でシンボルを開く

一部の言語では、⌘T (Windows、Linux は Ctrl+T) を使用して、ファイル間をまたいでシンボルにジャンプすることをサポートしています。どのファイルに含まれているかに関係なく、移動先の型の最初の文字を入力し、Enter を押します。

ピーク

何かをすばやく確認したいだけなのに、大きなコンテキストの切り替えが発生することほど煩わしいことはありません。そのため、覗き見（ピーク）エディターをサポートしています。参照へ移動の検索（⇧F12 (Windows、Linux は Shift+F12) 経由）、または定義をここに表示（⌥F12 (Windows は Alt+F12、Linux は Ctrl+Shift+F10) 経由）を実行すると、結果がインラインで埋め込まれます。

ピーク エディター内で異なる参照の間を移動し、その場で直接すばやく編集を行うことができます。ピーク エディターのファイル名をクリックするか、結果リストをダブルクリックすると、外側のエディターで参照が開きます。

ヒント: さらに、Escape を押すか、ピーク エディター領域をダブルクリックすると、ピーク ウィンドウが閉じます。この動作は、 editor.stablePeek VS Code で開く VS Code Insiders で開く 設定で無効にすることができます。

括弧の照合

カーソルがいずれかの括弧に近づくと、対応する括弧がハイライトされます。

ヒント: ⇧⌘\ (Windows、Linux は Ctrl+Shift+\) で、対応する括弧にジャンプできます。

括弧ペアの着色

対応する括弧のペアは、 editor.bracketPairColorization.enabled VS Code で開く VS Code Insiders で開く を true に設定することで着色することもできます。

すべての色はテーマで変更可能であり、最大 6 色まで設定できます。

workbench.colorCustomizations VS Code で開く VS Code Insiders で開く を使用して、設定でこれらのテーマ提供の色をオーバーライドできます。

"workbench.colorCustomizations": {
    "editorBracketHighlight.foreground1": "#FFD700",
    "editorBracketHighlight.foreground2": "#DA70D6",
    "editorBracketHighlight.foreground3": "#179fff",
},

参照情報

C# などの一部の言語では、リアルタイムで更新されるインラインの参照情報をサポートしています。これにより、編集が与える影響や、プロジェクト全体における特定のメソッドやプロパティの使用頻度をすばやく分析できます。

ヒント: これらのアノテーションをクリックすることで、参照のピーク アクションを直接呼び出すことができます。

ヒント: CodeLens に表示される参照情報は、 editor.codeLens VS Code で開く VS Code Insiders で開く 設定でオンまたはオフにすることができます。

シンボルの名前変更

一部の言語では、ファイルをまたいだシンボルの名前変更をサポートしています。F2 を押し、新しい名前を入力して Enter を押します。ファイル全体で、そのシンボルのすべての使用箇所が名前変更されます。

エラーと警告

警告やエラーは、構成されたタスク、高度な言語サービス、またはバックグラウンドで常にコードを分析するリンターによって生成されます。バグのないコードを実現するため、警告とエラーは複数の場所に表示されます。

• ステータス バーには、すべてのエラーと警告の件数のサマリーが表示されます。
• サマリーをクリックするか、⇧⌘M (Windows、Linux は Ctrl+Shift+M) を押すと、現在のすべてのエラーがリスト表示された 問題 パネルを表示できます。
• エラーや警告のあるファイルを開くと、テキスト内および概要ルーラー（overview ruler）にインラインでレンダリングされます。

ヒント: 現在のファイル内のエラーや警告を順に移動するには、⌥F8 (Windows、Linux は Alt+F8) または ⇧⌥F8 (Windows、Linux は Shift+Alt+F8) を押します。これにより、問題の詳細と可能なコード アクション（利用可能な場合）を示すインライン領域が表示されます。

コード アクション

警告やエラーは、問題を解決するのに役立つコード アクション（クイック修正とも呼ばれます）を提供することがあります。これらはエディターの左余白に電球アイコンとして表示されます。電球をクリックすると、コード アクションのオプションが表示されるか、アクションが実行されます。

インレイ ヒント

一部の言語では、インレイ ヒントを提供します。これは、インラインでレンダリングされるソースコードに関する追加情報です。これは通常、推論された型を表示するために使用されます。以下の例は、JavaScript 変数と関数の戻り値の型について、推論された型を表示するインレイ ヒントを示しています。

インレイ ヒントは、 editor.inlayHints.enabled VS Code で開く VS Code Insiders で開く 設定で有効化/無効化でき、デフォルトは有効です。実際のインレイ ヒント情報を提供するには、TypeScript や Rust などの拡張機能が必要です。

外部リンク保護

ユーザーを保護するため、VS Code はエディターから外部の Web サイトのリンクを開く前に、確認のプロンプトを表示します。

ブラウザーで外部 Web サイトに進むことも、リンクをコピーするかリクエストをキャンセルするかのオプションを選択することもできます。信頼されたドメインの構成 を選択すると、ドメインを正確に信頼するか、URL のドメインとサブドメインを信頼するか、またはすべてのドメインを信頼して外部リンクの保護を無効にするかをドロップダウンから選択できます。

信頼されたドメインの管理 オプションは、コマンド パレットからいつでも利用でき、信頼されたドメイン の JSON ファイルを開きます。ここで信頼されたドメインを追加、削除、または変更できます。

// You can use the "Manage Trusted Domains" command to open this file.
// Save this file to apply the trusted domains rules.
[
  "*.twitter.com"
]

信頼されたドメイン の JSON ファイルには、サポートされているドメイン形式の例や、デフォルトで信頼されているドメインのリスト（https://*.visualstudio.com や https://*.microsoft.com など）を含むコメントもあります。

次のステップ

エディターの仕組みがわかったところで、他にいくつかのことを試してみましょう...

• 紹介動画 - コード編集 - コード編集機能に関する紹介動画をご覧ください。
• ユーザー インターフェイス - VS Code の基本的な画面構成や操作方法を見逃した場合に備えて。
• キーバインド - キーボード ショートカットをお好みに合わせて変更する方法を学びます。
• デバッグ - ここで VS Code は真価を発揮します。

よくある質問

クイック オープンで、最初のエントリではなく 2 番目のエントリを自動的に選択するにはどうすればよいですか？

コマンド workbench.action.quickOpenPreviousEditor を使用すると、クイック オープンで 2 番目のエントリが自動的に選択されるようになります。これは、別のキーボード ショートカットを呼び出すことなく、リストから前のエントリを選択したい場合に便利です。

[
  {
    "key": "ctrl+p",
    "command": "workbench.action.quickOpenPreviousEditor"
  },
  {
    "key": "ctrl+p",
    "command": "-workbench.action.quickOpen"
  }
]

すべてのグループのすべてのエディターを Ctrl+Tab で移動できるように構成するにはどうすればよいですか？

デフォルトでは、Ctrl+Tab は同じエディター グループ内のエディター間を移動します。すべてのグループのすべての開いているエディターを移動したい場合は、workbench.action.quickOpenPreviousRecentlyUsedEditor および workbench.action.quickOpenLeastRecentlyUsedEditor コマンドのキーボード ショートカットを作成できます。

[
  {
    "key": "ctrl+tab",
    "command": "workbench.action.quickOpenPreviousRecentlyUsedEditor",
    "when": "!inEditorsPicker"
  },
  {
    "key": "ctrl+shift+tab",
    "command": "workbench.action.quickOpenLeastRecentlyUsedEditor",
    "when": "!inEditorsPicker"
  }
]

ピッカーなしで最近使用したエディター間を移動するにはどうすればよいですか？

ピッカーを開かずにエディター内を移動するために使用できるコマンドの一覧は次のとおりです