為vscode開發一款svn右鍵選單擴充套件

趙青青發表於2022-04-10
VSCode套件

在我平時的工作中會經常用到svn blame這個命令，但是vscode現有的svn擴充套件普遍都不能自定義右鍵選單。

所以我產生一個想法：自己動手為vscode開發一款svn的擴充套件來定製右鍵選單，本文記錄這個svn擴充套件的開發記錄，此擴充套件開發約耗時週末中的一天。

最終成果：在vscode擴充套件中搜尋：svnHelper就可以找到我編寫的svn擴充套件，商店下載地址：https://marketplace.visualstudio.com/items?itemName=qingqingzhao.svnhelper

image-20220410120154351


vscode的svn擴充套件原始碼

重點：這幾個庫拉下來之後，我嘗試直接通過vsce package指令生成vsix，全部都失敗了，編譯程式碼時有不同的出錯，只能去看vscode的開發文件。

這裡我列一下我找到的幾個開源的vscode的tortoise svn 擴充套件，每個倉庫的程式碼我大概掃了一下：

如果想自己往右鍵選單中新增選項，這個擴充套件的原始碼比較簡單易懂：https://github.com/florentulve/vstortoise

這個可以提交整個workspace：https://github.com/fantacytyx/vscode-tortoise-svn

這個提供很多的命令，https://github.com/cdsama/tortoise-svn-for-vscode


其它解決辦法

在時間急迫的情況下，我找到了這個神器，在vscode中可以開啟系統右鍵選單，這樣也可以滿足我的需求，只是它需要多點一下滑鼠

Windows Explorer Context Menu：https://marketplace.visualstudio.com/items?itemName=florentulve.vstortoise


github上原始碼報的錯

上述幾個原始碼庫在編譯時無一列外都會報錯，我猜原因可能是我安裝的nodejs和vscode版本太新有關係，因為這些庫都是三四年前的。

我的操作步驟是看vscode的官方文件來操作的，步驟如下：

首先通過npm install來安裝依賴，但會報：Cannot find module 'vscode'.

然後npm install vscode 之後，再次編譯就有一堆的 node.d.ts編譯出錯

嘗試過修改package.json中依賴庫的版本之後，還是無法解決編譯時的報錯。

結論：期間還出現可以除錯，但打包為vsix就會有不一樣的報錯，最終我放棄了折騰上述幾個庫，自己重新開始一個專案開發。


vscode擴充套件開發學習資料

新建一個vscode的擴充套件專案：範例-hello-world-Microsoft Visual Studio Code 中文手冊 (cntofu.com)

推薦這個系列，有配圖講的很清晰：VSCode擴充套件開發全攻略（三）package.json詳解-好記的部落格 (haoji.me)


微軟的文件及例子

微軟的例子：https://github.com/microsoft/vscode-extension-samples

微軟VSCode擴充套件開發官方文件：https://code.visualstudio.com/docs/extensions/overview

生成vsix及釋出到市場文件：https://code.visualstudio.com/api/working-with-extensions/publishing-extension

書籍

如果時間充實的同學，可以看看微軟韓老師的這本書《Visual Studio Code 權威指南》，在第15章有講到如何開發一個vscode擴充套件


開發擴充套件的步驟

需要下載nodejs，用來編譯及釋出

需要安裝的庫：

用來生成新建專案的：npm install -g yo generator-code

用來打包vsix的：npm i vsce -g

開發擴充套件的步驟

  1. cd到你要把專案儲存的路徑，然後通過yo code新建一個專案，然後選項專案的開發語言，熟悉C#的可選TypeScript
  2. 編寫擴充套件程式碼
  3. 按F5執行擴充套件，或者在執行除錯這裡，執行或新建除錯項：Run Extension
  4. vsce package，把擴充套件打包為vsix檔案
  5. vsce publish，把擴充套件釋出到商店

釋出到vscode商店

這個命令不能使用了：vsce create-publisher your-publisher-name

需要到這個網站進行操作(提交的時候可能需要掛VPN)：https://aka.ms/vscode-create-publisher

釋出遇到問題

這個報錯需要在package.json中把publisher的名字與申請的釋出名字一致

ERROR  The Personal Access Token verification has failed. Additional information:

Error: Access Denied: e2d743d1-0ffd-4e04-a41d-c894878f29ba needs the following permission(s) on the resource /qingqingzhao to perform this action: View user permissions on a resource

開發及釋出的注意事項

ps：開發過程中還遇到了其它的問題，可參考我的這篇文章《知乎vscode外掛修改和重新編譯》

釋出的注意事項如果repository有填則會檢查github倉庫？看到有篇文章中寫道，因為我是放在gitee上的，所以我沒填。

建議往專案中新增這幾個檔案，否則每次打包時都會需要你二次確認

LICENSE.txt

CHANGELOG.md

package.json中的name建議全小寫，否則會有黃色警告線，每一項的意思如果不清晰的話，把滑鼠移上去就會有提示這項是幹啥的。

相關文章