ユーザーインターフェイス

Visual Studio Codeの中核はコードエディターです。他の多くのコードエディターと同様に、VS Codeは一般的なユーザーインターフェイスとレイアウトを採用しています。左側にはエクスプローラーがあり、アクセス可能なすべてのファイルとフォルダーが表示されます。右側にはエディターがあり、開いているファイルの内容が表示されます。

基本レイアウト

VS Codeには、エディターに提供されるスペースを最大化しつつ、フォルダーやプロジェクトの全体的なコンテキストを閲覧・アクセスするための十分なスペースを残す、シンプルで直感的なレイアウトが付属しています。ユーザーインターフェイスは、主に6つのエリアに分かれています。

• エディター - ファイルを編集するためのメインエリアです。好きなだけエディターを縦横に並べて開くことができます。
• プライマリーサイドバー - プロジェクトでの作業を補助するための、エクスプローラーなどのさまざまなビューが含まれています。
• セカンダリーサイドバー - プライマリーサイドバーの反対側にあります。デフォルトでは、チャットビューが含まれています。プライマリーサイドバーからセカンダリーサイドバーにビューをドラッグアンドドロップすると移動できます。
• ステータスバー - 開いているプロジェクトや編集中のファイルに関する情報が表示されます。
• アクティビティバー - 左端に配置されています。ビューを切り替えることができ、Gitが有効な場合には送信する変更の数など、コンテキストに応じた追加のインジケーターが表示されます。アクティビティバーの位置は変更できます。
• パネル - エディター領域の下にあるビューのための追加スペースです。デフォルトでは、出力、デバッグ情報、エラーと警告、および統合ターミナルが含まれています。パネルは、より多くの垂直スペースを確保するために左または右に移動することもできます。

VS Codeを起動するたびに、最後に閉じたときと同じ状態で開きます。フォルダー、レイアウト、開いていたファイルは保持されます。

各エディターで開かれているファイルは、エディター領域の上部にタブ付きヘッダー(タブ)で表示されます。タブ付きヘッダーについての詳細は、タブのセクションを参照してください。

プライマリおよびセカンダリサイドバーの使用方法について詳しく学びましょう。

並べて編集

好きなだけエディターを縦横に並べて開くことができます。すでにエディターが開いている場合、隣にもう一つのエディターを開く方法はいくつかあります。

• Altキーを押しながらエクスプローラービューでファイルを選択します。
• ⌘\ (Windows, Linux Ctrl+\)でアクティブなエディターを2つに分割します。
• エクスプローラーのコンテキストメニューからファイルの[横に開く] (⌃Enter (Windows, Linux Ctrl+Enter))を選択します。
• エディターの右上にある[エディターの分割]ボタンを選択します。
• エディター領域の任意の側にファイルをドラッグアンドドロップします。ドラッグ中にCtrlキー(macOSではOptionキー)を押したままにすると、タブを移動する代わりにコピーします。
• クイックオープン(⌘P (Windows, Linux Ctrl+P))のファイルリストで⌃Enter (Windows, Linux Ctrl+Enter)を押します。

別のファイルを開くと、アクティブなエディターがそのファイルの内容を表示します。2つのエディターを並べて表示していて、ファイル 'foo.cs' を右側のエディターで開きたい場合は、ファイル 'foo.cs' を開く前に、そのエディターがアクティブであることを確認してください(内部をクリックして)。

デフォルトでは、エディターはアクティブなエディターの右側に開きます。この動作は、workbench.editor.openSideBySideDirection設定で、新しいエディターをアクティブなエディターの下に開くように変更できます。

複数のエディターが開いている場合、Ctrlキー(macOSではCmd)を押しながら1、2、または3を押すことで、素早く切り替えることができます。

エディターグループ

エディターを分割する(エディターの分割または横に開くコマンドを使用する)と、アイテムのグループを保持できる新しいエディター領域(エディターグループ)が作成されます。好きなだけエディターグループを縦横に並べて開くことができます。

これらは、エクスプローラービューの上部にある[開いているエディター]セクションで明確に確認できます (エクスプローラービューで[...] > [開いているエディター]を切り替えます)。

エディターグループをワークベンチ上でドラッグ＆ドロップしたり、個々のタブをグループ間で移動したり、グループ全体を素早く閉じる(すべて閉じる)ことができます。

グループ内で分割

