如何深度定製自己的主題

轉自https://github.com/liwei0526vip/vscode/blob/master/28%20!%20%E5%A6%82%E4%BD%95%E6%B7%B1%E5%BA%A6%E5%AE%9A%E5%88%B6%E8%87%AA%E5%B7%B1%E7%9A%84%E4%B8%BB%E9%A2%98%EF%BC%9F.md

固定 UI 視圖

首先我們可以做的，就是持久化 UI 視圖，這句話是什麼意思呢？VS Code 的各種 “切換 xyz 視圖可見性” 的命令，它最終都是將這個配置寫到了你的個人設置中。比如說，我們運行 “切換狀態欄可見性”（Toggle Status Bar Visibility），然後再打開個人設置 （JSON），我們可以在設置中找到這樣一條：

"workbench.statusBar.visible": false,

這個配置也非常好理解，它是表達：statusBar（狀態欄）並不是 visibile （可見）的。

再比如，你可以將側邊欄顯示在右側，像 Visual Studio 裏那樣，你可以運行 “切換邊欄位置”（Toggle Side Bar Position）。

切換側邊欄位置

完成這樣的命令後，個人設置裏就會多出下面這條設置：

"workbench.sideBar.location": "right"

還有就是搜索視圖的位置，你可以運行“切換搜索視圖位置”命令。

切換搜索視圖位置

VS Code 就會在設置裏添加如下代碼：

"search.location": "panel"

相信通過這三個例子，你就可以瞭解如何在你的不同設備之間共享 UI 設置了。通過設置來控制 UI 最棒的地方在於，你可以爲不同的項目指定不同的設置。比如你可以在自己的個人設置裏，將狀態欄、側邊欄等都隱藏，這樣當你打開一個新窗口時，或者只是編輯單個文件時，你不需要用到它們，自然也就不需要顯示它們。而當你打開了某個項目時，可以由這個項目的情況來決定是否要將它們打開。比如說這個項目用了 Git，那麼將側邊欄展示出來可能會更方便一些。

修改工作區配色

持久化 UI 視圖設置是 VS Code 定製的第一步，而第二步就是修改工作區裏各個視圖的配色了。相信你早就在插件市場下載過各種主題然後使用了，但其實自己修改主題顏色也非常簡單，甚至不要求你有任何的編程知識。

首先，運行命令 “打開設置（JSON）”去打開個人設置。

然後你在編輯器裏輸入 “workbench.colorCustomizations"，這時候，VS Code 的自動補全就會給你兩個提示項了，第一個是：

{
        "statusBar.background": "#666666",
        "panel.background": "#555555",
        "sideBar.background": "#444444"
}

第二個是 {} 。當你選擇第一個提示項，此時這個配置是這樣的：

"workbench.colorCustomizations": {
        "statusBar.background": "#666666",
        "panel.background": "#555555",
        "sideBar.background": "#444444"
}

workbench.colorCustomizations 有很多屬性，它們的鍵（key）就是代表着各個組件的屬性，在示例裏，它們是：

• statusBar.background，狀態欄背景色
• panel.background，面板背景色
• sideBar.background，側邊欄背景色

而它們的值則是顏色的 HEX 值。此時當你保存文件後，你會發現 VS Code 發生了變化。

修改工作區顏色

沒錯，上面提到的這三個組件的背景色都立刻發生了變化。而你在設置裏添加的這三組鍵值（key-value pair），跟主題插件裏的書寫方式一模一樣。

已經知道了去哪裏書寫這些顏色配置，下面就是要知道有哪些可以修改的值了。最簡單的方式當然是通過自動補全。

顏色修改自動補全

VS Code 自動補全列表提供了所有可以修改的顏色，而如果你希望對此有個全的瞭解再進行書寫，你也可以閱讀官方文檔。

修改編輯器配色

除了工作區的配色，你也可以修改編輯器內代碼的顏色。這個就真的強大了，因爲爲代碼書寫語法文件和配色文件，都是非常複雜的，但是在 VS Code 中，你依然有非常簡單的方式去完成部分修改。

1、基本類型顏色修改

首先，你要做的，就是知道你想要修改的代碼，是屬於什麼基本類型。你可以將光標移動到某段你想要修改顏色的代碼上，比如將光標移動到一段字符串上，

然後，在命令面板裏運行 “檢查TM作用域”（Inspect TM Scopes）命令。

Inspect TM Scopes

此時，編輯器中出現一個新的懸浮窗。這個窗口裏呈現的，就是當前這個代碼片段所對應的語言、語法類型以及當前的顏色和背景色等。

