###### tags: `vscode`

# VSCode 自訂語法標色

VSCode 是一個可高度客製化的編輯器, 如果你想配出一套自己專屬的語法標色, 步驟並不難, 可參考[這一篇文章](https://code.visualstudio.com/docs/getstarted/themes#_customizing-a-color-theme), 本文僅針對最單純的語法標色做說明。

## 預先定義好的語法類別

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](https://macromates.com/) 的語法規則, 不過你並不一定需要瞭解這個進階主題, 因為在 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 工具](https://code.visualstudio.com/api/extension-guides/color-theme#create-a-new-color-theme), 你必須先安裝 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` 兩個屬性, 用前一步驟產生的顏色布景檔內容替換。

存檔後可以按 <kbd>F5</kbd> 測試, 就會發現顏色布景延伸模組生效了。

### 編譯專案檔

確認延伸模組運作無誤後, 就可以再利用 [vsce](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) 工具編譯成可匯入的 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 檔傳給你的朋友, 分享你的配色。