表示: グループ内でエディターを分割コマンド (⌘K ⇧⌘\ (Windows, Linux Ctrl+K Ctrl+Shift+\)) を使用すると、新しいエディターグループを作成せずに現在のエディターを分割できます。このエディターモードと、2つのサイド間を移動するための特定のコマンドについて詳しく知るには、カスタムレイアウトの記事のセクションを読むことができます。

フローティングウィンドウ

エディター、ターミナル、または特定のビューを独自のフローティングウィンドウに移動できます。これは、マルチモニター設定があり、別のモニターでファイルを開いたままにしておきたい場合に便利です。

現在のVS Codeウィンドウからエディタータブをドラッグアウトして、フローティングウィンドウで開きます。または、エディタータブのコンテキストメニューから[新しいウィンドウに移動]または[新しいウィンドウにコピー]オプションを使用します。

フローティングウィンドウを画面の一番上にピン留めするには、タイトルバーから[常に最前面に設定]オプション(ピンアイコン)を選択します。

フローティングウィンドウについてさらに学ぶには、カスタムレイアウトの記事のセクションを読んでください。

ミニマップ

ミニマップ(コードのアウトライン)は、ソースコードの全体像を把握するのに役立ち、素早いナビゲーションやコードの理解に便利です。ファイルのミニマップはエディターの右側に表示されます。網掛け部分を選択またはドラッグすることで、ファイル内の異なるセクションに素早くジャンプできます。

エディターに //#region や MARK: のような折りたたみマーカーがある場合、ミニマップには折りたたみマーカーの名前が表示されます。

スティッキースクロール

スティッキースクロールは、現在表示されているネストされたスコープの開始行をエディターの上部に表示します。ファイル内のどこにいるかを示し、現在のスコープの先頭に素早くジャンプできるようにすることで、ナビゲーションを容易にします。

スティッキースクロールは、見出しを作成するためにいくつかの異なるコンテンツモデルを使用します。アウトラインプロバイダーモデル、折りたたみプロバイダーモデル、インデントモデルの中から選択して、スティッキースクロール領域に表示する行を決定することが可能です。現在の言語でモデルが利用できない場合、VS Codeは上記の順序で次のモデルにフォールバックします。最初に使われるデフォルトモデルは、editor.stickyScroll.defaultModel設定から来ています。

インデントガイド

エディターはインデントガイド(垂直線)を表示し、一致するインデントレベルを素早く確認するのに役立ちます。インデントガイドを無効にしたい場合は、ユーザーまたはワークスペースの設定でeditor.guides.indentationをfalseに設定できます。

ブレッドクラム

エディターの上部には、パンくずリストとも呼ばれるナビゲーションバーがあります。パンくずリストは常にファイルパスを表示し、現在のファイルタイプがシンボルの言語サポートを持っている場合は、カーソル位置までのシンボルパスも表示します。パンくずリストを使用すると、フォルダー、ファイル、シンボル間を素早く移動できます。

パンくずリストは、[表示] > [外観] > [パンくずリストの切り替え] メニュー項目または [表示: パンくずリストの切り替え] コマンドで無効にできます。パンくずリスト機能の外観のカスタマイズ方法など、詳細については、コードナビゲーションの記事のパンくずリストのセクションを参照してください。

エクスプローラービュー

エクスプローラービューは、プロジェクト内のファイルやフォルダーを閲覧、オープン、管理するために使用されます。VS Codeはファイルとフォルダーベースであり、VS Codeでファイルやフォルダーを開くことで、すぐに作業を開始できます。

VS Codeでフォルダーを開くと、そのフォルダーの内容がエクスプローラービューに表示されます。ここから多くの操作ができます。

• ファイルとフォルダーの作成、削除、名前の変更。
• ドラッグアンドドロップでファイルやフォルダーを移動する。
• コンテキストメニューを使用してすべてのオプションを探索します。

VS Codeは、あなたが使用する可能性のある他のツール、特にコマンドラインツールとうまく連携します。現在VS Codeで開いているフォルダーのコンテキストでコマンドラインツールを実行したい場合は、フォルダーを右クリックして[統合ターミナルで開く]を選択します。

また、ファイルやフォルダーを右クリックし、Windowsでは[エクスプローラーで表示]、macOSでは[Finderで表示]、Linuxでは[格納フォルダーを開く]を選択することで、ネイティブのオペレーティングシステムのファイルエクスプローラーでそのファイルやフォルダーの場所に移動することもできます。

