插件地址：

https://marketplace.visualstudio.com/items?itemName=bugbreeder.vscode-readhub
原文鏈接：

https://github.com/alex-yh99/vscode-readhub/blob/master/docs/develop-note.md

一、關于插件

在 VSCode 中快捷查閱科技動態、開發者資訊等 Readhub 內容，有效利用日常工作碎片時間，功能包含：

• 展示 Readhub 各板塊資訊及摘要信息

• 支持 PC 本地瀏覽器訪問資訊內容源站

• 支持快速預覽資訊全文

如對 JetBrains IDE（如 IntelliJ IDEA） 中使用 ReadHub 插件感興趣，請訪問?ReadHub IntelliJ Plugin

二、VSCode 體驗

隨著 VSCode 生態的日益繁榮，作為 IntelliJ 粉終于坐不住了，以圍觀的姿態開始試用，慢慢到如今高呼真香。花了周末學習寫了下插件，稍微記錄一下開發過程。

最初作為文本編輯器寫 Markdown，慢慢熟悉幾個快捷鍵之后，開始用來做開發工具。用作開發的歷程比預想順利，記憶了一個類似 IntelliJ 的 Search Everywhere 的快捷鍵，并裝上 VIM 插件感覺就夠了。如果用戶是個沉迷打磨工具的 Power User，插件市場有大把的玩具還可以拿來折騰。

VSCode 作為開發工具上，由于入職新廠時的全棧化轉型，開始學寫 React / Redux，這個過程切實體會到了 VSCode 的便利，各種示例項目 Git 簽出之后?npm i && code .，就能直接看代碼了。初學者之路，往往只是想看 API 用法示例，又不希望在 GitHub 頁面上走讀代碼文本，VSCode 此時的輕量優勢就體現出來了：打開項目不需要復雜的工程導入配置，基本夠用的 Code IntelliSense，且首次加載的建索引過程很快。

IntelliJ 的索引耗時，Java 程序員苦之久矣，社區有個 Nyan Progress bar 的插件，就是把進度條換成一只喵，為瞪眼等著索引建完的程序員減減壓。因此 VSCode 的輕量特性，非常利于學習 + 試錯的低代碼場景，即隨意打開 / 關閉多個項目，頻繁地在項目間切換焦點（當然 IntelliJ 也有 Power-Save 模式，調 VM 參數也能做到類似的秒速啟動，但還是要承認兩者的競爭優勢不同）

三、插件開發

動手寫插件，主要是出于進一步了解 VSCode 擴展性和 API Framework 的考慮。選擇資訊閱讀插件場景，一方面場景比較經典，不論 Android、WebUI 框架的學習示例項目中，除了寫 Hello World、ToDo List，就是寫一個 ListView 了。另一方面比較喜歡無碼科技出品的 ReadHub，之前也在 IntelliJ 上做了一個 ReadHub 插件，這次遷移到 VSCode 很多接口調用等等邏輯也就直接從 Kotlin 硬翻譯到 TypeScript 了。

插件技術體系涉及到插件生命周期管理、UI 定制、網絡請求、配置持久化等等，基本參考幾篇官方文檔和示例項目，就能寫出大概了，代碼詳見?vscode-readhub

• 項目腳手架?

  https://code.visualstudio.com/api/get-started/your-first-extension

• VSCode UI 組件介紹及擴展點?

  https://code.visualstudio.com/api/extension-capabilities/extending-workbench

• TreeView 詳細介紹，包括事件注冊、數據綁定?

  https://code.visualstudio.com/api/extension-guides/tree-view

• Command 定義?

  https://code.visualstudio.com/api/extension-guides/command

• Configuration API?

  https://code.visualstudio.com/api/references/contribution-points#contributes.configuration

• 測試?

  https://code.visualstudio.com/api/working-with-extensions/testing-extension

四、開發備忘

1. 語言方面

TypeScript 現學現用，不過由于 Google / SO 上問題和解答都很多，基本沒有太多阻塞的問題；一些零散的點記錄：

TypeScript 枚舉類，如何添加方法以及自定義構造函數？似乎只能定義一個類，然后用靜態成員變量代替枚舉類型

// Invalid
enum Category {
TOPIC('topic'), NEWS('news')
constructor(nameKey: string) {
}
}

// Workaround
class Category {
public static TOPIC = new Category("topic");
public static NEWS = new Category("news");
constructor(public nameKey: string = "") { }
}

StrickNullChecks 可以讓 IDE 更好做空檢查，不過沒有類似 Kotlin 的 Safe calls (?.)，代碼出現了不少強制非空斷言 (!.)，比如?a?.b?.c?如果不想啰嗦?a && a.b && a.b.c || undefined?只好冒險寫?a!.b!.c. 在 JSON 反序列化中和寫測試用例時碰到。這里有個 Proposal，目前在 Stage3

聯合類型（Union Types）private myDate: Date | undefined?在 Nullable 變量的類型聲明比較方便

TypeScript 類型斷言只是編譯時的，沒有運行時類型檢查；所以 Type casting 之后訪問對象屬性時，還要檢查一下

2. 框架感受

VSCode 的 UI 擴展能力實在是太有限，或者說太克制了。比如一個 TreeView，無法定制 Renderer，這導致基本上所有插件使用 TreeView 做出來的視圖都差不多一個樣

WebView 很便利，至少比使用 JavaFX WebView 和 Swing 組件交互簡單很多；復雜插件交互可以考慮用 WebView 實現

涉及并發或重度計算的場景，可能需要剝離出插件邏輯來實現了；目前看到 VSC Extension 主要關注的是 UI 和 Language 層面的擴展，復雜的任務集成型場景可能受限于框架能力

五、Azure DevOps 嘗試

試了一下 Azure Pipelines 做 CI，體驗也是很順暢，Azure 注冊直接用 GitHub Account，創建 Organization 并導入 GitHub 工程。如果包含了?.azure-pipelines.yml?可以智能識別模板，并且有 YAML Live Editor 直接編輯及觸發 Job.\

CI 效率不錯，Azure DevOps 的頁面設計個人還是比較喜歡的，視覺鏈路非常清晰，不像很多面向開發者的產品把一堆有的沒的都展示出來。

---

六、題外

有 Azure DevOps + GitHub 的加持，VSCode Online 似乎有著一統未來云端編程界面的趨勢。目前看起來能打的只有 JetBrains + Google 的組合了，什么時候 JetBrains 能丟棄 TeamCity、Upsource 等明顯掉隊且追趕無望的 PaaS 業務，把 IntelliJ Platform 搬到到云端，同時和 GCP 深度合作、把整個 JVM 生態的開發工具鏈云化，估計才能有跟微軟一較高下的可能吧。

JetBrains 起家于2000年左右給 JBuilder 做插件，彼時叫 IntelliJ Renamer，那時候「重構」Refactor?一詞剛被 Martin Fowler 提出沒多久，還算是個 Buzzword，跟今天程序員言必稱 FaaS、Serverless 化一樣。JBuilder 是 Borland 搞的 Java IDE，今天的高齡程序員們在校用的 Turbo C++ 同是這家公司出品的。

之后風云變幻，Borland 掉隊，傳奇人物 Anders Hejlsberg 轉投微軟主導了 C# 和今天的 TypeScript（P.S. 推薦圖書《Borland 傳奇》）；整個歷史進程 JetBrains 是親歷者，而今天有點歷史重演的感覺。

總結

以上是生活随笔為你收集整理的VS Code 摸鱼插件开发小记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。