VSCode 是一個可高度客製化的編輯器, 如果你想配出一套自己專屬的語法標色, 步驟並不難, 可參考這一篇文章, 本文僅針對最單純的語法標色做說明。
預先定義好的語法類別
VSCode 裡預先定義了 variables, numbers, functions, keywords, types, comments, strings 幾種字符 (token) 類別, 最簡單的方式就是針對這些類別設定顏色, 以底下原本 VSCode 預設淺色顏色主題為例, 註解原本是綠色的：
如果你修改設定檔, 加上 editor.tokenColorCustomizations 屬性, 就可以在其中針對字符類別設定顏色, 例如底下就將註解的顏色改為紅色：
{
// customize token color
"editor.tokenColorCustomizations": {
"comments": "#FF0000"
}
}
存檔後就會發現註解變色了：
如果你也想變更字體樣式, 也可以將設定值改成一個物件, 透過 fontStyle 或是 foreground 屬性自訂樣式或顏色, 例如以下就將字串改為粗體的深綠色：
{
// customize token color
"editor.tokenColorCustomizations": {
"comments": "#FF0000",
"strings": {
"foreground": "#009900",
"fontStyle": "bold"
}
}
}
修改存檔後, 就會看到字串不但變綠, 也變粗體了：
細部語法元素
你可能會發現只用預先定義的字符類別有些地方的顏色改不到, 例如範例中 JSON 物件的屬性名稱看起來很像是字串, 它會跟著字串變粗體, 但是顏色卻不會變。
如果想要變更這類字符的顏色, 必須藉助 TextMate 的語法規則, 不過你並不一定需要瞭解這個進階主題, 因為在 VSCode 中提供有現成的工具可以讓你查詢編輯內容中個別元素的 TextMate 語法規則名稱。
請在命令區執行 Developer: Inspect Editor Tokens and Scopes 命令：
然後將游標移到你想查詢的地方, 就會出現該字符所屬的語法規則名稱：
像是上例我們就看到原來 JSON 的物件屬性歸屬於好幾種語法規則, 其中文字顏色 foreground 對應的是 support.type.property-name.json, 接著就試試修改這個語法規則項目的設定：
{
// customize token color
"editor.tokenColorCustomizations": {
"comments": "#FF0000",
"strings": {
"foreground": "#009900",
"fontStyle": "bold",
},
"textMateRules": [
{
"scope": "support.type.property-name.json",
"settings": {
"foreground": "#a9a9a9"
}
}
]
}
}
TextMate 語法規則的設定是一個陣列, 陣列內每個元素就是一個語法規則項目的設定, scope 就是語法項目名稱, 你也可以使用陣列套用到相同設定套用到多個項目上；settings 就是設定顏色或樣式。上述設定就會讓 JSON 物件的屬性名稱以灰色顯示：
利用以上的方法, 就可以客製化一套專屬的語法標色。
將標色製作成延伸套件
剛剛的方法會把顏色設定寫在設定檔中, 所以即使更換到別的色彩布景主題, 也一樣會受設定檔中的顏色影響, 最好的方法就是將設計好的配色製作成顏色布景主題的延伸套件, 這樣不但可以利用設定檔切換, 也可以分享給別人使用。
產生顏色布景主題檔
要製作顏色布景主題的延伸套件, 第一步就是利用 Developer: Generate Color Theme From Current Settings 命令：
它會幫你產生一個這樣的 JSON 檔, 內容就是融合你的設定以及原本顏色布景主題的結果：
這個檔案的內容稍後會用到。
建立延伸模組專案
要製作延伸模組, 可以使用 yo 工具, 你必須先安裝 node 開發工具, 然後透過以下指令安裝：
npm install -g yo generator-code
安裝完後即可透過以下指令產生延伸模組的專案 , 個別選項可依照下列示範選取：
# yo code
_-----_ ╭──────────────────────────╮
| | │ Welcome to the Visual │
|--(o)--| │ Studio Code Extension │
`---------´ │ generator! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `
? What type of extension do you want to create? New
Color Theme
? Do you want to import or convert an existing
TextMate color theme? No, start fresh
? What's the name of your extension? MyTheme
? What's the identifier of your extension? mytheme
? What's the description of your extension? My Theme
? What's the name of your theme shown to the user?
MyTheme
? Select a base theme: Light
? Initialize a git repository? Yes
Writing in D:\temp\mytheme...
...
? Do you want to open the new folder with Visual
Studio Code? (Use arrow keys)
> Open with `code`
Skip
最後可選用 VS code 開啟建立好的專案檔, 然後開啟專案中 themes\MyTheme-color-theme.json 檔案, 刪除檔案內的 colors 與 tokenColors 兩個屬性, 用前一步驟產生的顏色布景檔內容替換。
存檔後可以按 F5 測試, 就會發現顏色布景延伸模組生效了。
編譯專案檔
確認延伸模組運作無誤後, 就可以再利用 vsce 工具編譯成可匯入的 vsix 檔。首先安裝 vsce 工具：
# npm install -g vsce
接著切換到專案檔資料夾內執行以下命令：
# vsce package
WARNING A 'repository' field is missing from the 'package.json' manifest file.
Do you want to continue? [y/N] y
WARNING LICENSE.md, LICENSE.txt or LICENSE not found
Do you want to continue? [y/N] y
DONE Packaged: D:\temp\mytheme\mytheme-0.0.1.vsix (6 files, 9.24KB)
由於我們並不打算將這個延伸模組上架到 Market 中, 因此像是授權條款等細節都先略過, 最後會產生一個 vsix 檔, 這個檔案就可以安裝到 VS Code。
安裝延伸模組
為了要看出安裝延伸模組的效果, 請先把設定檔中之前加上的標色設定刪除, 然後切換到延伸模組頁次後執行從 VSIX 安裝：
選取剛剛產生的 VSIX 檔, 看到完成安裝的訊息：
就可以切換顏色布景主題到剛剛安裝的延伸模組：
也可以隨時切換不同的顏色布景主題, 你也可以將這個 VSIX 檔傳給你的朋友, 分享你的配色。
Top comments (0)