我編寫 33 個 VSCode 擴展的緣由以及管理擴展的經驗

簡評：使用工具的同時本身創造一些工具或擴展，是一件很棒的事情。

如下「我」指原做者 Fabio

你們好，我叫 Fabio，是一位自學成才的開發人員，熱衷於開源和受權。我也喜歡本身製做工具，天然而然地。我爲經常使用的 VSCode 程序編寫了不少擴展。

在開發和管理 VSCode 擴展以及談論我創造的全部擴展的同時，我想與你們再分享一些個人工做流程。

在這裏我將介紹我創造的許多工具和擴展，所以不管你是要開始開發擴展，仍是想要找到很酷的新擴展，或者只是須要管理不少存儲庫，本文保證會有你感興趣的內容。

編寫一個擴展

我喜歡生產力和自動化，因此我開始新項目的方式很是精簡。

工具

我編寫了一個名爲 template 的開源項目，它能夠基於模板快速建立新項目，很是簡單：

1. 它須要一個文件夾做爲輸入（「模板」）。
2. 它用 handlebars 處理全部文件，要求你爲模板中找到的佔位符提供值（即{{name}}）。
3. 它輸出一個替換了全部佔位符的新文件夾。

我瞭解過 yeoman，但它對於個人使用狀況來講彷佛太複雜了。我用過 khaos，可是它再也不維護，而且它不會自動更新模板，總不能在每次我想用的時候都手動更新，因此我沒有使用它。

模板

接下來我使用個人 template-vscode-extension 模板啓動一個新的 VSCode 擴展。

如今我有一個工做的 Hello-World-ish 擴展。該模板包含許多我常用的輔助函數：它支持從.vscode文件夾加載自定義配置文件 ，能夠自動註冊命令，還能夠根據活動文件推斷當前根等。

若是我能回到過去，可能會把全部這些輔助函數放到一個獨立的vscode-utils包中，而不是在全部擴展中複製它們，不幸的是一開始我不知道將進行 10 次擴展，如今去更新它們將須要至關多的時間。

若是你在考慮編寫 VSCode 擴展，或許會想以個人擴展爲基礎，我建議你製做本身的模板。

文檔

我在開發擴展時老是打開 VSCode 的文檔。雖然文檔很長，要找到你須要的 API 並非那麼簡單明瞭，可是隻要快速閱讀一下很快你就會熟悉起來。總的來講，我對能找到的 API 至關滿意。

擴展

無論你信不信，我所作的一些擴展實際上對我開發其餘擴展有必定幫助，稍後會對此進行進一步的討論。

個人擴展

正如我所說的，我喜歡生產力，因此個人大部分擴展都與生產力相關的。我儘可能不要過多地重複發明輪子，確保功能在擴展之間良好分離，彼此之間良好配合。

不管好壞，我發現擴展頗有趣，而且不乏能夠自動化的東西，這就是爲何在第 1 個擴展以後我又作了第 2 個，第 3 個......和第 33 個！

點擊如下每一個擴展程序的超鏈能夠進入原頁面，獲取到更多詳細信息和屏幕截圖。

用來編寫擴展程序的擴展

二、Debug Launcher：無需定義任何任務或啓動配置便可從終端開始調試。我不想用重複的啓動配置和任務來混亂個人存儲庫。VSCode 真的應該直接支持從終端啓動調試器，對此我提了一個 issue。

從終端啓動調試器

二、StatusBar Debugger：將調試器添加到狀態欄，比默認浮動調試器干擾更少。默認工具欄的使用體驗很糟糕（相關 issue），若是 VSCode 能公開調試狀態，那這個擴展可能會好得多。

三、Install .VSIX：直接從資源管理器安裝擴展，右鍵單擊便可。由於如今安裝 .vsix 的體驗也很糟糕（相關 issue）。

