五步完成一個 VSCode 擴展(插件)開發

第一步: 安裝擴展生成器

npm install -g yo generator-code vsce

第二步: 初始化一個 Hello World 擴展

yo code

 

圖來自 CN-VScode-Docs 網站

按提示, 輸入擴展名, ID, 描述 等信息, 而後等待安裝完成~

第三步: 測試一下擴展

1. 打開 VS Code，選擇"文件 > 打開文件夾"，選擇你剛剛生成的項目目錄
2.  直接按下 F5 或 切換到 VSCode 的調試面板, 點擊 Debug 按鈕，而後點擊開始
3. 新的 VS Code 實例會運行在一個特殊環境中 (Extension Development Host), 也就是會打開多一個 VSCode 窗口
4. 按下 Shift + Ctrl + P (Mac OS ⇧⌘P)，輸入命令 Hello world
5. 右下角會提示一個 Hello World~ 恭喜！你的第一個 VS Code 插件成功了

圖來自 CN-VScode-Docs 網站

第四步: 打個包發給別的同窗玩下

 

vsce package             記得 修改 README.md 文件, 否則會提示沒有準備好 README.md

 

執行此命令沒有報錯的狀況下, 會生成一個 .vsix 的文件, 這個就能夠發給別的同窗體驗了, 固然你還能夠使用其餘命令將擴展打包發佈到微軟 VSCode 市場~

第五步: 安裝 擴展

在 VS Code 中 按下 Shift + Ctrl + P (Mac OS ⇧⌘P)，輸入命令 Install from VSIX 選擇本地的 .vsix 文件, 提示安裝成功, 從新加載一次, 便可生效~

 

 坑位：

擴展裏面的 webview 不支持 sessisonStorage，不然會由於安全問題報錯。

 

參考

https://www.bookstack.cn/read/CN-VScode-Docs/md-%E6%89%A9%E5%B1%95-%E8%8C%83%E4%BE%8B-%E8%B0%83%E8%AF%95%E5%99%A8.md