VSCode能夠幫助很多有代碼編寫工作需求的小伙伴們快速的完成他們的工作,為他們提升大量的工作效率,是一款非常熱門的代碼編輯器軟件,不過在使用過程中,小編收到一些小伙伴的提問,說如何編輯器中修改代碼的配色,這樣可以使整段代碼看起來更清晰直觀,小編搜集了一下網上的資料,為大家帶來了以下這篇文章解讀這個問題。
VSCode代碼配色更換步驟一覽
首先,你要做的,就是知道你想要修改的代碼,是屬于什么基本類型。你可以將光標移動到某段你想要修改顏色的代碼上,比如將光標移動到一段字符串上,
然后,在命令面板里運行 “檢查Tm作用域”(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 文件時,就可以看到字符串顏色都變了。
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
這個作用域的顏色。在上面的動圖里, 你可以看到:輸入引號,然后自動補全填入了 TextMate 語法設置的模板,這之后,再將 scope 的值修改成了
string.quoted.double.js 。保存設置后,當你再次打開之前的 JavaScript 文件,“hello” 是紅色的,但是如果你輸入
var b = hello
單引號內的 hello 依然是原來的顏色。
好了,今天的分享就到這里了,想要學習更多軟件教程就來學組裝手機教程頻道,快快收藏吧,更多精彩不容錯過!