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

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

基本的なレイアウト

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

• エディター - ファイルを編集するための主要な領域。垂直方向と水平方向に並べて、必要なだけ多くのエディターを開くことができます。
• プライマリサイドバー - プロジェクトでの作業中に役立つエクスプローラーなどのさまざまなビューが含まれています。
• ステータスバー - 開いているプロジェクトと編集するファイルに関する情報。
• アクティビティバー - 左端にあります。ビューを切り替えたり、Git が有効になっている場合の送信変更数など、コンテキスト固有の追加インジケーターを提供したりできます。アクティビティバーの位置は変更できます。
• パネル - エディター領域の下にあるビュー用の追加スペース。デフォルトでは、出力、デバッグ情報、エラーと警告、および統合ターミナルが含まれています。パネルは、垂直方向のスペースを増やすために左または右に移動することもできます。

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

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

並列編集

垂直方向と水平方向に並べて、必要なだけ多くのエディターを開くことができます。既にエディターが開いている場合は、別のエディターを横に開くには複数の方法があります。

• エクスプローラービューで Alt キーを押しながらファイルを選択します。
• アクティブなエディターを 2 つに分割するには、⌘\ (Windows、Linux Ctrl+\) を使用します。
• ファイルのエクスプローラーコンテキストメニューから [横に開く] (⌃Enter (Windows、Linux Ctrl+Enter)) を選択します。
• エディターの右上にある [エディターを分割] ボタンを選択します。
• ファイルをエディター領域の任意の側にドラッグアンドドロップします。
• クイックオープン (⌘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+\)) を使用して、新しいエディターグループを作成せずに現在のエディターを分割できます。このエディターモードと、両側をナビゲートするための特定のコマンドの詳細については、「カスタムレイアウト」の記事のセクションを参照してください。

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

[新しいウィンドウに移動] または [新しいウィンドウにコピー] (⌘K O (Windows、Linux Ctrl+K O)) コマンドを使用して、エディターを独自のフローティングウィンドウに移動できます。フローティングエディターウィンドウの詳細については、「カスタムレイアウト」の記事のセクションを参照してください。

ミニマップ

ミニマップ (コードアウトライン) は、ソースコードの概要を示します。これは、すばやくナビゲーションしたり、コードを理解したりするのに役立ちます。ファイルのミニマップは、エディターの右側に表示されます。シェーディングされた領域を選択またはドラッグして、ファイル内のさまざまなセクションにすばやくジャンプできます。

エディターに 折りたたみマーカー (//#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 キー (Cmd キー (macOS)) を押しながら個々のファイルを選択するか、Shift キーを押しながらファイルの範囲を選択します。2 つの項目を選択すると、コンテキストメニューの [選択したものを比較] コマンドを使用して、2 つのファイルをすばやく比較することもできます。

"workbench.list.multiSelectModifier": "alt"

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

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

[フィルター] ボタンを押すと、強調表示モードとフィルター処理モードが切り替わります。下 を押すと、最初に一致した要素にフォーカスが移動し、後続の一致する要素に移動できます。強調表示モードでは、フォルダーに一致するファイルが含まれていることを示すバッジが表示されます。

[あいまい一致] ボタンを押すと、完全一致とあいまい一致が切り替わります。あいまい一致では、ファイルまたはフォルダー名の任意の部分に一致させる文字のシーケンスを入力できます。

アウトラインビュー

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

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

シンボルの場合、ビューは、さまざまなファイルタイプ用にインストールされた拡張機能によって計算された情報に依存します。たとえば、組み込みの 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) で切り替えることができます。Esc を 2 回押すと、Zen モードが終了します。全画面表示への移行は、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 つのコンポーネントで構成されます。

• 項目 - カスタムラベルを適用するファイルパスに一致する glob パターン。例：**/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)。ウィンドウを再オープンせずに常に空の VS Code インスタンスで開始するには、この設定を none に変更します。最後に作業したウィンドウを再オープンするには one に変更し、フォルダーを開いていたウィンドウのみを復元するには folders に変更します。

次のステップ

これで VS Code の全体的なレイアウトがわかったので、次の記事を見て、自分の作業方法に合わせてエディターをカスタマイズし始めてください。

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

よくある質問

インデントガイドの色を変更するにはどうすればよいですか？

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

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

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

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

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