Skip to content

建立 2026-09-16 更新 2026-09-16

佈景主題與個人化設定

VS Code 幾乎每個外觀細節與行為都能調整。這一頁介紹最常被客製化的三個項目：色彩主題、圖示主題、以及設定檔（Settings）本身的兩種編輯方式。

色彩主題（Color Theme）

按 Cmd/Ctrl+K Cmd/Ctrl+T 打開主題選單，用方向鍵即可即時預覽效果。內建主題（如 Dark+、Light+、Monokai）已經很堪用，若想要更多選擇，可以到擴充套件市集搜尋 theme，安裝後會自動出現在同一份選單中。

圖示主題（File Icon Theme）

檔案總管裡每種副檔名前的圖示由「檔案圖示主題」控制，在命令選擇區搜尋「Preferences: File Icon Theme」即可切換。安裝像 Material Icon Theme 這類擴充套件後，能讓不同語言、框架的檔案一眼就能分辨，對大型專案的檔案總管特別有幫助。

設定（Settings）的兩種介面

Cmd/Ctrl+, 打開設定，預設是圖形化介面（Settings UI），可用搜尋框找到想調整的項目，並分成「使用者（User）」與「工作區（Workspace）」兩個層級：

使用者設定：套用到所有專案，例如字型大小、是否自動儲存。
工作區設定：只套用到目前開啟的資料夾，存在專案內的 .vscode/settings.json，適合團隊共用的格式化規則等設定，可以連同程式碼一起提交到版本控制。

想要更精確或批次調整，可以點設定介面右上角的圖示切換成 JSON 編輯（Settings JSON），直接編輯鍵值對，也方便複製貼上分享給團隊成員。常見的實用設定：

{
  "editor.formatOnSave": true,
  "files.autoSave": "onFocusChange",
  "editor.fontSize": 14
}

推薦影音

官方：自訂 VS Code 介面以提升生產力

簡述：官方示範如何透過設定與快捷鍵調整介面配置，讓常用功能更順手，適合已熟悉基本操作、想進一步打造個人化工作流程的使用者。

官方：用主題個人化 VS Code

簡述：官方示範切換色彩主題、從市集安裝主題，以及調整檔案圖示主題，是打造個人化外觀最直接的入門影片。

相關資料