語法信息

比如在上圖裏，這個窗口呈現了以下信息：

• 當前的 token 是 hello，它的類型是 String；
• 它的顏色是 #ce9178ff ，背景色是 #1e1e1eff；
• 它所屬的語法作用域由內而外分別是 string.quoted.double.js，meta.var.expr.js，source.js。

如果你想要將所有字符串都變成紅色，那麼就需要修改String這個作用域的顏色。下面，你可以再次打開個人設置（JSON），輸入 editor.tokenColorCustomizations；

修改編輯器內代碼顏色

然後把光標放入這個 JSON 對象中，按下 “Ctrl + Space” 觸發建議列表，就能夠看到如下的建議。

編輯器顏色修改自動補全

建議列表中首先出現的，就是你可以在 VS Code 中使用的所有的主題的名字。通過選擇它們，你可以只覆蓋某個主題中的某個顏色。這裏你可以滾動這個列表，看看下面還有別的什麼建議。

你可以看到如下幾個選項：

• comments 代表着註釋的顏色；
• functions 代表着函數的寒色；
• keywords 代表着關鍵字的顏色；
• numbers 代表着數字的顏色；
• strings 代表着字符串的顏色；
• types 代表着類型的顏色；
• variables 代表着變量的顏色；
• textMateRules 我下面會再介紹。

爲了修改字符串的顏色，你只需選擇 strings 即可，然後將其修改爲紅色，也就是：

    "editor.tokenColorCustomizations": {
        "strings": "#FF0000",
    }

保存設置後，你再回到剛纔的 JavaScript 文件時，就可以看到字符串顏色都變了。

字符串顏色修改爲紅色

2、TextMate 規則修改

在上面的建議列表裏，還有個 textMateRules選項，這個屬性是做什麼用的呢？讓我們再來看下剛纔在 JavaScript 文件裏運行 “Inspect TM Scopes” 看到的信息。

語法信息

在這個窗口的最下方，就是 TextMate 的語法規則作用域了。hello 這個詞所處的 TextMate 語法作用域由內而外分別是 string.quoted.double.js，meta.var.expr.js，source.js。VS Code 的主題插件在配置編輯器內代碼的顏色時，就是針對這些作用域進行設置的。而你要修改某個作用域所對應的顏色，就是在設置中修改 textMateRules 。

比如說，你只想修改雙引號內的字符串的顏色爲紅色，其他的字符串都不修改，那麼就需要修改 string.quoted.double.js 這個作用域的顏色。

textMateRules 模板

在上面的動圖裏， 你可以看到：輸入引號，然後自動補全填入了 TextMate 語法設置的模板，這之後，再將 scope 的值修改成了 string.quoted.double.js 。保存設置後，當你再次打開之前的 JavaScript 文件，

雙引號內字符串爲紅色

“hello” 是紅色的，但是如果你輸入

var b = 'hello'

單引號內的 hello 依然是原來的顏色。

基於某個主題修改配色

上面我們提到了，當你自定義編輯器內配色時，自動補全給你提示了所有已經安裝的主題。

編輯器顏色修改自動補全

通過選擇這些主題，你可以只針對它們做顏色修改，而不影響其他的主題的顏色。工作區的顏色修改也是如此。比如說，你想修改 Monokai 的某個顏色定義，那麼你可以這麼寫：

 "workbench.colorCustomizations": {
        "[Monokai]": {
            "statusBar.background": "#666666",
            "panel.background": "#555555",
            "sideBar.background": "#444444"
        },
 }

而相應的編輯器顏色修改則是：

"editor.tokenColorCustomizations": {
        "[Monokai]": {
            "strings": "#FF0000"
        }
}

是不是非常方便呢？

取色器 Color Picker

在前面介紹 HTML、CSS 的功能時，我介紹過可以在 HTML 和 CSS 中使用取色器來修改顏色。同樣的，在 JSON 文件中，你也可以使用取色器來修改。

使用取色器修改顏色

在上圖中，我因爲開啓了文件自動保存，設置文件會自動保存然後觸發顏色的更新，所以當我使用取色器修改顏色後，稍等片刻，就能看到這個顏色在編輯器中的效果了。

小結

好了，以上就是我們今天內容的全部了。要說我最喜歡今天內容的哪個部分，那就是在設置中使用取色器和自動更新了，有了它們，我可以修改大部分 VS Code 組件的顏色，也可以修改編輯器內代碼的顏色，同時還能實時地預覽，可以說不會編程也能夠輕鬆自定義 VS Code 的主題了。你是不是也想動手試一試了呢？