iT邦幫忙

0

Day 05:【版面配置】側邊欄、終端機、分頁靈活配置與 Zen Mode 專注模式

  • 分享至 

  • xImage
  •  

💡 前言

在前幾天完成主題、圖示與字型的設定後,今天我們要來打造一個乾淨、高效且不干擾思路的版面工作區 (Layout & Workspace)。

許多人在開發時,常因為視窗開太多、終端機佔據大半畫面,或是被側邊欄干擾而無法專注。今天 Day 05 將分享如何彈性拆分視窗、善用內建終端機,以及開啟 Zen Mode(專注模式),讓你的 VS Code 介面井然有序!


🎯 本篇重點

  1. 側邊欄與活動列 (Activity Bar) 的最佳擺放位置
  2. 多視窗分頁拆分 (Split Editor) 實務技巧
  3. 內建終端機 (Terminal) 多頁籤與分割管理
  4. 一鍵進入全螢幕無干擾寫作:Zen Mode 專注模式

📐 1. 側邊欄與活動列優化

預設的側邊欄位在左側,當你展開或折疊檔案目錄時,程式碼編輯區域會不停左右跳動,影響視覺焦點。

• 將側邊欄移至右側:
在側邊欄上方按右鍵,選擇 「將側邊欄移至右側 (Move Primary Sidebar Right)」。這樣無論檔案樹怎麼展開,程式碼區域的位置都不會被推擠!
• 隱藏/顯示側邊欄快捷鍵:
Ctrl + B(Mac 為 Cmd + B),隨手關閉側邊欄可以釋放大量的螢幕空間。


🪟 2. 多視窗分頁拆分 (Split Editor)

當你需要同時對照 HTML/CSS、或是比對兩個程式碼檔案時,靈活運用拆分視窗非常重要:

• 快速左右拆分:
在開啟的檔案分頁上記錄快捷鍵 Ctrl + \(Mac 為 Cmd + \),即可將當前視窗一分為二。
• 切換分頁焦點:
按 Ctrl + 1、Ctrl + 2、Ctrl + 3(Mac 為 Cmd + 1/2/3)可以在不同的拆分區塊間快速跳轉。
• 網格佈局 (Grid Layout):
點擊選單列 「檢視 (View)」-> 「編輯器版面配置 (Editor Layout)」,支援 2x2 網格、三分頁等多種版面。


🖥️ 3. 內建終端機 (Terminal) 靈活運用

不用再切換出 VS Code 去開啟外置的 Command Prompt 或 Terminal:

• 開啟/隱藏終端機面板:快捷鍵 Ctrl + ~(Esc 鍵下方那顆鍵)。
• 新增多個終端機頁籤:按下右側的 + 號,或按下 Ctrl + Shift + ~。
• 分割終端機視窗:點擊終端機右上角的 「分割 (Split Terminal)」 圖示,可以在同一個底欄同時觀看本地伺服器 Log 與執行 Git 指令。


🧘 4. Zen Mode(禪模式 / 專注模式)

當你需要高度專注重構核心邏輯、或是撰寫 Markdown 文章時,Zen Mode 能幫你隱藏所有無關的 UI 元素(選單、側邊欄、狀態列、活動列):

• 進入/退出 Zen Mode:
按下快捷鍵組合 Ctrl + K 接著按 Z(Mac 為 Cmd + K -> Z)。
• 離開方式:按兩下 Esc 鍵即可還原預設版面。


圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言