デフォルトでは、VS Codeは .git など、いくつかのフォルダーをエクスプローラービューに表示しないように除外します。files.exclude設定を使用して、エクスプローラービューからファイルやフォルダーを非表示にするルールを設定します。

複数選択

エクスプローラービューと開いているエディターセクションで複数のファイルを選択して、複数の項目に対してアクション(削除、ドラッグアンドドロップ、横に開く)を実行できます。Ctrlキー(macOSではCmd)を押しながら個々のファイルを選択するか、Shiftキーを押しながらファイルの範囲を選択します。2つの項目を選択した場合、コンテキストメニューの[選択を比較]コマンドを使用して2つのファイルを素早く比較することもできます。

"workbench.list.multiSelectModifier": "alt"

高度なツリーナビゲーション

エクスプローラービューでファイルとフォルダーをフィルタリングできます。エクスプローラービューにフォーカスがある状態で、⌥⌘F (Windows, Linux Ctrl+Alt+F)を押して検索コントロールを開き、一致させたいファイル名またはフォルダー名の一部を入力します。このナビゲーション機能は、VS Codeのすべてのツリービューで利用できます。

フィルターボタンを押すと、ハイライトとフィルタリングの2つのモードが切り替わります。下矢印を押すと、最初に一致した要素にフォーカスを合わせ、後続の一致する要素に移動できます。ハイライトモードでは、一致するファイルが含まれていることを示すバッジがフォルダーに表示されます。

あいまい一致ボタンを押すと、完全一致とあいまい一致が切り替わります。あいまい一致では、ファイル名やフォルダ名の任意の部分に一致する一連の文字を入力できます。

アウトラインビュー

アウトラインビューは、エクスプローラービューの下部にある別のセクションです。展開すると、現在アクティブなエディターのシンボルツリーが表示されます。

アウトラインビューには、さまざまな並べ替えモード、オプションのカーソル追跡があり、通常のオープンジェスチャーをサポートしています。また、検索またはフィルタリングするための入力ボックスも含まれています。エラーと警告もアウトラインビューに表示され、問題の場所が一目でわかります。

シンボルについては、このビューはインストールされている拡張機能がさまざまなファイルタイプに対して計算した情報に依存します。たとえば、組み込みのMarkdownサポートは、Markdownファイルのシンボルに対してMarkdownヘッダーの階層を返します。

アウトラインビューにはいくつかの設定があります。outline.で始まる設定を検索して、アウトラインビューに表示される情報を設定してください。

タイムラインビュー

ファイルエクスプローラーの下部からアクセスできるタイムラインビューは、ファイルのイベント履歴を視覚化するための統合ビューです。例えば、Gitのコミットやローカルファイルの保存をタイムラインビューで確認できます。

タイムラインビューのツールバーにあるフィルターアクションにより、ソース管理イベントとローカルファイルイベントの間でフィルタリングできます。

ローカルファイル履歴

設定によっては、エディターを保存するたびに、新しいエントリがリストに追加されます。各ローカル履歴エントリには、エントリが作成された時点でのファイルの全内容が含まれており、場合によっては、より意味的な情報（例えば、リファクタリングを示唆するなど）を提供することができます。

エントリからできること:

• 変更をローカルファイルまたは以前のエントリと比較する。
• 内容を復元する。
• エントリを削除または名前変更する。

ローカル履歴を扱うために、以下の設定を構成できます:

• workbench.localHistory.enabled - ローカル履歴を有効または無効にする (デフォルト: true)
• workbench.localHistory.maxFileSize - ローカル履歴エントリを作成する際のファイルサイズ制限 (デフォルト: 256 KB)
• workbench.localHistory.maxFileEntries - ファイルごとのローカル履歴エントリの上限 (デフォルト: 50)
• workbench.localHistory.exclude - 特定のファイルをローカル履歴から除外するためのglobパターン
• workbench.localHistory.mergeWindow - ローカルファイル履歴の最後のエントリにさらなる変更が追加される間隔(秒) (デフォルト 10秒)

コミット履歴

VS Codeに組み込まれているGitサポートは、指定されたファイルのGitコミット履歴を提供します。コミットを選択すると、そのコミットによって導入された変更の差分ビューが開きます。コミットを右クリックすると、[コミットIDをコピー]と[コミットメッセージをコピー]のオプションが表示されます。

履歴内のコミットを右クリックすると、次のことができます:

