コードナビゲーション

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 設定を使用します。

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

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

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

breadcrumbs.symbolSortOrder 設定を使用して、ブレッドクラムドロップダウンでのシンボルの順序を制御できます。

使用できる値は次のとおりです。

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

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

ブレッドクラムを操作するには、ブレッドクラムにフォーカス コマンドを使用するか、⇧⌘. (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 設定を使用します。

括弧のマッチング

カーソルが一致する括弧のいずれかに近づくと、一致する括弧が強調表示されます。

ヒント: ⇧⌘\ (Windows、Linux Ctrl+Shift+\) を使用すると、一致する括弧にジャンプできます

括弧のペアのカラー化

editor.bracketPairColorization.enabled を true に設定すると、一致する括弧のペアを色分けすることもできます。

すべての色はテーマ化可能で、最大 6 色まで構成できます。

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

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

参照情報

C# などの一部の言語は、ライブで更新されるインライン参照情報をサポートしています。これにより、プロジェクト全体での編集の影響や特定のメソッドまたはプロパティの人気度をすばやく分析できます

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

ヒント: CodeLens に表示される参照情報は、editor.codeLens 設定を使用してオンまたはオフにできます。

シンボルの名前変更

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

エラーと警告

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

• ステータスバーには、すべてのエラーと警告の数の概要が表示されます。
• 概要をクリックするか、⇧⌘M (Windows、Linux Ctrl+Shift+M) を押すと、現在のすべてのエラーの一覧を含む 問題 パネルが表示されます。
• エラーまたは警告のあるファイルを開くと、テキストと概要ルーラーにインラインでレンダリングされます。

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

コードアクション

警告とエラーは、問題を修正するのに役立つコードアクション (クイックフィックスとも呼ばれます) を提供できます。これらは、左マージンの電球としてエディターに表示されます。電球をクリックすると、コードアクションオプションが表示されるか、アクションが実行されます。

インレイヒント

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

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

外部リンク保護

保護のため、VS Code はエディターから送信される Web サイトのリンクを開く前にプロンプトを表示します。

ブラウザーで外部 Web サイトに進むか、リンクをコピーするか、リクエストをキャンセルするオプションがあります。信頼済みドメインの構成 を選択すると、ドロップダウンで正確な URL を信頼するか、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"
  }
]

ピッカーなしで最近使用したエディター間をナビゲートするにはどうすればよいですか?

ピッカーを開かずにエディターをナビゲートするために使用できるコマンドの一覧を次に示します