[VSCode] Themes 子站點上線了

Visual Studio Code (以下簡稱 VSCode) 現在也是我日常使用的編輯器之一（其他還包括 PyCharm 和 Sublime Text）。和 PyCharm 相比，VSCode 更輕便一些，比 Sublime 則有更多的程式碼級別輔助功能，這兩年發展勢頭很猛，算是一個比較中庸的選擇吧。當然，重度的專案開發我依然會用 PyCharm。

VSCode 也有一個繁榮的外掛市場，支援包括樣式主題在內的眾多擴充套件。相信很多朋友會嘗試換個主題來打造更適合個人口味的工作環境。但官方外掛市場有個問題：樣式主題的外掛只能一個一個開啟來預覽使用效果，並且寄希望於作者提供了介面截圖（雖然絕大多數作者會這麼做），對於使用者來說並不方便。因此我動了這個念頭，希望能夠自動呈現各個主題的顯示效果，以方便使用者選擇。這也就是該網站的由來。

在動手開發之前，我搜索了一下，發現已經有人做過類似的東西了： vscodethemes 。該網站設計很簡潔，介面也比較美觀，有興趣的同學也可以前去圍觀：

該網站也公開了原始碼，程式是用 Nodejs 寫的。鑑於 VSCode 也基於 Nodejs，這是個無可厚非的選擇。不過，作為 Python 開發者，我還是希望自己親自嘗試一下這個過程。正好春節期間有點時間，於是我基於 Python 和 Flask 實現了自己版本的主題網站，並部署在個人站點上。感興趣的朋友請點選連結 訪問。該站點目前提供顯示顯示外掛市場趨勢的 Dashboard 和詳情查詢頁面，每個頁面都包含各個主題的即時預覽，如下：

當然，介面還沒有仔細優化，看上去沒有 vscodethemes 那樣漂亮。不過本站提供的外掛資訊和搜尋選項要比 vscodethemes 更加豐富翔實一些。本站的原始碼同時也開源在 Github 上。

如果你希望進一步瞭解技術細節的話，本網站的主要開發工作量集中在兩個部分。首先是從 VSCode 外掛市場獲取外掛資訊和詳情。VSCode 是和 Visual Studio 共用相同的外掛市場，但是有一個獨立的 分割槽 。目前看起來該市場並沒有公開的 API 介面可用（也可能是我沒有找到），所以網路抓取部分是自己反向工程得到的。有趣的是，寫完自己的網站，我去簡單查看了一下 vscodethemes 的實現，發現他和我是基本相同的做法，只是具體的查詢引數略有不同。由於這些引數並沒有公開文件可以參考，含義也不太明確，所以我們只能憑猜測，不過它們確實都是可以工作的。

另一個問題是關於外掛內容的解析。VSCode 外掛總體上是一個 .vsix 檔案，和 Visual Studio 一致，其中的主要內容是 JSON 檔案，這個解析起來應該是毫無問題，不過實際處理的時候，我才發現很多檔案包含了註釋和多餘的末尾逗號，嚴格按照規範來說的話，這些都不是正規的 JSON，用 Python 的 json 包解析也會出錯。所以我不得不自己寫了一些程式碼來清理這些 JSON 檔案，才能正常讀取。另外， VSCode 主題的格式參考了 TextMate 的語法，許多外掛也是直接使用了 TextMate 的檔案格式（.tmTheme）。vscodetheme 似乎是引用了一個現成的 Nodejs 包來讀取 .tmTheme 檔案，但我用 Python 的話就需要自己動手了。好在 .tmTheme 檔案解析起來也不算很複雜，只是轉換的工作比較多，還有一些邊界情況需要處理。這也是本程式目前為止花費時間最多的部分了。

本網站的開發到今天正式上線 了，歡迎感興趣的朋友訪問，也希望對想要換主題的同學有所幫助。如果你有意見或建議的話，也歡迎給我來信或者在 Github 上留下 issue。