VS Codeの統合ブラウザーは、VS Code 1.128以降、workbench.browser.newTabPlacementを使って新しいブラウザータブの表示先を選べるようになりました。コードとWebページを横並びにするならsideGroup、別モニターへ分離するならwindow、従来どおり現在の編集領域に開くならactiveGroupを選びます。既定値はactiveGroupです。(Visual Studio Code)
GitHubが2026年7月30日に公開したまとめではVS Code 1.127～1.131の更新として紹介されていますが、統合ブラウザーの配置設定そのものは、2026年7月8日公開のVS Code 1.128で追加されました。そのため、設定項目が見つからない場合は、まずVS Codeのバージョンを確認する必要があります。(The GitHub Blog)
VS Code統合ブラウザーの表示先を選択可能に
VS Codeの統合ブラウザーは、WebページをVS Code内で直接開いて操作できる機能です。開発中のWebアプリをプレビューしたり、認証フローを確認したり、Webページ上の要素やスクリーンショットをAIチャットのコンテキストとして追加したりできます。(Visual Studio Code)
これまでは、新しいブラウザータブがアクティブなエディターグループに開くため、次のような使いにくさがありました。
- コードのタブとブラウザータブが混在する
- プレビューを開くたびに編集領域が切り替わる
- コードと画面を横並びにするため、毎回タブを移動する必要がある
- デュアルモニターでも、手動で別ウィンドウへ移動しなければならない
workbench.browser.newTabPlacementを設定すると、新しく開く統合ブラウザーの初期配置を固定できます。
統合ブラウザーで選べる3つの表示先
設定できる値は、activeGroup、sideGroup、windowの3種類です。
| 設定値 | 表示先 | 特徴 | 向いている使い方 |
|---|---|---|---|
activeGroup | 現在アクティブなエディターグループ | 従来どおりの動作。既定値 | ブラウザーを一時的に確認する |
sideGroup | 横に作られる専用エディターグループ | ブラウザータブ専用としてロックされる | コードとWebページを横並びにする |
window | 専用の補助ウィンドウ | ウィンドウ内がブラウザータブ専用になる | デュアルモニターや大画面で作業する |
sideGroupとwindowで作成される領域はブラウザータブ専用です。通常のコードファイルが同じ場所へ次々に開かないため、プレビュー領域を維持しやすくなります。(Visual Studio Code)
activeGroupは従来どおり現在の編集領域に開く
activeGroupを選ぶと、新しい統合ブラウザータブは現在選択しているエディターグループに開きます。
ノートパソコンの小さな画面で、コードとプレビューを同時表示する必要がない場合に適しています。ブラウザーを使わない間は編集領域を広く確保できるのが利点です。
一方で、コードファイルとブラウザータブが同じタブ列に並ぶため、Web開発で頻繁にプレビューする場合はタブが散らかりやすくなります。
sideGroupはコードとブラウザーを横並びにできる
sideGroupを選ぶと、統合ブラウザーが横の専用エディターグループに開きます。
ここでいうSide Groupは、ファイルエクスプローラーなどが表示されるSide Barではありません。コードエディターと同じ領域を分割して作られる、横並びのエディターグループです。
たとえば左側でReactやCSSを編集し、右側でlocalhostの表示を確認するといった使い方ができます。フロントエンド開発では、最も実用的な設定です。
windowは統合ブラウザーを別ウィンドウに分離する
windowを選ぶと、新しいブラウザータブが専用の補助ウィンドウに開きます。
これはChromeやMicrosoft Edgeなどの外部ブラウザーを起動する設定ではありません。VS Codeの統合ブラウザーを、独立して配置できるウィンドウへ分離する設定です。(Visual Studio Code)
メインモニターでコードを書き、サブモニターにプレビューを常時表示する場合に向いています。ブラウザー側の横幅を自由に変更できるため、レスポンシブ表示の確認にも便利です。
VS Codeの統合ブラウザーを横ペインや別ウィンドウで開く設定
設定画面から変更する方法
設定画面から変更する手順は次のとおりです。
- VS Codeを1.128以降へ更新します。
- WindowsまたはLinuxでは
Ctrl+,、macOSではCmd+,を押して設定画面を開きます。 - 設定の検索欄に
workbench.browser.newTabPlacementと入力します。
4.表示された「Workbench › Browser: New Tab Placement」を開きます。 activeGroup、sideGroup、windowから表示先を選択します。- 新しい統合ブラウザータブを開き、配置を確認します。
VS Codeの設定画面では、設定IDを検索すると該当項目だけを絞り込めます。設定変更は選択した時点で反映されるため、通常はVS Codeの再起動を必要としません。(Visual Studio Code)
横ペインで開きたい場合は、次の値を選びます。
sideGroup別ウィンドウで開きたい場合は、次の値を選びます。
window従来の表示方法へ戻す場合は、activeGroupを選択するか、設定を既定値へリセットします。
settings.jsonから変更する方法
設定をコードとして管理したい場合は、settings.jsonへ直接追加できます。
コマンドパレットを開き、Preferences: Open User Settings (JSON)を実行してください。WindowsとLinuxではCtrl+Shift+P、macOSではCmd+Shift+Pでコマンドパレットを開けます。(Visual Studio Code)
コードと統合ブラウザーを横並びにする設定は次のとおりです。
{
"workbench.browser.newTabPlacement": "sideGroup"
}別ウィンドウへ開く場合は、値をwindowへ変更します。
{
"workbench.browser.newTabPlacement": "window"
}従来どおりアクティブなエディターグループへ開く場合は、次のように設定します。
{
"workbench.browser.newTabPlacement": "activeGroup"
}すでにsettings.jsonへ別の設定が記載されている場合は、前後の項目をカンマで区切ってください。
{
"editor.fontSize": 14,
"workbench.browser.newTabPlacement": "sideGroup"
}JSONのカンマ不足や引用符の抜けがあると、設定が保存されないことがあります。VS Codeは設定名やJSON構文のエラーをエディター上で表示するため、赤い波線が出ていないか確認しましょう。(Visual Studio Code)
VS Codeで統合ブラウザーを開く方法
配置先を設定したら、新しい統合ブラウザーを開いて動作を確認します。
主な開き方は次のとおりです。
- コマンドパレットから
Browser: Open Integrated Browserを実行する - メニューバーの
ViewからBrowserを選択する - WindowsまたはLinuxで
Ctrl+Alt+/を押す - macOSで
Option+Cmd+/を押す - VS Codeのタイトルバーにある地球アイコンを選択する
- ターミナルやチャットに表示された
localhostのリンクを選択する
統合ブラウザーは複数開くことができ、それぞれが独立したエディタータブとして管理されます。(Visual Studio Code)
すでにブラウザータブが開いている状態でメニューや地球アイコンを選ぶと、新しいタブを直ちに作るのではなく、開いているブラウザータブを選択するための一覧が表示される場合があります。
表示先は作業スタイルで選ぶ
画面サイズだけでなく、コードとWebページを同時に見る時間の長さで選ぶと失敗しにくくなります。
| 作業スタイル | おすすめ | 理由 |
|---|---|---|
| HTMLやCSSを編集しながら表示を確認する | sideGroup | コードとプレビューを同時に確認できる |
| ReactやVueの画面を常時表示する | sideGroup | ブラウザータブがコードのタブに混ざらない |
| デュアルモニターで開発する | window | モニターごとにコードと画面を分離できる |
| レスポンシブ表示を広い範囲で確認する | window | ウィンドウサイズを独立して変更できる |
| ドキュメントや管理画面を一時的に見る | activeGroup | 編集領域を分割せずに済む |
| 小型ノートPCで作業する | activeGroup | コード領域を最大限確保できる |
迷った場合は、Web開発用としてsideGroupから試すのが現実的です。横幅が狭く感じる場合はwindowへ切り替え、統合ブラウザーを別モニターや別の位置へ移動すると作業しやすくなります。
設定時に注意したいポイント
すでに開いているタブは自動移動しない
workbench.browser.newTabPlacementは、新しく開くブラウザータブの初期配置を決める設定です。
設定変更前から開いているタブが、横ペインや別ウィンドウへ自動的に移動するわけではありません。確認するときは、新しい統合ブラウザータブを開いてください。
既存のブラウザータブは、ドラッグ操作で別のエディターグループへ移動できます。タブを右クリックしてMove into New Windowを選び、別ウィンドウへ移す方法もあります。(Visual Studio Code)
ブラウザー内で開いたリンクは親タブと同じ場所に開く
統合ブラウザー内のリンクをCtrl+クリック、macOSではCmd+クリックして新しいタブを開いた場合、そのタブは親タブと同じエディターグループに作成されます。
たとえば設定がwindowでも、横ペインに手動で移動したブラウザータブからリンクを新規タブで開けば、リンク先も同じ横ペインに開きます。すべての新規タブが無条件に設定先へ移動するわけではありません。(Visual Studio Code)
sideGroupはサイドバーではない
sideGroupを選んでも、エクスプローラーや検索、ソース管理が表示されるサイドバー内にWebページが開くわけではありません。
エディター領域が分割され、コードの横にブラウザー専用グループが作られます。エディターの横幅が狭くなりすぎる場合は、境界線をドラッグして比率を調整してください。
windowでも外部ブラウザーにはならない
windowは、統合ブラウザーを専用の補助ウィンドウへ配置する設定です。
Microsoft EdgeやGoogle ChromeへURLを送る設定ではありません。外部ブラウザー固有の拡張機能やプロファイルを使いたい場合は、従来どおり外部ブラウザーで開く必要があります。
VS Code 1.127では設定が表示されない
GitHubの2026年7月まとめはVS Code 1.127～1.131を対象としていますが、workbench.browser.newTabPlacementはVS Code 1.128のリリースノートで追加された機能です。VS Code 1.127を使用している場合は、1.128以降へ更新してください。(The GitHub Blog)
設定が反映されないときの確認項目
統合ブラウザーが意図した場所に開かない場合は、次の順番で確認します。
- VS Codeが1.128以降になっているか確認する
- 設定IDが
workbench.browser.newTabPlacementになっているか確認する - 値の大文字・小文字を確認する
- 既存タブではなく、新しい統合ブラウザータブを開く
- ブラウザー内のリンクから開いたタブではないか確認する
settings.jsonにJSON構文エラーがないか確認する- ユーザー設定とワークスペース設定で異なる値が指定されていないか確認する
設定画面で@modifiedを検索すると、既定値から変更した設定だけを一覧表示できます。意図しない設定が残っていないか確認するときに便利です。(Visual Studio Code)
VS Code統合ブラウザーの配置を固定してプレビュー作業を効率化しよう
VS Code 1.128以降では、workbench.browser.newTabPlacementによって、統合ブラウザーの新しいタブを開く場所を選択できます。
コードとWebページを横並びにするならsideGroup、デュアルモニターへ分離するならwindow、編集領域を広く保ちたいならactiveGroupが適しています。
まずVS Codeを1.128以降へ更新し、設定画面でworkbench.browser.newTabPlacementを検索してください。Webアプリのプレビューを頻繁に使う場合はsideGroupを設定すると、タブを毎回移動する手間を減らし、コードと表示結果を安定して並べられます。
コメント