改變 Vscode 的程式碼顏色

歡迎各位贊助喔 👍👍👍

簡介

大家有沒有覺得 vscode 預設的程式碼顏色很醜呢?

我這篇就來教大家怎麼改程式碼顏色 😎

還沒有安裝 vscode 的夥伴可以看這篇:

Vscode --- 初探篇

更改顏色

大家先選擇一個工作目錄，還不知道怎麼做的人，可以先參考這篇:

Vscode + Python --- 開發環境建置 (Windows)

接著按下 "ctrl + shift + P"，你應該會看到一個有搜尋欄的視窗出現，在搜尋欄輸入 "inspect"，如下圖:

接著點上圖中的 "Inspect Editor Tokens ..."，再來會先現一個視窗，接著用滑鼠左鍵隨意點你的程式碼的任意地方，視窗中就會顯示那段程式碼目前的前景顏色和它的類型名稱，如下圖的紅箭頭

在上圖中的程式碼是 python 的，然後我的滑鼠左鍵是點擊 "print" 的部分，大家可以看到我的 print 目前的顏色是 "DCDCAA" (16進制的顏色代碼)，然後它的類型名稱叫做 "entity.name.function"，大家要記好這個名稱，因為等下必須透過這名稱改變程式碼顏色

接著再按下一次 "ctrl + shift + P"，在搜尋欄中搜尋 "settings"，然後選擇 "Open User Settings (JSON)"，如下圖

點完後，你會發現有個叫做 "settings.json" 的檔案打開了，接著在檔案中輸入以下:

(如果你的 settings.json 裡面已有以下這個就不用輸入了)

"editor.tokenColorCustomizations": {        
	"textMateRules": [
	]
},

如圖:

接著在 "textMateRules" 裡面打上剛剛查到的程式碼的類型名稱和你想要的顏色，格式和圖如下:

{
  "scope": "程式碼類型名稱",
  "settings": {
  	"foreground": "#顏色",
	}
},

上圖中，我把屬於 "entity.name.function" 這個類型的程式碼都換成綠色了，下圖是改變後的成果

步驟總結

先用 "Inspect Editor tokens" 查你要改變的程式碼的類型名稱，然後去 "settings.json" 修改即可

結語

大家應該都學會了吧 😄😄😄