• 変更を開く - ファイル内の変更の差分ビューを開きます。
• コミットを表示 - 複数ファイルの差分ビューを開き、コミット内のすべてのファイルの変更を表示します。
• 比較対象として選択 - 別のエントリと比較するためにエントリを選択します。
• コミットIDをコピー - コミットIDをクリップボードにコピーします。
• コミットメッセージをコピー - コミットメッセージをクリップボードにコピーします。

Git履歴を扱うには、この設定を構成できます:

• git.timeline.date - ファイルコミットのコミット日または作成日を表示する

ビュー

エクスプローラービューは、VS Codeで利用可能なビューの1つに過ぎません。他にも以下のビューがあります:

• 検索 - 開いているフォルダー全体でグローバルな検索と置換を提供します。
• ソース管理 - VS CodeにはデフォルトでGitソース管理が含まれています。
• 実行 - VS Codeの実行とデバッグビューには、変数、コールスタック、ブレークポイントが表示されます。
• 拡張機能 - VS Code内で拡張機能をインストールおよび管理します。
• カスタムビュー - 拡張機能によって提供されるビュー。

アクティビティバーを右クリックしてビューを表示または非表示にしたり、ドラッグアンドドロップで並べ替えたりできます。エクスプローラービュー内では、「...」メニューを使用してセクションを表示または非表示にしたり、ドラッグアンドドロップでセクションを並べ替えたりできます。

コマンドパレット

VS Codeはキーボードからも同様にアクセス可能です。知っておくべき最も重要なキーの組み合わせは⇧⌘P (Windows, Linux Ctrl+Shift+P)で、これはコマンドパレットを表示します。ここから、最も一般的な操作のキーボードショートカットを含む、VS Code内のすべての機能にアクセスできます。

コマンドパレットは多くのコマンドへのアクセスを提供します。エディターコマンドの実行、ファイルのオープン、シンボルの検索、ファイルの簡単なアウトラインの表示など、すべて同じ対話型ウィンドウを使用して行えます。以下にいくつかのヒントを示します。

• ⌘P (Windows, Linux Ctrl+P) を使用すると、ファイル名を入力して任意のファイルやシンボルに移動できます。
• ⌃Tab (Windows, Linux Ctrl+Tab)で最後に開いたファイル群を順に切り替えます。
• ⇧⌘P (Windows, Linux Ctrl+Shift+P)を押すと、直接エディターコマンドにアクセスできます。
• ⇧⌘O (Windows, Linux Ctrl+Shift+O)を使用すると、ファイル内の特定のシンボルに移動できます。
• ⌃G (Windows, Linux Ctrl+G) を使用すると、ファイル内の特定の行に移動できます。

入力フィールドに ? と入力すると、コマンドパレットから実行できる利用可能なコマンドのリストが表示されます。

エディターの設定

VS Codeにはエディターを構成するための多くのオプションがあります。[表示] > [外観]メニューから、サイドバー、ステータスバー、アクティビティバーなど、ユーザーインターフェイスのさまざまな部分を非表示にしたり、表示を切り替えたりできます。

メニューバーを隠す (Windows, Linux)

WindowsとLinuxでは、window.menuBarVisibility設定をclassicからtoggleまたはhiddenに変更することでメニューバーを非表示にできます。toggleに設定すると、Altキーを1回押すだけでメニューバーが再び表示されます。

WindowsとLinuxでは、[表示: メニューバーの切り替え]コマンドでメニューバーを非表示にすることもできます。このコマンドはwindow.menuBarVisibilityをclassicからcompactに設定し、メニューバーがアクティビティバーに移動します。メニューバーをclassicの位置に戻すには、再度[表示: メニューバーの切り替え]コマンドを実行します。

設定

ほとんどのエディター設定は、直接変更できる設定で管理されます。オプションは、ユーザー設定を通じてグローバルに設定することも、ワークスペース設定を通じてプロジェクト/フォルダーごとに設定することもできます。設定値はsettings.json ファイルに保存されます。

設定エディターで設定を表示および編集できます ([ファイル] > [ユーザー設定] > [設定] を選択するか、⌘, (Windows, Linux Ctrl+,) を押します)。[ユーザー] と [ワークスペース] タブを使用して、ユーザー設定とワークスペース設定を切り替えます。上部の検索ボックスを使用して設定をフィルタリングできます。

