如何自訂或修改 VSCode 佈景主題

May 30, 2018

Photo by Maik Jonietz on Unsplash

從開始寫程式以來,我一直都是使用 Atom 編輯器,一開始不外乎是喜歡它的介面,效能什麼的我都暫時擺一邊,但是時間久了,耐性可能都被磨光了,有時候開啟比較大的專案或者是程式碼,就會發現 Atom 的反應真的是慢!曾經打開過一個 SQL 檔案,Atom 直接卡在那邊沒有回應,最後才成功開啟檔案,非常的耗時,我想對 Atom 來說效能應該是他們最大的痛!

後來在許多人推薦 VSCode 下,我終於找時間去嘗試了,對於 VSCode 的啟動速度以及開啟大檔案的處理速度真的感到非常驚艷,同樣是使用 electron 開發而成,但是在部分的體驗上真的差很多!

目前在開發使用的電腦中,我還是會並用 AtomVSCode,主要是 Atom 還是用習慣了,要轉過去 VSCode 還需要適應,很多在 Atom 習慣使用的熱鍵,在 VSCode 上也可以透過安裝 Atom Keymap 來解決,相當方便。

自訂和微調佈景主題

VSCode 上有許多非常漂亮的佈景主題可以使用,可以透過 Marketplace 頁面來尋找你喜歡的佈景主題來使用,我一直很喜歡 Atom 的 One Dark 這個主題,在 VSCode 上也可以找到,但是覺得原本預設背景的顏色還是太亮的一些:

One Dark Pro
One Dark Pro

經過調整後:

可以透過「使用者設定」來覆寫一些原本預設的設定,點選「左下角的齒輪圖示」,再選擇「設定」,就可以對自己的佈景主題做微調了。

編輯器個各區塊代表

User Interface

參考上圖,你就可以知道要如何調整區塊的顏色了,請搭配 Theme Color Reference 一同服用(參考),這份清單非常的完整,也包含了詳細的解釋。

Reference