需求來源
vscode插件修改代碼要怎樣重新編譯並安裝到vscode中?
起源於我使用一個vscode插件,它可以在vscode中發布文章到知乎上,然后我修改了插件的部分源代碼,希望在vscode中安裝我修改后的版本,今天花了1個多小時解決了我自己的這個需求,這里記錄一下筆記,本篇的方法同樣適用於修改和編譯vscode的任意插件。
安裝依賴
vscode是使用typescript開發,需要安裝nodejs,建議把npm的源切到國內:npm config set registry https://registry.npm.taobao.org/
git clone 源代碼之后,需要全局安裝webpack和webpack-cl,並配置環境變量 ,然后再源代碼的目錄執行 npm install
環境變量中新增加NODE_PATH,內容:C:\Users\qing\AppData\Roaming\npm\node_modules
環境變量Path字段,增加:C:\Users\qing\AppData\Roaming\npm
PS E:\Code\VSCode-Zhihu> npm install
26 packages are looking for funding
run `npm fund` for details
腳本修改
按照自己的需求修改ts代碼,然后就可以調試插件了。
獲取vscode當前打開的文件名,並填充到輸入框做為默認值:(這里拿到的是完整的路徑)
return vscode.window.showInputBox({
value:vscode.window.activeTextEditor.document.fileName,
ignoreFocusOut: true,
prompt: "輸入標題:",
placeHolder: "",
});
作者在CONTRIBUTING.md有提到在編譯時需要注釋/node_modules/uglify-js/tools/node.js
:中的一部分代碼否則會編譯失敗,照做就好了。
調試插件
在源代碼根目錄執行npm run develop
,會在dist目錄下生成這兩個文件,然后在調試期間不要這個CDM窗口,當修改ts后,會自動編譯。
- extension.js.map
- extension.js
點擊vscode左側面板中的 Debug(運行和調試) - Launch Extension,就會啟動一個vscode新窗口,新窗口中安裝了你此次插件。
把代碼生成VSIX安裝包
代碼調試通過之后就需要生成插件安裝包,方便自己下次安裝,或者發給朋友安裝使用,如果發布到vscode插件市場也需要生成vsix,同理visual studio的插件也是vsix格式。
安裝庫:npm i vsce -g
在項目源代碼的根目錄,打開powershell,輸入:vsce package
,然后需要稍等一兩分鍾,就會在項目根目錄生成vsix文件了。
如何安裝vsix?在vscode的擴展窗口 - 從vsix安裝,選擇生成的vsix,就可以安裝成功了。
PS.不要把vsix關聯使用vscode打開會安裝失敗
如何修改擴展的信息?在源代碼的package.json中修改
遇到問題
PS E:\Code\VSCode-Zhihu\dist> vsce package
vsce : 無法加載文件 C:\Users\qing\AppData\Roaming\npm\vsce.ps1,因為在此系統上禁止運行腳本。有關詳細信息,請參閱 https:
/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ vsce package
+ ~~~~
+ CategoryInfo : SecurityError: (:) [],PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
解決辦法
- 按住win+x,選擇 - 以管理員身份運行powershell
- 執行:get-ExecutionPolicy,顯示Restricted,表示狀態是禁止的;
- 執行:set-ExecutionPolicy RemoteSigned;
- 這時再執行get-ExecutionPolicy,就顯示RemoteSigned;
參考資料
微軟VSCode插件開發官方文檔:https://code.visualstudio.com/docs/extensions/overview
生成vsix文檔:https://code.visualstudio.com/api/working-with-extensions/publishing-extension