あるいは、settings.json ファイルで直接ユーザー設定を変更することもできます。[Preferences: Open User Settings (JSON)] コマンドを使用して settings.json ファイルを開きます。ワークスペース設定の場合は、ワークスペースの .vscode フォルダーにある settings.json ファイルを開きます。

禅モード

禅モードでは、エディター以外のすべてのUI要素を非表示にし、VS Codeを全画面表示に切り替え、エディターを中央に配置することで、コードに集中できます。禅モードは、[表示] > [外観] > [禅モード]メニュー、コマンドパレットの[表示: 禅モードの切り替え]、またはショートカット⌘K Z (Windows, Linux Ctrl+K Z)で切り替えることができます。Escを2回押すと禅モードを終了します。全画面への移行はzenMode.fullScreenで無効にできます。

禅モードは以下の設定でさらに調整できます。

• zenMode.hideActivityBar - アクティビティバーを非表示にします。デフォルトはtrueです。
• zenMode.hideStatusBar - ステータスバーを隠す。デフォルトは true です。
• zenMode.hideLineNumbers - 行番号を隠す。デフォルトは `true` です。
• zenMode.showTabs - 複数、単一、またはエディタータブなしで表示するかを制御します。デフォルトは multiple です。
• zenMode.fullScreen - ワークベンチをフルスクリーン表示にします。デフォルトは `true` です。
• zenMode.restore - 再起動時に禅モードを復元します。デフォルトは`true`です。
• zenMode.centerLayout - 中央揃えエディターレイアウトを使用します。デフォルトは true です。
• zenMode.silentNotifications - 通知を表示しません。デフォルトは`true`です。

おやすみモードで通知を減らす

ポップアップする通知に圧倒されている場合、すべての通知、または特定の拡張機能からの通知を減らす方法があります。

ステータスバーのベルアイコンを選択して、通知エリアを開きます。ここは、おやすみモードを有効にしている場合でも、いつでもすべての通知にアクセスできる場所です。

打ち消し線が入ったベルのアイコンを見つけてメニューにアクセスし、拡張機能からの通知を選択的に無効にしたり、グローバルなおやすみモードを有効にしてすべての通知を無効にしたりできます。

中央揃えエディターレイアウト

中央揃えエディターレイアウトを使用すると、エディター領域を中央揃えにできます。これは、大きなモニターで単一のエディターを使用する場合に便利です。サイドボーダーを使用してビューのサイズを変更できます(Altキーを押しながら各サイドを独立して移動します)。

タブ

VS Codeでは、開いているアイテムがエディター上のタイトル領域にタブ(タブ付き見出し)で表示されます。ファイルを開くと、そのファイル用の新しいタブが追加されます。タブを使用すると、アイテム間を素早く移動できます。

タブをドラッグアンドドロップして順序を変更できます。一度に複数のタブにアクションを実行するには、Ctrlキー(macOSではCmdキー)を押しながら、操作したいタブを選択します。タブの範囲を選択するには、Shiftキーを押しながら、範囲の最初のタブと最後のタブを選択します。

タイトル領域に収まらないほど多くのアイテムが開かれている場合、エクスプローラービューの開いているエディターセクション (... ボタンから利用可能) を使用して、タブ付きアイテムのドロップダウンリストを表示できます。

タブとエディター領域の間には、エディターをビューにドラッグするためのスクロールバーもあります。Workbench > Editor: Title Scrollbar Sizing (workbench.editor.titleScrollbarSizing) を large に設定することで、スクロールバーの高さを増やしてドラッグしやすくすることができます。

タブを使用したくない場合は、workbench.editor.showTabs設定をsingleに設定することでこの機能を無効にできます。

    "workbench.editor.showTabs": "single"

タブなしでの作業のためにVS Codeを最適化する方法については、以下のセクションを参照してください。

タブの順序

デフォルトでは、新しいタブは既存のタブの右側に追加されます。workbench.editor.openPositioning設定で、新しいタブがどこに表示されるかを制御できます。

たとえば、新しいタブ付きアイテムを左側に表示させたいかもしれません。

    "workbench.editor.openPositioning": "left"

タブをドラッグアンドドロップして並べ替えることができます。

エディタータブを常に表示させたい場合は、エディタータブバーにピン留めできます。タブのピン留めについて詳しくは、カスタムレイアウトの記事を参照してください。

プレビューモード

