kylen.blog

Appearance

多個 VS Code 專案視窗經過 macOS 與編輯器設定後合併為 Tab 分頁

如何讓 VS Code 在開新視窗時使用 Tab 分頁的方式來開啟 ​

如果是在全螢幕下要透過新開啟視窗來開另外的專案的話，通常會呈現下圖的樣子 新視窗開啟

但通常就變成無法在同一個視窗中解決掉我要維護跨專案的問題，如果能夠讓特定專案都在這個視窗內，而不是要滾動整個視窗才有辦法看到對應專案內容的話會降低非常多的心智負擔！

實際上最後呈現效果如下： Tab 分頁開啟 這樣在同一個視窗中就可以維護多個專案，並且可以透過 Tab 分頁的方式來切換不同專案的內容，是不是很讚！！！

接下來就說明如何透過一連串的設定，讓 VS Code 在開啟新視窗時，能夠在同一個視窗內並且用 Tab 分頁的方式來開啟

macOS 系統設定 ​

  1. 首先開啟 macOS 的「系統設定」(紅)。
  2. 再到「桌面與 Dock」的選項中 (黃)。
  3. 在「視窗」分類中，將「打開文件時偏好標籤頁」設定成「總是」(綠)。

macOS 設定

這項設定是 macOS 的系統層級行為，只有支援 macOS 原生 Tab 分頁的應用程式才會生效。搭配後面的 VS Code 設定後，開啟另一個專案時，VS Code 會建立新的工作區視窗，再由 macOS 將它收納到目前視窗的 Tab 分頁中。這樣在全螢幕或一般視窗模式下，都能減少桌面上同時出現的視窗數量。

如果某次需要開啟真正的獨立視窗，可以按下 Option + Command + N，或從 macOS 選單選擇「視窗 > 將標籤頁移到新視窗」。 如果已經開啟多個獨立視窗，也可以使用「視窗 > 合併所有視窗」將它們整理到同一個視窗中。

VS Code 設定 ​

  1. 接下來輪到 VS Code 設定，點擊 Settings VS Code 設定
  2. 在右上角的文件 icon 中點下去後，把以下的設定全都貼進去 VS Code 設定
json
{
  "window.nativeTabs": true, // 啟用 macOS 原生視窗標籤頁
  "window.openFoldersInNewWindow": "on", // 開啟資料夾時建立新的 VS Code 視窗
  "window.titleBarStyle": "native" // 使用 macOS 原生標題列，主要是外觀設定
}

這樣設定完成後，在每次開啟新視窗時，就會預設用 Tab 分頁的方式來打開！

VS Code 快捷鍵設定 (可選) ​

至於下面的快捷鍵，是可以透過鍵盤快速地切換視窗跟開啟指定專案的資料夾，這個我覺得也不錯用，就是看個人

json
[
  {
    "key": "alt+cmd+p",
    "command": "workbench.action.openRecent"
  },
  {
    "key": "cmd+]",
    "command": "workbench.action.showNextWindowTab"
  },
  {
    "key": "cmd+[",
    "command": "workbench.action.showPreviousWindowTab"
  },
]

總結 ​

透過 macOS 的 Tab 分頁設定，搭配 VS Code 的視窗設定，就能讓不同專案集中在同一個視窗中，並透過 Tab 分頁快速切換。若有需要，也可以再搭配快捷鍵開啟最近使用的專案或切換 Tab 分頁。

不過 macOS 的 Tab 分頁設定是系統層級的設定，其他支援 Tab 分頁的應用程式也可能受到影響，設定前可以先確認自己是否習慣這種操作方式。