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

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

基本的なレイアウト

VS Codeはシンプルで直感的なレイアウトを備えており、エディターに提供されるスペースを最大限に活用しつつ、フォルダーやプロジェクトの完全なコンテキストを閲覧・アクセスするための十分なスペースを確保しています。ユーザーインターフェースは6つの主要な領域に分かれています。

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

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

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

プライマリサイドバーとセカンダリサイドバーの使用方法について詳しく学ぶ。

並べて編集

縦横にいくつでも並べてエディターを開くことができます。すでにエディターが開いている場合は、サイドに別のエディターを開く方法がいくつかあります。

• Altを押しながらエクスプローラービューでファイルを選択します。
• ⌘\ (Windows、Linux Ctrl+\)でアクティブなエディターを2つに分割します。
• ファイルのExplorerコンテキストメニューからサイドで開く（⌃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+\)）を使用します。このエディターモードと両サイド間を移動するための特定のコマンドの詳細については、「カスタムレイアウト」の記事のセクションを参照してください。

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

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

フローティングウィンドウで開くには、エディタータブを現在の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 - 特定のファイルをローカル履歴から除外するためのグロブパターン
• 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ファイルを直接変更することもできます。基本設定: ユーザー設定を開く (JSON)コマンドを使用してsettings.jsonファイルを開きます。ワークスペース設定の場合は、ワークスペース内の.vscodeフォルダーにあるsettings.jsonファイルを開きます。

Zenモード

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

Zenモードは、次の設定でさらに調整できます。

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

集中モードで通知を減らす

通知が頻繁に表示されて煩わしい場合、すべての通知、または特定の拡張機能からの通知を減らす方法があります。

ステータスバーのベルアイコンを選択すると、通知領域が開きます。これは、集中モードを有効にしている場合でも、いつでもすべての通知にアクセスできる場所です。

斜線入りのベルアイコンを見つけて、拡張機能からの通知を選択的に無効にするか、すべての通知を無効にするグローバルな集中モードを有効にするメニューにアクセスします。

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

中央揃えエディターレイアウトを使用すると、エディター領域を中央揃えにできます。これは、大きなモニターで単一のエディターで作業する場合に便利です。サイドの境界線を使用してビューのサイズを変更できます（Altキーを押しながら左右を個別に移動できます）。

タブ

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

タブをドラッグアンドドロップして並べ替えることができます。複数のタブに対して一度にアクションを実行するには、Ctrlキー（macOSではCmd）を押しながら、操作したいタブを選択します。タブの範囲を選択するには、Shiftキーを押しながら、範囲の最初と最後のタブを選択します。

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

タブとエディター領域の間には、エディターをビュー内にドラッグするためのスクロールバーもあります。スクロールバーの高さを増やすには、ワークベンチ > エディター: タイトルスクロールバーのサイズ設定（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.wrapTabs）設定で有効にします。

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

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

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

    "workbench.editor.customLabels.enabled": true

タブ表示ラベルの命名パターンを1つ以上、workbench.editor.customLabels.patterns設定で指定できます。命名パターンは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で、アクティブなエディターグループに関係なく、履歴から開いているすべてのエディターのリストを表示するようにVS Codeを変更できます。

キーボードショートカットを編集し、以下を追加します。

{ "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"
}

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

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