知乎vscode插件修改和重新編譯


需求來源

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

解決辦法

  1. 按住win+x,選擇 - 以管理員身份運行powershell
  2. 執行:get-ExecutionPolicy,顯示Restricted,表示狀態是禁止的;
  3. 執行:set-ExecutionPolicy RemoteSigned;
  4. 這時再執行get-ExecutionPolicy,就顯示RemoteSigned;

參考資料

微軟VSCode插件開發官方文檔:https://code.visualstudio.com/docs/extensions/overview

生成vsix文檔:https://code.visualstudio.com/api/working-with-extensions/publishing-extension

VSCode插件開發全攻略(十)打包、發布、升級


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM