在 Visual Studio Code 為新語言增加語法標示 (Syntax Highlighting)

Visual Studio Code 寫程式很好用, 但如果遇到特殊或是很新的語言, 就不見得有前人製作好的套件可以幫程式碼標示語法, 這時候就只好自己動手做了。這得自行設計好對應該語言的語法規則套件, 相關說明可參考 Visual Studio Code 的文件。大致步驟如下：

1. 撰寫該語言的語法規則檔
   
2. 以語法規則檔為基礎建立該語言的擴充功能 (extension)
   
3. 將建立好的擴充功能加入 Visual Studio Code 後重新啟動 Visual Studio Code
   
4. 開啟該語言的檔案或手動選用該語言擴充功能, 就可以看到語法標示發揮效用

首先, Visual Studio Code 沿用了 Mac 上知名的文字編輯器 TextMate 的語法規則檔格式，名稱為 tmLanguage, 可參考 TextMate 網站上的說明。它其實是依循 Properties List Format 格式的 XML 檔, TextMate 本身有提供工具可以編修 tmLanguage 檔, 如果要手工編輯 XML 檔, 我想大部分的人都會卻步, 還好有善心人士設計好工具可以讓我們用 JSON 或是 YAML 格式來編寫語法規則。由於 TextMate 工具與網頁上的說明範例跟 JSON 較相近, 因此我建議採用 JSON, 大家應該可以很容易將 TextMate 網頁上的範例轉換成 JSON 格式。 使用 JSON 寫好語法規格後, 請先安裝 Visual Studio Code 上的 TextMate Language 擴充功能 (extension),它提供有從 JSON 轉成 tmLanguage 格式的功能：

轉換結果會建立一個與你的 JSON 檔同名的文檔, 但附檔名是 tmLanguage, 這個檔案才是符合 TextMate 的語法規則檔, 存檔後就可以進行下一步。 Visual Studio Code 中的語法功能必須建立成擴充功能, 微軟已經幫大家準備好工具, 可以從 tmLanguage 檔自動設計好擴充功能, 這個工具叫做 'code'-Yeoman Generator, 請依照網頁上的說明安裝 (它需要 node.js 以及 npm 套件管理程式)。安裝完成後即可以下達 yo code 指令建立語言擴充套件：

選取『New Language Support』就會進入選項, 你必須依序回答 tmLanguage 檔的位置、此種語言的副檔名、在 Visual Studio Code 中該語言的識別名稱等等，完成後會以你指定的識別名稱建立一個新資料夾, 裡頭就是它幫你設計好的語言擴充功能。 接著, 只要把該資料夾複製到你的 Visual Studio Code 擴充功能資料夾下即可, 一般就是 C:\Users\使用者名稱\.vscode\extensions, 重新開啟 Visual Studio Code 就可以讓語言擴充套件生效了。像是以下就是我建立的新語言擴充功能, 叫做 FLAG-TXT, 專門用來顯示我服務的公司制式文字檔稿件的格式：

在右下角可以看到目前套用的語言名稱為 FLAG-TXT,畫面中也可以看到小節、中標、圖片標示處以及內文中用全行括號標示的加粗文字都會以不同顏色及樣式顯示。 完成了語言法標示後, 你可能還需要為該種語言加上 auto completion 以及 code snippets, 使用起來就會更便利。

附註：TextMate 的語法規則檔不只 Visual Studio Code 使用,鼎鼎大名的 Sublime Text 以及 Atom 也都是使用同一格式來描述語法的規則, 儼然成為文字編輯器界的標準了。