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 檔傳給你的朋友, 分享你的配色。