VSCode能夠幫助很多有代碼編寫工作需求的小伙伴們快速的完成他們的工作 , 為他們提升大量的工作效率 , 是一款非常熱門的代碼編輯器軟件 , 不過在使用過程中 , 小編收到一些小伙伴的提問 , 說如何編輯器中修改代碼的配色 , 這樣可以使整段代碼看起來更清晰直觀 , 小編搜集了一下網(wǎng)上的資料 , 為大家?guī)砹艘韵逻@篇文章解讀這個問題 。

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

然后 , 在命令面板里運行 “檢查TM作用域”(Inspect TM Scopes)命令 。

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

比如在上圖里 , 這個窗口呈現(xiàn)了以下信息:
當前的 token 是 hello , 它的類型是 String;
它的顏色是 #ce9178ff , 背景色是 #1e1e1eff;
它所屬的語法作用域由內(nèi)而外分別是 string.quoted.double.js , meta.var.expr.js , source.js 。
如果你想要將所有字符串都變成紅色 , 那么就需要修改String這個作用域的顏色 。下面 , 你可以再次打開個人設置(JSON) , 輸入 editor.tokenColorCustomizations;

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

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

你可以看到如下幾個選項:
comments 代表著注釋的顏色;
functions 代表著函數(shù)的寒色;
keywords 代表著關鍵字的顏色;
numbers 代表著數(shù)字的顏色;
strings 代表著字符串的顏色;
types 代表著類型的顏色;
variables 代表著變量的顏色;
textMateRules 我下面會再介紹 。
為了修改字符串的顏色 , 你只需選擇 strings 即可 , 然后將其修改為紅色 , 也就是:
"editor.tokenColorCustomizations": { "strings": "#FF0000", }
保存設置后 , 你再回到剛才的 JavaScript 文件時 , 就可以看到字符串顏色都變了 。

TextMate 規(guī)則修改
在上面的建議列表里 , 還有個 textMateRules選項 , 這個屬性是做什么用的呢?讓我們再來看下剛才在 JavaScript 文件里運行 “Inspect TM Scopes” 看到的信息 。

在這個窗口的最下方 , 就是 TextMate 的語法規(guī)則作用域了 。hello 這個詞所處的 TextMate 語法作用域由內(nèi)而外分別是 string.quoted.double.js , meta.var.expr.js , source.js 。VS Code 的主題插件在配置編輯器內(nèi)代碼的顏色時 , 就是針對這些作用域進行設置的 。而你要修改某個作用域所對應的顏色 , 就是在設置中修改 textMateRules。
推薦閱讀
- 我的世界怎么運輸村民
- 微信支付指紋怎么取消
- 植物大戰(zhàn)僵尸不能全屏怎么辦
- 離婚后不付撫養(yǎng)費該怎么辦
- 馬蹄怎么吃
- 怎么知道好友的位置
- 錦鯉臥缸怎么回事
- 家庭紅豆面包是怎么烤的 紅豆面包的做法
- 微博上傳頭像怎么做
- 冬天容易起靜電怎么辦
