ユーザー インターフェイス
Visual Studio Code の核心はコード エディターです。他の多くのコード エディターと同様に、VS Code は、アクセス可能なすべてのファイルとフォルダーを左側に表示するエクスプローラーと、開いているファイルの内容を右側に表示するエディターという、一般的なユーザー インターフェイスとレイアウトを採用しています。
基本レイアウト
VS Code は、シンプルで直感的なレイアウトを備えており、エディターに提供されるスペースを最大化しつつ、フォルダーやプロジェクトの全体像を閲覧してアクセスするための十分なスペースを確保しています。ユーザー インターフェイスは、主に 6 つのエリアに分かれています。
- エディター - ファイルを編集するためのメイン エリアです。垂直または水平に、いくつでもエディターを並べて開くことができます。
- プライマリ サイドバー - プロジェクトの作業を支援する、エクスプローラーなどのさまざまなビューが含まれています。
- セカンダリ サイドバー - プライマリ サイドバーの反対側にあります。デフォルトでは「チャット」ビューが含まれています。ビューをプライマリ サイドバーからセカンダリ サイドバーにドラッグ アンド ドロップして移動できます。
- ステータス バー - 開いているプロジェクトや編集しているファイルに関する情報が表示されます。
- アクティビティ バー - 一番左側に配置されています。ビューを切り替えることができ、Git が有効な場合の送信変更数など、状況に応じた追加のインジケーターが表示されます。アクティビティ バーの位置は変更可能です。
- パネル - エディター領域の下にある、ビューのための追加スペースです。デフォルトでは、出力、デバッグ情報、エラーと警告、および統合ターミナルが含まれています。パネルは、垂直方向のスペースを確保するために左または右に移動することもできます。
VS Code を起動するたびに、前回終了したときと同じ状態で開きます。フォルダー、レイアウト、および開いていたファイルが保持されます。
各エディターで開いているファイルは、エディター領域の上部にタブ付きヘッダー（タブ）として表示されます。タブ付きヘッダーの詳細については、タブ セクションを参照してください。
アクティビティ バーを右クリックして プライマリ サイドバーを右に移動 を選択するか、表示を切り替える (⌘B (Windows, Linux では Ctrl+B)) ことで、プライマリ サイドバーを右側に移動できます。
プライマリおよびセカンダリ サイドバー の使用方法について詳しくはこちらをご覧ください。
サイドバイサイド編集
垂直または水平に、いくつでもエディターを並べて開くことができます。すでにエディターを開いている場合、別のエディターを横に開く方法はいくつかあります。
- エクスプローラー ビューで 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 を押すことで、素早く切り替えることができます。
エディターのサイズ変更や並べ替えが可能です。エディターのタイトル領域をドラッグ アンド ドロップして、エディターを再配置したりサイズを変更したりします。
エディター グループ
エディターを分割する（エディターを分割 または 横に開く コマンドを使用）と、アイテムのグループを保持できる新しいエディター領域（エディター グループ）が作成されます。垂直または水平に、いくつでもエディター グループを並べて開くことができます。
これらは、エクスプローラー ビューの上部にある 開いているエディター セクションで明確に確認できます（エクスプローラー ビューで ... > 開いているエディター を切り替えます）。
ワークベンチ上でエディター グループをドラッグ アンド ドロップしたり、グループ間で個々のタブを移動したり、グループ全体を素早く閉じたり (すべて閉じる) できます。
VS Code は、タブが有効かどうかに関わらず、エディター グループを使用します。タブがない場合、エディター グループは開いているアイテムのスタックとなり、最後に選択したアイテムがエディター ペインに表示されます。
グループ内での分割
表示: グループ内でエディターを分割 コマンド (⌘K ⇧⌘\ (Windows, Linux では Ctrl+K Ctrl+Shift+\)) を使用すると、新しいエディター グループを作成せずに現在のエディターを分割できます。このエディター モードと、両サイド間を移動するための特定のコマンドの詳細については、カスタム レイアウト の記事のセクションを参照してください。
フローティング ウィンドウ
エディター、ターミナル、または特定のビューを独自のフローティング ウィンドウに移動できます。これは、マルチモニター セットアップを使用していて、別のモニターでファイルを開いたままにしたい場合に便利です。
現在の VS Code ウィンドウからエディター タブを外にドラッグすると、フローティング ウィンドウで開きます。または、エディター タブのコンテキスト オプションから 新しいウィンドウに移動 または 新しいウィンドウにコピー を使用します。
フローティング ウィンドウを画面の最前面に固定するには、タイトル バーから 常に手前に表示 オプション（ピン アイコン）を選択します。
フローティング ウィンドウの詳細については、カスタム レイアウト の記事のセクションを参照してください。
モーダル エディター
VS Code の特定の構成エディターは、通常のエディター タブとしてではなく、エディター領域の上に中央揃えのモーダル オーバーレイとして開きます。これらのモーダル エディターには以下が含まれます。
- 設定 エディター
- キーボード ショートカット エディター
- プロファイル エディター
- ワークスペースの信頼 エディター
- 言語モデル エディター
- 拡張機能 エディター
モーダル エディターは、その外側をクリックするか、Escape を押すか、閉じるボタンを選択することで閉じることができます。また、エディター領域いっぱいに最大化したり、通常のエディター タブとしてメイン ウィンドウに戻したりすることもできます。
この動作は、 workbench.editor.useModal 設定で制御できます。常に通常のリテラル タブとして開くには off、構成エディターのみをモーダル オーバーレイとして開くには some (デフォルト)、すべてのエディターをモーダル オーバーレイで開くには all に設定します。
ミニマップ
ミニマップ（コード アウトライン）は、ソース コードのハイレベルな概要を提供し、素早いナビゲーションとコードの理解に役立ちます。ファイルのミニマップはエディターの右側に表示されます。影付きの領域を選択またはドラッグして、ファイル内の別のセクションに素早くジャンプできます。
エディターに //#region コメントなどの 折りたたみマーカー がある場合、ミニマップには折りたたみマーカー名が表示されます。折りたたみマーカーは言語によって異なるため、お使いの言語にどのマーカーが適用されるか確認してください。
ユーザー設定またはワークスペースの 設定 で、"editor.minimap.side": "left" または "editor.minimap.enabled": false をそれぞれ設定することで、ミニマップを左側に移動したり、完全に無効にしたりできます。
スティッキースクロール
スティッキー スクロールは、現在表示されている入れ子になったスコープの開始行をエディターの上部に表示します。ファイル内のどこにいるかを示すことでナビゲーションを容易にし、現在のスコープの先頭に素早く戻ることができます。
スティッキー スクロールは、 editor.stickyScroll.enabled 設定で有効/無効にできます。
スティッキー スクロールは、いくつかの異なるコンテンツ モデルを使用して見出しを作成します。アウトライン プロバイダー モデル、折りたたみプロバイダー モデル、インデント モデルの中から、スティッキー スクロール領域に表示する行を決定するために使用するモデルを選択できます。現在の言語でモデルが利用できない場合、VS Code は上記の順序で次のモデルにフォールバックします。最初に使用されるデフォルト モデルは editor.stickyScroll.defaultModel 設定から取得されます。
インデント ガイド
エディターにはインデント ガイド（垂直線）が表示され、一致するインデント レベルを素早く確認するのに役立ちます。インデント ガイドを無効にしたい場合は、ユーザー設定またはワークスペースの 設定 で editor.guides.indentation を false に設定します。
パンくずリスト
エディターの上部にはナビゲーション バーがあり、パンくずリスト (breadcrumbs) とも呼ばれます。パンくずリストには常にファイル パスが表示され、現在のファイル タイプがシンボルの言語サポートを備えている場合は、カーソル位置までのシンボル パスも表示されます。パンくずリストを使用すると、フォルダー、ファイル、シンボル間を素早く移動できます。
パンくずリストは、メニュー項目の 表示 > 外観 > パンくずリストの切り替え または 表示: パンくずリストの切り替え コマンドで無効にできます。外観のカスタマイズ方法など、パンくずリスト機能の詳細については、コード ナビゲーション の記事の パンくずリスト セクションを参照してください。
エクスプローラー ビュー
エクスプローラー ビューは、プロジェクト内のファイルやフォルダーの閲覧、開封、管理に使用されます。VS Code はファイルおよびフォルダー ベースであり、VS Code でファイルやフォルダーを開くことで、すぐに作業を開始できます。
VS Code でフォルダーを開くと、そのフォルダーの内容がエクスプローラー ビューに表示されます。ここでは多くの操作が可能です。
- ファイルやフォルダーの作成、削除、名前変更。
- ドラッグ アンド ドロップによるファイルやフォルダーの移動。
- コンテキスト メニューを使用してすべてのオプションを探索。
VS Code の外部からエクスプローラー ビューにファイルをドラッグ アンド ドロップしてコピーできます。エクスプローラーが空の場合、VS Code は代わりにファイルを開きます。VS Code の外部からエクスプローラー ビューにファイルをコピーして貼り付けることもできます。 explorer.autoOpenDroppedFile 設定を使用して、ファイルを自動的に開くかどうかを構成できます。
VS Code は、使用する可能性のある他のツール、特にコマンドライン ツールとうまく連携します。VS Code で現在開いているフォルダーのコンテキストでコマンドライン ツールを実行したい場合は、フォルダーを右クリックして 統合ターミナルで開く を選択します。
また、ファイルまたはフォルダーを右クリックして、Windows では エクスプローラーで表示、macOS では Finder で表示、Linux では 親フォルダーを開く を選択することで、OS 本来のファイル エクスプローラーでその場所を表示することもできます。
⌘P (Windows, Linux では Ctrl+P) (クイック オープン) を入力すると、名前でファイルを素早く検索して開くことができます。
デフォルトでは、VS Code は .git などの一部のフォルダーをエクスプローラー ビューに表示しません。エクスプローラー ビューからファイルやフォルダーを非表示にするルールを構成するには、 files.exclude 設定を使用します。この設定の Glob パターンは、OS の大文字と小文字の区別ルールに従います（Windows/macOS では区別せず、Linux では区別します）。glob パターン の詳細についてはこちらをご覧ください。
explorer.excludeGitIgnore 設定を有効にすることで、.gitignore ファイルで指定されているファイルやフォルダーを非表示にすることもできます。有効にすると、.gitignore パターンは、Windows と macOS では大文字と小文字を区別せずに適用され、Linux では大文字と小文字を区別して適用されます。たとえば、.gitignore 内の node_modules というパターンは、Windows と macOS では node_modules/、Node_Modules/、NODE_MODULES/ などの大文字小文字のバリエーションに一致しますが、Linux では正確に一致するもののみに一致します。
imageCarousel.explorerContextMenu.enabled (試験的) が有効な場合、エクスプローラーで画像または動画のファイルまたはフォルダーを右クリックし、カルーセルで画像を開く を選択して、専用のカルーセル ビューでメディア ファイルを閲覧できます。これは複数選択でも機能します。
Unity の *.meta や TypeScript プロジェクトの *.js のように、派生したリソース ファイルを非表示にすることができます。Unity で *.cs.meta ファイルを除外するには、パターンの選択は "**/*.cs.meta": true となります。TypeScript の場合、"**/*.js": {"when": "$(basename).ts"} を使用して TypeScript ファイル用に生成された JavaScript を除外できます。
複数選択
エクスプローラー ビューと「開いているエディター」セクションで複数のファイルを選択して、複数のアイテムに対してアクション（削除、ドラッグ アンド ドロップ、または横に開く）を実行できます。Ctrl (macOS では Cmd) を押し続けながら個々のファイルを選択するか、Shift を押し続けてファイルの範囲を選択します。2 つのアイテムを選択した場合、コンテキスト メニューの 選択範囲を比較 コマンドを使用して、2 つのファイルを素早く比較 (diff) することもできます。
以前の VS Code リリースでは、Ctrl (macOS では Cmd) キーを押しながらクリックすると、新しいエディター グループを横に開くようになっていました。引き続きこの動作を希望する場合は、 workbench.list.multiSelectModifier 設定を使用して、複数選択に Alt キーを使用するように変更できます。
"workbench.list.multiSelectModifier": "alt"
高度なツリー ナビゲーション
エクスプローラー ビューでファイルやフォルダーをフィルタリングできます。エクスプローラー ビューにフォーカスがある状態で、⌥⌘F (Windows, Linux では Ctrl+Alt+F) を押して検索コントロールを開き、一致させたいファイル名またはフォルダー名の一部を入力します。このナビゲーション機能は、VS Code のすべてのツリー ビューで使用できます。
フィルター ボタンを押すと、強調表示とフィルタリングの 2 つのモードが切り替わります。下 キーを押すと、最初に一致した要素にフォーカスし、以降の一致する要素に移動できます。強調表示モードでは、一致するファイルが含まれていることを示すバッジがフォルダーに表示されます。
あいまい一致 (Fuzzy Match) ボタンを押すと、完全一致とあいまい一致が切り替わり、ファイル名またはフォルダー名の任意の部分に一致する一連の文字を入力できるようになります。
アウトラインビュー
アウトライン ビューは、エクスプローラー ビューの下部にある別のセクションです。展開すると、現在アクティブなエディターのシンボル ツリーが表示されます。
アウトライン ビューには、さまざまな 並べ替え モード、オプションのカーソル追跡機能があり、通常の開封ジェスチャをサポートしています。また、検索やフィルタリングのための入力ボックスも含まれています。エラーと警告もアウトライン ビューに表示され、問題の場所を一目で確認できます。
シンボルの場合、このビューは、さまざまなファイル タイプに対してインストールされた拡張機能によって計算された情報に依存しています。たとえば、組み込みの Markdown サポートは、Markdown ファイルのシンボルとして Markdown ヘッダー階層を返します。
アウトライン ビューにはいくつかの 設定 があります。アウトライン ビューに表示される情報を構成するには、outline. で始まる設定を検索してください。
タイムラインビュー
タイムライン ビューは、ファイル エクスプローラーの下部からアクセスでき、ファイルのイベント履歴を視覚化するための統合されたビューです。たとえば、Git のコミットやローカル ファイルの保存をタイムライン ビューで確認できます。
タイムライン ビューのツールバーにあるフィルター アクションを使用すると、ソース管理イベントとローカル ファイル イベントをフィルタリングできます。
ローカル ファイルの履歴
設定によりますが、エディターを保存するたびに、新しいエントリがリストに追加されます。各ローカル履歴エントリには、エントリが作成された時点のファイルの全内容が含まれており、特定の場合にはより詳細な意味情報（リファクタリングの提示など）を提供できます。
エントリからは以下のことが可能です。
- ローカル ファイルまたは以前のエントリとの変更を比較。
- 内容を復元。
- エントリを削除または名前変更。
誤ってファイルを削除してしまった場合は、タイムライン ビューの ... > ローカル履歴: 復元するエントリを検索 アクションを使用し、クイック ピックからファイルを選択することで、ローカル履歴から復元できます。
ローカル履歴を操作するための以下の設定を構成できます。
- workbench.localHistory.enabled - ローカル履歴の有効化または無効化 (デフォルト: true)
- workbench.localHistory.maxFileSize - ローカル履歴エントリを作成する際のファイル サイズ制限 (デフォルト: 256 KB)
- workbench.localHistory.maxFileEntries - 1 ファイルあたりのローカル履歴エントリの制限数 (デフォルト: 50)
- workbench.localHistory.exclude - 特定のファイルをローカル履歴から除外するための Glob パターン
- workbench.localHistory.mergeWindow - ローカル ファイル履歴の最後のエントリにさらに変更が追加される間隔（秒単位） (デフォルト: 10秒)
コミット履歴
VS Code に組み込まれた Git サポートにより、指定したファイルの Git コミット履歴が表示されます。コミットを選択すると、そのコミットによって導入された変更の diff ビューが開きます。コミットを右クリックすると、コミット ID をコピー および コミット メッセージをコピー するオプションが表示されます。
履歴内のコミットを右クリックすると、以下のことが可能です。
- 変更を開く - ファイル内の変更を diff ビューで開きます。
- コミットを表示 - マルチファイル diff ビューを開き、コミット内のすべてのファイルの変更を表示します。
- 比較対象を選択 - 別のエントリと比較するためのエントリを選択します。
- コミット 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 Mode)
ゼン モードを使用すると、エディター以外のすべての 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。
集中モード（おやすみモード）で通知を減らす
ポップアップする通知に煩わされている場合は、すべての通知、または特定の拡張機能からの通知を減らす方法があります。
ステータス バー（または通知が右上に配置されている場合はタイトル バー）のベル アイコンを選択して、通知エリアを開きます。ここは、集中モードを有効にしている場合でも、いつでもすべての通知にアクセスできる場所です。 workbench.notifications.position 設定で通知の位置を変更できます。通知の位置 について詳しくはこちらをご覧ください。
斜線が引かれたベルのアイコンを見つけると、拡張機能からの通知を選択的に無効にしたり、グローバルな集中モードを有効にしてすべての通知を無効にしたりできるメニューにアクセスできます。
グローバルな集中モードはエラー通知も非表示にしますが、拡張機能固有のフィルターでは引き続きエラー通知を表示させることができます。
中央揃えのエディター レイアウト
中央揃えのエディター レイアウトを使用すると、エディター領域を中央に配置できます。これは、大きなモニターで単一のエディターを使用して作業する場合に便利です。サイドの境界線を使用してビューのサイズを変更できます（Alt キーを押したままにすると、左右を個別に移動できます）。
タブ
VS Code は、エディターの上のタイトル領域にタブ（タブ付きの見出し）で開いているアイテムを表示します。ファイルを開くと、そのファイルの新しいタブが追加されます。タブを使用すると、アイテム間を素早く移動できます。
タブをドラッグ アンド ドロップして並べ替えることができます。複数のタブに対して一度にアクションを実行するには、Ctrl キー (macOS では Cmd) を押し続けながら操作したいタブを選択します。タブの範囲を選択するには、Shift キーを押し続けながら範囲の最初と最後のタブを選択します。
タイトル領域に収まりきらないほど多くのアイテムを開いている場合は、エクスプローラー ビューの 開いているエディター セクション（... ボタンから利用可能）を使用して、タブ付きアイテムのドロップダウン リストを表示できます。
タブ領域とエディター領域の間にはスクロール バーもあり、エディターをドラッグして表示させることができます。ワークベンチ > エディター: タイトル スクロールバーのサイズ指定 ( workbench.editor.titleScrollbarSizing ) を large に設定することで、スクロール バーの高さを高くしてドラッグしやすくできます。 workbench.editor.titleScrollbarVisibility 設定を使用して、スクロール バーの表示を制御します。
タブを使用したくない場合は、 workbench.editor.showTabs 設定を single にすることで機能を無効にできます。
"workbench.editor.showTabs": "single"
VS Code を タブなしでの作業 に最適化する方法については、以下のセクションを参照してください。
エディターのタイトル領域をダブルクリックすると、新しいタブを素早く作成できます。
タブの順序
デフォルトでは、新しいタブは既存のタブの右側に追加されます。新しいタブを表示する場所は、 workbench.editor.openPositioning 設定で制御できます。
たとえば、新しいタブ付きアイテムを左側に表示するように設定できます。
"workbench.editor.openPositioning": "left"
タブをドラッグ アンド ドロップして並べ替えることができます。
エディター タブを常に表示させておきたい場合は、エディター タブ バーに固定 (ピン留め) できます。タブの固定についての詳細は、カスタム レイアウト の記事を参照してください。
workbench.editor.showTabIndex 設定を使用すると、タブ ヘッダーに各タブのインデックスを表示できます。これにより、特定のタブに素早く切り替えるための Ctrl (macOS では Cmd) + 数字 のキーボード ショートカットで、どの数字を使用すればよいかが分かりやすくなります。
プレビュー モード
エクスプローラー ビューでファイルをシングルクリックまたは選択すると、プレビュー モードで表示され、既存のタブ（プレビュー タブ）が再利用されます。これは、ファイルを素早く閲覧していて、訪問したすべてのファイルに独自のタブを持たせたくない場合に便利です。ファイルの編集を開始したり、エクスプローラーからダブルクリックしてファイルを開いたりすると、そのファイル専用の新しいタブが作成されます。
プレビュー モードは、タブの見出しが斜体になることで示されます。
プレビュー モードを使用せず、常に新しいタブを作成したい場合は、以下の設定で動作を制御できます。
- workbench.editor.enablePreview - プレビュー エディターをグローバルに有効または無効にします
- workbench.editor.enablePreviewFromQuickOpen - クイック オープン から開いたときにプレビュー エディターを有効または無効にします
折り返しタブ
より多くのエディター タブを表示するには、エディター タブがエディター領域の上の複数行に折り返される 折り返しタブ レイアウトを使用できます。ワークベンチ > エディター: タブを折り返す ( workbench.editor.wrapTabs ) 設定で折り返しタブを有効にします。
タブ ラベルのカスタマイズ
同じ名前の複数のファイルを同時に開いていると、各タブを区別するのが難しい場合があります。これを解消するために、タブにカスタム表示ラベルを適用できます。ワークスペース内のどのファイルに対してタブにカスタム ラベルを適用するかを選択できます。
タブのカスタム表示ラベルを有効にするには、 workbench.editor.customLabels.enabled 設定をオンにします。
"workbench.editor.customLabels.enabled": true
workbench.editor.customLabels.patterns 設定を使用して、タブ表示ラベルの命名パターンを 1 つ以上指定できます。命名パターンは 2 つのコンポーネントで構成されます。
- アイテム (Item) - カスタム ラベルを適用するファイル パスに一致する glob パターン。例:
**/static/**/*.html。 - 値 (Value) - カスタム ラベルのテンプレート。テンプレートでは
${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
カスタム タブ ラベルは、「開いているエディター」ビューおよび クイック オープン (⌘P (Windows, Linux では Ctrl+P)) にも適用されます。
グリッド エディター レイアウト
デフォルトでは、エディター グループは垂直方向の列に配置されます。たとえば、エディターを分割すると、エディターを横に開きます。エディター グループは、垂直方向と水平方向の両方で、好きなレイアウトに配置できます。
柔軟なレイアウトをサポートするために、空のエディター グループを作成できます。デフォルトでは、エディター グループの最後のエディターを閉じるとそのグループ自体も閉じますが、新しい設定 workbench.editor.closeEmptyGroups: false でこの動作を変更できます。
表示 > エディター レイアウト メニューには、定義済みのエディター レイアウト セットがあります。
デフォルトでは、横に開くエディター（たとえば、エディター ツールバーの エディターを分割 アクションを選択した場合）は、アクティブなエディターの右側に開きます。アクティブなエディターの下にエディターを開きたい場合は、 workbench.editor.openSideBySideDirection を down に設定します。
キーボードを使用してエディター レイアウトを調整するための多くのキーボード コマンドがあります。マウスを使用したい場合は、ドラッグ アンド ドロップを使用してエディターを任意の方向に分割できます。
エディターを分割するためのツールバー アクションにマウスを合わせながら Alt キーを押し続けると、別の方向への分割が表示されます。これは、右または下のいずれかに素早く分割する方法です。
キーボードショートカット
エディターとエディター グループ間を素早く移動するための便利なキーボード ショートカットをいくつか紹介します。
- ⌥⌘→ (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 に設定します。
`-new-window` または `-reuse-window` コマンドライン オプションを使用する場合など、この設定が無視されるケースもあります。
設定 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"
}
エクスプローラー ビューの [開いているエディター] セクションを非表示にできますか？
はい、エクスプローラーの [表示] メニューを使用して、**[開いているエディター]** メニュー アイテムを切り替えることで、[開いているエディター] セクションを表示または非表示にできます。