四、Bump：壓縮項目的版本並更新更改日誌。有意見但可配置。每一個可敬的擴展都須要一個更新日誌，但這並不意味着你必須手動編寫一個。這個擴展是個人最愛之一，我可能會製做一個CLI版本，但願未來它也能夠爲我製做 GitHub 版本。

五、Optimize Images：使用你最喜歡的應用程序優化項目中的一個或全部圖像。只需一個命令便可完成。

管理項目

六、Projects+：管理項目的擴展。功能豐富，可自定義，自動查找你的項目。Project Manager 是這種類型中最經常使用的擴展，但我有 100 多個存儲庫，包括一個無限可嵌套的組，我須要正確的工具來管理它們。

Projects+ 可定製的快速選擇

Projects+ 可定製的快速選擇

管理待辦事項

七、Todo +：輕鬆管理待辦事項列表。功能強大，易於使用和可定製。若是你不須要對TODO文件進行語法高亮，可能只想要內置的基本高亮顯示，那麼能夠查看 Todo Tree。

Todo + 語法高亮和項目級統計

八、Highlight：基於正則表達式的高級文本高亮顯示。適用於待機，註釋等。大多數人只是使用 TODO Highlight，但個人方式更通用，更強大，也可能更快。

九、Markdown Todo：輕鬆管理 markdown 文件中的待辦事項列表。沒什麼特別的，可是它可讓一些 Todo + 的快捷方式基本上能夠在 Markdown 文件中使用。

十、Projects + Todo +：鳥瞰你的項目，將全部的 ToDo 文件聚合爲一個。若是你使用 Projects + 來管理項目，且使用 Todo + 來管理待辦事項，那麼如今能夠將全部（或部分）項目中的全部待辦事項彙總到一個文件中。

在...中打開...

在不一樣的應用程序/網站之間快速切換對我來講很重要，這就是我作了不少Open in...擴展的緣由。

十一、Open in Application：在默認的應用程序或你想要的應用程序中打開任意文件。廣義Open in...擴展。

十二、Open in Browsers：添加一些命令，用於在任何你喜歡的瀏覽器中打開當前文件或項目，甚至能夠同時在全部瀏覽器中打開。

1三、Open in Code：輕鬆地在代碼和代碼內部之間切換。

1四、Open in Finder：添加一些命令用以在 Finder 中打開當前文件或項目。

1五、Open in GitHub：在 github.com 中打開當前項目或文件。還有不少其餘的擴展能夠實現這個功能，可是當我試用時，發現它們很是臃腫，有不少我不須要或不起做用的東西。

1六、Open in GitTower：添加一個在 GitTower 中打開當前項目的命令。

1七、 Open in Marketplace：添加用於在 Marketplace 中打開當前項目的命令。

1八、Open in node_modules：在 node_modules 中打開當前選擇或任意字符串。當你想深刻了解你正在使用的模塊時頗有用。

1九、Open in NPM：在 npmjs.com 中打開當前選擇、項目或任意字符串。有助於快速查看自述文件。

20、Open in Ship：添加用於在 Ship 中打開當前項目的命令。不幸的是，Ship 已被棄用，它再也不起做用了。我如今在 Noty 中有一個專門的標籤來管理即將發生的問題。

2一、Open in Terminal：添加一些命令以在終端中打開當前項目。

2二、Open in Transmit：添加一些命令用以在 transmit 中打開當前文件或項目。

其餘

2三、Browser Refresh：從代碼中使用 ⌘R 刷新瀏覽器。無需將焦點切換到它。當你沒法使用熱重載，而且不但願瀏覽器在不須要時同步刷新頁面，它會很是有用。

2四、Commands：從狀態欄觸發任意命令。支持傳遞參數！

經過命令定義的自定義命令

2五、Diff：Diff 2 能夠輕鬆打開文件。由於運行code — diff path1 path2太慢了。

2六、Git File History:：查看或區分當前文件的歷史版本。其餘相似的擴展很差用。

2七、GitHub Notifications：一個安全，可自定義的狀態欄圖標，提醒你有關 GitHub 上的通知。

