コードナビゲーション

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+Click で定義にジャンプしたり、Ctrl+Alt+Click で定義をサイドで開いたりできます。

型定義へ移動

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

実装へ移動

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

シンボルへ移動

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

名前でシンボルを開く

一部の言語は、⌘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はエディターから外部ウェブサイトリンクを開く前にプロンプトを表示します。

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

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

ピッカーを開かずにエディター内を移動するために使用できるコマンドのリストを以下に示します。