エクスプローラービューでファイルをシングルクリックまたは選択すると、プレビューモードで表示され、既存のタブ(プレビュータブ)を再利用します。これは、ファイルを素早く閲覧していて、訪れたすべてのファイルに独自のタブを持たせたくない場合に便利です。ファイルの編集を開始するか、エクスプローラーからファイルをダブルクリックして開くと、そのファイル専用の新しいタブが作成されます。

プレビューモードは、タブの見出しがイタリック体で示されます。

プレビューモードを使用せず、常に新しいタブを作成したい場合は、以下の設定で動作を制御できます。

• workbench.editor.enablePreview - プレビューエディターをグローバルに有効または無効にする
• workbench.editor.enablePreviewFromQuickOpen - クイックオープンから開かれたときにプレビューエディターを有効または無効にする

折り返しタブ

より多くのエディタータブを表示するには、折り返しタブレイアウトを使用できます。このレイアウトでは、エディタータブがエディター領域の上の複数行に折り返して表示されます。Workbench > Editor: Wrap Tabs (workbench.editor.wrapTabs) 設定で折り返しタブを有効にします。

タブのラベルをカスタマイズする

同じ名前の複数のファイルを同時に開いていると、異なるタブを区別するのが難しいことがあります。これを解決するために、タブにカスタム表示ラベルを適用できます。ワークスペース内のどのファイルにカスタムラベルを適用するかを選択できます。

タブのカスタム表示ラベルを有効にするには、workbench.editor.customLabels.enabled設定を行います。

    "workbench.editor.customLabels.enabled": true

タブ表示ラベルの名前付けパターンを、workbench.editor.customLabels.patterns設定で1つ以上指定できます。名前付けパターンは2つのコンポーネントで構成されます。

• アイテム - カスタムラベルを適用するファイルパスに一致するグロブパターンです。例: **/static/**/*.html。
• 値 - カスタムラベルのテンプレートです。テンプレートでは ${filename}、${extname}、${extname(N)}、${dirname}、${dirname(N)} といった変数を使用でき、これらはファイルのパスからの値に動的に置き換えられます。

以下のサンプルは、/src/orders/index.html ファイルをタブ ラベル orders/index で表示します。

    "workbench.editor.customLabels.patterns": {
        "**/src/**/index.html": "${dirname}/${filename}"
    }

以下の例では、ファイル tests/editor.test.ts に対して ${extname} 変数を使用しています。

• ${filename} => editor
• ${extname} => test.ts
• ${extname(0)} => ts
• ${extname(1)} => test
• ${extname(-1)} => test
• ${extname(-2)} => ts

グリッドエディターレイアウト

デフォルトでは、エディターグループは垂直の列にレイアウトされます。たとえば、エディターを分割すると、エディターは横に開かれます。エディターグループは、縦横どちらでも好きなレイアウトに配置できます。

柔軟なレイアウトをサポートするために、空のエディターグループを作成できます。デフォルトでは、エディターグループの最後のエディターを閉じるとグループ自体も閉じられますが、この動作は新しい設定 workbench.editor.closeEmptyGroups: false で変更できます。

[表示] > [エディターのレイアウト] メニューには、あらかじめ定義されたエディターのレイアウトセットがあります。

デフォルトでは、横に開くエディター（例：エディターツールバーのエディターの分割アクションを選択した場合）は、アクティブなエディターの右側に開きます。アクティブなエディターの下にエディターを開きたい場合は、workbench.editor.openSideBySideDirectionをdownに設定してください。

キーボードを使用してエディターのレイアウトを調整するための多くのキーボードコマンドがあります。マウスを使用したい場合は、ドラッグアンドドロップを使用してエディターを任意の方向に分割できます。

キーボードショートカット

エディターとエディターグループ間を素早く移動するための便利なキーボードショートカットをいくつか紹介します。

• ⌥⌘→ (Windows, Linux Ctrl+PageDown) - 右のエディターに移動します。
• ⌥⌘← (Windows, Linux Ctrl+PageUp) - 左のエディターに移動します。
• ⌃Tab (Windows, Linux Ctrl+Tab) - エディターグループの最近使用したリストで前のエディターを開きます。
• ⌘1 (Windows, Linux Ctrl+1) - 左端のエディターグループに移動します。
• ⌘2 (Windows, Linux Ctrl+2) - 中央のエディターグループに移動します。
• ⌘3 (Windows, Linux Ctrl+3) - 右端のエディターグループに移動します。
• ⌘W (Windows Ctrl+F4, Linux Ctrl+W) - アクティブなエディターを閉じます。
• ⌘K W (Windows, Linux Ctrl+K W) - エディターグループ内のすべてのエディターを閉じます。
• ⌘K ⌘W (Windows, Linux Ctrl+K Ctrl+W) - すべてのエディターを閉じます。

