vscode 修改編輯器配色

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

基本類型顏色修改

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

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

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

比如在上圖里，這個窗口呈現(xiàn)了以下信息：

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

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

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

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

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

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

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

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

JSON

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

TextMate 規(guī)則修改

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

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

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

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

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

var b = 'hello'

JavaScript

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