「VS Codeでファイルをクリックしたら同じタブが切り替わってしまう」
「新しいタブで開きたいのに、どんどん上書きされる…」
「サイドバーからファイルをクリックするたびにタブが変わるのがストレス」
「複数のファイルを同時に見比べたいのに、プレビューモードが邪魔」
VS Codeを使っていて、こんな経験はありませんか？
実は、VS Codeにはデフォルトで「プレビューモード」という機能があり、サイドバーからファイルをクリックすると同じタブで内容が切り替わる仕様になっています。
しかし、設定を変更することで常に新しいタブで開くことができます。
この記事では、VS Codeでファイルを新しいタブで開く方法や、プレビューモードの詳細な設定について解説します。
VS Codeのプレビューモードとは？
プレビューモードの基本概念
VS Codeの「プレビューモード」は、ファイルを一時的にプレビューするための機能です。
| モード | 動作 | タブの表示 | 用途 |
|---|---|---|---|
| プレビューモード | 同じタブで内容が切り替わる | イタリック表示 | ファイルの中身を素早く確認 |
| 通常モード | 新しいタブで固定表示 | 通常表示 | ファイルの編集・比較 |
プレビューモードの特徴
プレビューモードの動作：
- サイドバーでファイルをシングルクリック → プレビューで開く
- 別のファイルをクリック → 同じタブで切り替わる
- タブのファイル名がイタリック体で表示される
通常モードの動作：
- サイドバーでファイルをダブルクリック → 新しいタブで固定
- タブのファイル名が通常の太さで表示される
- 他のファイルをクリックしても影響を受けない
実際の画面での違い
プレビューモード:
[📁 Explorer] [⚡ index.js] ← イタリック表示、一時的
通常モード:
[📁 Explorer] [📄 index.js] [📄 style.css] ← 通常表示、固定
ファイルを新しいタブで開く方法
方法1：ダブルクリックで開く（基本操作）
最も基本的で確実な方法です。
手順
- VS Codeのサイドバー（エクスプローラー）を開く
- 目的のファイルをダブルクリック
- 新しいタブとして固定される
プレビューモードから通常モードへの変換
# 現在プレビューモードで開いているファイルがある場合
1. プレビュータブ（イタリック表示）をダブルクリック
2. または、ファイルの内容を編集し始める
3. 自動的に通常モードに変換される
方法2：キーボードショートカットで開く
Enterキーでの固定
# エクスプローラーでファイルを選択した状態で
Enter → プレビューモードで開く
Shift + Enter → 新しいタブで固定して開く
その他のキーボード操作
| キー | 動作 |
|---|---|
Enter | プレビューモードで開く |
Shift + Enter | 新しいタブで固定開く |
Ctrl + Enter | サイドエディタで開く |
Ctrl + K → Enter | 新しいエディタグループで開く |
方法3：右クリックメニューから開く
# サイドバーでファイルを右クリック
1. ファイル名を右クリック
2. メニューから選択：
- "Open" → プレビューモードで開く
- "Open to the Side" → 横分割で新しいタブ
- "Open in New Window" → 新しいウィンドウで開く
方法4：ドラッグ&ドロップで開く
# エクスプローラーからエディタ領域へ
1. サイドバーのファイルを選択
2. エディタ領域にドラッグ&ドロップ
3. 新しいタブとして開かれる
# 特定の位置に配置
- タブバーにドロップ → その位置に新しいタブ
- エディタの右半分にドロップ → 横分割
- エディタの下半分にドロップ → 縦分割
プレビューモードを無効にする設定
設定画面から変更
基本設定
- 設定画面を開く
Ctrl + , (Windows/Linux) Cmd + , (Mac) - 検索で設定を見つける
検索欄に入力: "workbench.editor.enablePreview" - チェックを外す
- 「Enable Preview」のチェックボックスを外す（falseにする）
- 変更は自動保存される
関連設定の最適化
# 設定画面で検索して変更できる項目
1. "workbench.editor.enablePreview" → false
サイドバーからのプレビューを無効
2. "workbench.editor.enablePreviewFromQuickOpen" → false
クイックオープン（Ctrl+P）からのプレビューを無効
3. "workbench.editor.enablePreviewFromCodeNavigation" → false
コードナビゲーションからのプレビューを無効
settings.jsonで直接設定
より詳細な制御を行いたい場合は、設定ファイルを直接編集します。
基本設定
{
// プレビューモードを完全に無効化
"workbench.editor.enablePreview": false,
"workbench.editor.enablePreviewFromQuickOpen": false,
"workbench.editor.enablePreviewFromCodeNavigation": false,
// タブの動作設定
"workbench.editor.showTabs": true,
"workbench.editor.tabCloseButton": "right",
"workbench.editor.tabSizing": "fit",
// エディタグループの設定
"workbench.editor.splitInGroupLayout": "distribute",
"workbench.editor.focusRecentEditorAfterClose": true
}
高度な設定オプション
{
// タブの詳細設定
"workbench.editor.highlightModifiedTabs": true,
"workbench.editor.labelFormat": "default",
"workbench.editor.pinnedTabSizing": "normal",
"workbench.editor.wrapTabs": false,
// ファイルエクスプローラーの設定
"explorer.openEditors.visible": 10,
"explorer.autoReveal": true,
"explorer.confirmDelete": true,
"explorer.confirmDragAndDrop": true,
// ワークベンチの動作設定
"workbench.startupEditor": "newUntitledFile",
"workbench.editor.restoreViewState": true,
"workbench.editor.revealIfOpen": false
}
新しいウィンドウでの作業
新しいウィンドウを開く方法
キーボードショートカット
# 現在のフォルダを新しいウィンドウで開く
Ctrl + Shift + N (Windows/Linux)
Cmd + Shift + N (Mac)
# ファイルを新しいウィンドウで開く
Ctrl + K → O (Windows/Linux/Mac)
メニューからの操作
# ファイルメニューから
File → New Window → 新しい空のウィンドウ
File → New Window → 現在のワークスペースを複製
# 右クリックメニューから
ファイルを右クリック → "Open in New Window"
ワークスペースの管理
複数プロジェクトの同時作業
// workspace.code-workspace
{
"folders": [
{
"name": "Frontend",
"path": "./frontend"
},
{
"name": "Backend",
"path": "./backend"
},
{
"name": "Docs",
"path": "./documentation"
}
],
"settings": {
"workbench.editor.enablePreview": false
}
}
エディタグループとタブの分割管理
エディタグループの基本操作
水平・垂直分割
# エディタを分割
Ctrl + \ → 右に新しいエディタグループを作成
Ctrl + K → Ctrl + \ → 下に新しいエディタグループを作成
# タブを別のグループに移動
Ctrl + Alt + → → 右のグループにタブを移動
Ctrl + Alt + ← → 左のグループにタブを移動
# エディタグループ間の移動
Ctrl + 1, 2, 3... → 指定したグループにフォーカス
高度な分割レイアウト
# レイアウトの変更
Ctrl + K → Ctrl + Shift + \ → エディタを新しいグループで開く
Ctrl + K → ← → エディタを左のグループに移動
Ctrl + K → → → エディタを右のグループに移動
Ctrl + K → ↑ → エディタを上のグループに移動
Ctrl + K → ↓ → エディタを下のグループに移動
タブの効率的な管理
タブナビゲーション
# タブ間の移動
Ctrl + Tab → 最近使用したタブに切り替え
Ctrl + PageUp → 左のタブに移動
Ctrl + PageDown → 右のタブに移動
# タブの操作
Ctrl + W → 現在のタブを閉じる
Ctrl + Shift + T → 最近閉じたタブを再オープン
Ctrl + K → W → すべてのタブを閉じる
タブのピン留め機能
# タブのピン留め
右クリック → "Pin Tab" → タブを固定
Ctrl + K → Shift + Enter → タブをピン留め
# ピン留めタブの特徴
- タブバーの左側に表示
- 誤って閉じることを防ぐ
- アイコンのみの表示で省スペース
実践的な使用例
開発ワークフローの最適化
フロントエンド開発の例
# レイアウト例
┌─────────────────┬─────────────────┐
│ index.html │ styles.css │
├─────────────────┼─────────────────┤
│ script.js │ Terminal │
└─────────────────┴─────────────────┘
# 設定
{
"workbench.editor.enablePreview": false,
"workbench.editor.splitInGroupLayout": "distribute",
"workbench.startupEditor": "none"
}
バックエンド開発の例
# API開発のレイアウト
┌──────────────────────────────────────┐
│ routes/users.js │
├─────────────────┬────────────────────┤
│ models/ │ tests/ │
│ User.js │ user.test.js │
├─────────────────┼────────────────────┤
│ controllers/ │ Terminal │
│ userCtrl.js │ │
└─────────────────┴────────────────────┘
プロジェクト別設定
.vscode/settings.json での個別設定
// プロジェクト固有の設定
{
// このプロジェクトではプレビューを無効
"workbench.editor.enablePreview": false,
// タブを常に表示
"workbench.editor.showTabs": true,
// ファイルツリーの自動展開
"explorer.autoReveal": true,
// エディタの動作
"workbench.editor.focusRecentEditorAfterClose": true,
"workbench.editor.highlightModifiedTabs": true
}
カスタマイズとショートカット設定
キーバインドのカスタマイズ
keybindings.json の設定
// カスタムキーバインド
[
// ファイルを新しいタブで開く
{
"key": "ctrl+shift+o",
"command": "workbench.action.files.openFile",
"when": "!inQuickOpen"
},
// タブを右の新しいグループで開く
{
"key": "ctrl+shift+\\",
"command": "workbench.action.splitEditorRight"
},
// プレビューモードの切り替え
{
"key": "ctrl+k ctrl+p",
"command": "workbench.action.togglePreviewMode"
},
// エディタグループ間の素早い移動
{
"key": "alt+1",
"command": "workbench.action.openEditorAtIndex1"
},
{
"key": "alt+2",
"command": "workbench.action.openEditorAtIndex2"
}
]
拡張機能との連携
おすすめの拡張機能
| 拡張機能名 | 機能 | タブ管理への効果 |
|---|---|---|
| Bookmarks | ファイルにブックマーク設定 | 重要ファイルへの素早いアクセス |
| Project Manager | プロジェクトの切り替え | ワークスペース管理の効率化 |
| Auto Rename Tag | HTMLタグの自動同期 | 複数ファイル編集時の一貫性 |
| Bracket Pair Colorizer | 括弧のペア表示 | コード理解の向上 |
タブ管理系拡張機能
// 推奨拡張機能設定
{
"extensions.recommendations": [
"alefragnani.Bookmarks",
"alefragnani.project-manager",
"formulahendry.auto-rename-tag",
"ms-vscode.vscode-typescript-next"
]
}
トラブルシューティング
よくある問題と解決法
1. 設定が反映されない
症状： プレビューモードを無効にしても動作が変わらない
解決法：
# 1. VS Codeの再起動
Ctrl + Shift + P → "Developer: Reload Window"
# 2. 設定の確認
Ctrl + , → "workbench.editor.enablePreview" で検索
# 3. settings.jsonの直接確認
Ctrl + Shift + P → "Preferences: Open Settings (JSON)"
2. タブが勝手に閉じる
症状： 編集していないタブが自動的に閉じてしまう
解決法：
// settings.json
{
"workbench.editor.enablePreview": false,
"workbench.editor.limit.enabled": false,
"workbench.editor.limit.value": 20
}
3. エディタグループがうまく動作しない
症状： ファイルが期待した場所に開かれない
解決法：
# エディタグループをリセット
Ctrl + K → Ctrl + W → すべてのエディタを閉じる
View → Editor Layout → Single → レイアウトをリセット
# 設定の確認
{
"workbench.editor.splitInGroupLayout": "distribute"
}
4. キーボードショートカットが効かない
症状： カスタムキーバインドが動作しない
解決法：
# キーバインドの競合確認
Ctrl + K → Ctrl + S → キーボードショートカット設定を開く
検索欄に問題のキーを入力して競合をチェック
# デフォルトに戻す
右クリック → "Reset Keybinding"
パフォーマンスの最適化
タブ数の制限
// メモリ使用量の最適化
{
"workbench.editor.limit.enabled": true,
"workbench.editor.limit.value": 15,
"workbench.editor.limit.perEditorGroup": true,
// 非アクティブタブの自動クローズ
"workbench.editor.closeOnFileDelete": true,
"workbench.editor.focusRecentEditorAfterClose": true
}
まとめ：VS Codeのタブ管理をマスターしよう
VS Codeのタブとプレビュー機能を理解することで、より効率的な開発ワークフローを構築できます。
今回学んだ重要ポイント
- プレビューモードの理解: 一時的なファイル確認 vs 固定的な編集
- 基本操作: ダブルクリック、キーボードショートカット、設定変更
- エディタグループ: 複数ファイルの効率的な比較・編集
- カスタマイズ: 個人・プロジェクトに最適化した設定
- トラブル対応: よくある問題の解決方法
使い分けの指針
| 作業スタイル | 推奨設定 | 理由 |
|---|---|---|
| ファイルブラウジング重視 | プレビュー有効 | 素早い内容確認 |
| マルチファイル編集重視 | プレビュー無効 | 複数ファイルの同時編集 |
| コードレビュー | エディタグループ活用 | ファイル比較が容易 |
| 学習・調査 | プレビュー有効 + ブックマーク | 効率的な情報収集 |
コメント