デフォルトのキーボードショートカットを変更したい場合は、キーバインディングで詳細を確認してください。

タブなしでの作業

タブ(タブ付き見出し)を使用したくない場合は、workbench.editor.showTabsをsingleまたはnoneに設定することで、タブを完全に無効にできます。

プレビューモードを無効にする

タブがない場合、エクスプローラービューの開いているエディターセクションは、ファイルを素早くナビゲートするための便利な方法です。しかし、プレビューエディターモードが有効になっていると、ファイルは開いているエディターセクションに追加されません。この機能はworkbench.editor.enablePreviewとworkbench.editor.enablePreviewFromQuickOpenの設定で無効にできます。

キーボードショートカットを使用してエディター履歴をナビゲートする

Ctrl+Tabの動作を変更して、アクティブなエディターグループに関係なく、履歴から開かれたすべてのエディターのリストを表示させることができます。

あなたのキーボードショートカットを編集し、以下を追加してください。

{ "key": "ctrl+tab", "command": "workbench.action.openPreviousEditorFromHistory" },
{ "key": "ctrl+tab", "command": "workbench.action.quickOpenNavigateNext", "when": "inQuickOpen" },

単一のエディターではなく、グループ全体を閉じる

1つのエディターを閉じる際に、VS Codeがグループ全体を閉じる動作が気に入っている場合は、キーバインディングに以下をバインドできます。

macOS

{ "key": "cmd+w", "command": "workbench.action.closeEditorsInGroup" }

Windows/Linux

{ "key": "ctrl+w", "command": "workbench.action.closeEditorsInGroup" }

ウィンドウ管理

VS Codeには、セッション間でVS Codeウィンドウ（インスタンス）をどのように開くか、または復元するかを制御するためのさまざまなオプションがあります。

設定window.openFoldersInNewWindowとwindow.openFilesInNewWindowは、ファイルやフォルダを新しいウィンドウで開くか、最後にアクティブだったウィンドウを再利用するかを設定するために提供されており、可能な値はdefault、on、offです。

defaultに設定されている場合、VS Codeはオープンリクエストがどこから行われたかのコンテキストに基づいて、新しいウィンドウを再利用するか開くかを決定します。これをonまたはoffに切り替えると、常に同じように動作します。たとえば、ファイルメニューからファイルやフォルダを選択すると常に新しいウィンドウで開かれるべきだと感じる場合は、これをonに設定します。

window.restoreWindows設定は、前のセッションで開いていたウィンドウをどのように復元するかをVS Codeに指示します。デフォルトでは、VS Codeは前のセッションで作業していたすべてのウィンドウを復元します（設定：all）。この設定をnoneに変更すると、ウィンドウを一切再開せず、常に空のVS Codeインスタンスで開始します。oneに変更すると、最後に作業していたウィンドウを再開し、foldersに変更すると、フォルダが開かれていたウィンドウのみを復元します。

次のステップ

VS Codeの全体的なレイアウトを理解したので、次の記事を参照して、自分の作業スタイルに合わせてエディターをカスタマイズしてみましょう。

• テーマの変更 - 好みに合わせてカラーテーマやファイルアイコンテーマを設定します。
• カスタムレイアウトの使用 - VS Codeのワークベンチとエディターレイアウトのカスタマイズについて詳しく学びます。

よくある質問

インデントガイドの色はどうすれば変更できますか？

インデントガイドの色は、VS Codeのほとんどのユーザーインターフェース要素と同様にカスタマイズ可能です。アクティブなカラーテーマのインデントガイドの色をカスタマイズするには、workbench.colorCustomizations設定を使用し、editorIndentGuide.backgroundの値を変更します。

たとえば、インデントガイドを明るい青にするには、settings.jsonに以下を追加します。

"workbench.colorCustomizations": {
    "editorIndentGuide.background": "#0000ff"
}

エクスプローラービューの「開かれているエディター」セクションを非表示にできますか？

はい、エクスプローラーのビューメニューを使用して、開いているエディターメニュー項目を切り替えることで、開いているエディターセクションを表示または非表示にできます。