2八、Monokai Night Theme：完整，黑暗和簡約的 Monokai 風格主題。我試用過的主題沒有一個好用，因此我不得不作出本身的主題。

Monokai Night Theme

2九、No [Unsupported]：從標題欄中刪除 「[Unsupported]」 的擴展名。如今不推薦使用，我建議使用 Fix VSCode Checksums。相關討論見 issue 1 和issue 2。

30、Open Multiple Files：同時打開文件夾中的全部文件，可選擇用 glob 過濾。

3一、Search — Open All Results：用一個命令同時打開全部搜索結果。

3二、Terminals Manager：一次性設置多個終端或僅運行某些命令的擴展。這其實是我作的第一個擴展。

3三、Transmit：添加一些命令用以與 Transmit 進行交互。

介紹這些花了很多時間，講一個有趣的小事：我想個人帳戶上發佈的擴展最多，緊隨微軟以後，至少我尚未發現有人發佈了比我更多的擴展（寫完本文後發現 Greg 比我多作了 2 次擴展，我得加油了）

管理擴展

管理多個存儲庫多是一個挑戰，如下是個人工做方式。

重複提交

早晚你會想要更改全部存儲庫中的某些內容，這意味着須要在多個存儲庫中進行基本相同的提交，無聊而浪費時間。

爲了實現這類任務的自動化，我製做了 autogit，它是一個跨多個存儲庫執行命令的工具。

經過 autogit 執行 shell 命令的示例

我一直在尋找它的用途，最近我用它對我全部擴展的存儲庫進行了如下更改：

• 捆綁webpack：我發現啓動時間提升了約 80％。
• 忽略package-lock.json：這只是我提交歷史中的垃圾信息，閱讀本 issue參考 Sindre Sorhus 關於忽略 package-lock.json 的看法。
• 更新tsconfig.json以輸出最新的代碼：我使用了至關多的異步函數，但當目標版本爲<=es5時，異步函數被轉換爲慢速代碼，而且因爲 VSCode 與 Node.js 的現代版本一塊兒發佈，因此不須要這樣作。
• 刪除了 TSLint：我關注到我基本上忽略了它的輸出，因此我刪除了對 linting 的支持。
• 在 readme 中使用高分辨率 logo：在 readme 中使用高分辨率 logo 而不是以前使用的128x128 的 logo，遺憾的是我沒有特別好的 logo，這是另外一個故事了 :）

能夠看到 autogit 如何在 33 個存儲庫中快速地執行這 5 項更改。

使用 GitHub 同步描述和關鍵字

這是一個沒必要作的事情，可是若是有一個工具能爲你作這件事，那就太好了。幸運的是，autogit 和 autogit-command-github-sync 命令也能作到這一點：

經過 autogit 同步

我還製做了autogit-command-github-publish，用於自動建立 GitHub 存儲庫。

報告

在作了最初幾回擴展後不久，我開始對了解他們得到了多少新下載感興趣。你能夠在一個頁面中查看全部擴展程序，例如，您能夠在此處找到個人擴展程序，但若是你不記得上次檢查時擴展程序的下載次數，則沒法知道新增了多少。這是我製做 rssa 的緣由，這個工具能夠告訴你何時會發生變化。你能夠用它來監控幾乎全部可用 URL 訪問的內容。

自定義 rssa 輸出

若是有圖表那就更棒了，雖然我尚未發佈這個工具，可是利用 rssa 的歷史咱們能夠生成圖表，下面是 Todo+ 的下載次數的圖表：

Todo +下載

須要注意的是，有時候下載量會急劇增長，當發佈新的更新時，就會出現這種狀況，由於更新被視爲下載😅，任何人均可以經過推送許屢次更新來擁有具備一百萬次下載的擴展，這是應用市場的一個問題。

謝謝

很開心你看到了最後！謝謝你的閱讀，但願你在這裏找到了有用的內容。

在評論聊一聊你是如何開發 VSCode 擴展的，以及你使用了什麼擴展吧！