VSCode 修改編輯器配色，除了工作區(qū)的配色，你也可以修改編輯器內(nèi)代碼的顏色。這個(gè)就真的強(qiáng)大了，因?yàn)闉榇a書(shū)寫(xiě)語(yǔ)法文件和配色文件，都是非常復(fù)雜的，但是在 VS Code 中，你依然有非常簡(jiǎn)單的方式去完成部分修改。

Visual Studio Code(代碼編輯器) v1.83.1 32位 官方中文免費(fèi)綠色版

• 類型：編譯工具
• 大?。?/span>120MB
• 語(yǔ)言：簡(jiǎn)體中文
• 時(shí)間：2023-10-13

查看詳情

基本類型顏色修改

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

然后，在命令面板里運(yùn)行 “檢查T(mén)M作用域”（Inspect TM Scopes）命令。

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

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

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

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

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

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

你可以看到如下幾個(gè)選項(xiàng)：

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

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

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

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

TextMate 規(guī)則修改

在上面的建議列表里，還有個(gè) textMateRules選項(xiàng)，這個(gè)屬性是做什么用的呢？讓我們?cè)賮?lái)看下剛才在 JavaScript 文件里運(yùn)行 “Inspect TM Scopes” 看到的信息。

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

比如說(shuō)，你只想修改雙引號(hào)內(nèi)的字符串的顏色為紅色，其他的字符串都不修改，那么就需要修改 string.quoted.double.js 這個(gè)作用域的顏色。

在上面的動(dòng)圖里， 你可以看到：輸入引號(hào)，然后自動(dòng)補(bǔ)全填入了 TextMate 語(yǔ)法設(shè)置的模板，這之后，再將 scope 的值修改成了 string.quoted.double.js 。保存設(shè)置后，當(dāng)你再次打開(kāi)之前的 JavaScript 文件，

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

var b = 'hello'

單引號(hào)內(nèi)的 hello 依然是原來(lái)的顏色。

以上就是vscode代碼配色方案介紹，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。

相關(guān)推薦：

vscode怎么打開(kāi)word文檔? VScode查看word文檔的五種方法

VSCode如何更新? VSCode手動(dòng)更新與自動(dòng)更新的設(shè)置方法

VSCode中g(shù)it怎么開(kāi)啟智能提交? VSCode智能提交的設(shè)置方法

最新評(píng)論