插件地址：

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

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

一、關(guān)于插件

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

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

• 支持 PC 本地瀏覽器訪問資訊內(nèi)容源站

• 支持快速預(yù)覽資訊全文

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

二、VSCode 體驗

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

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

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

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

三、插件開發(fā)

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

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

• 項目腳手架?

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

• VSCode UI 組件介紹及擴(kuò)展點?

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

• TreeView 詳細(xì)介紹，包括事件注冊、數(shù)據(jù)綁定?

  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

四、開發(fā)備忘

1. 語言方面

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

TypeScript 枚舉類，如何添加方法以及自定義構(gòu)造函數(shù)？似乎只能定義一個類，然后用靜態(tài)成員變量代替枚舉類型

// 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 (?.)，代碼出現(xiàn)了不少強(qiáng)制非空斷言 (!.)，比如?a?.b?.c?如果不想啰嗦?a && a.b && a.b.c || undefined?只好冒險寫?a!.b!.c. 在 JSON 反序列化中和寫測試用例時碰到。這里有個 Proposal，目前在 Stage3

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

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

2. 框架感受

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

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

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

五、Azure DevOps 嘗試

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

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

---

六、題外

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

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。