コードナビゲーション

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

素早いファイルナビゲーション

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

エクスプローラーは、プロジェクトを探索する際にファイル間を移動するのに便利です。しかし、タスクに取り組んでいるときは、同じファイルのセットを素早く行き来することになります。VS Code は、使いやすいキーボードショートカットでファイル内やファイル間を移動するための 2 つの強力なコマンドを提供します。

Ctrl を押しながら Tab を押すと、エディターグループで開いているすべてのファイルのリストが表示されます。これらのファイルの 1 つを開くには、再度 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 はエディターから外部リンクを開く前にプロンプトを表示します。

ブラウザーで外部 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"
  }
]

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

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