vscode插件開發①-yeoman下載安裝

vscode 是通過Electron實現跨平臺的,而Electron則是基於Chromium和node.js,vscode界面,就是通過Chromium進行渲染的,同時,vscode是多進程架構,當vscode第一次被啓動時會創建一個主進程,每個窗口,都會創建一個渲染進程,榆次同時,vscode會爲每個窗口創建一個進程專門來執行插件,即Extension Host
除了以上三個主要的進程之外,還有兩種特殊的進程,第一種是調試進程vscode爲調試窗口創建了Debug Adaper,進程,渲染進程會通過VS code Debug Protocol和Debug Adapter進程通訊,第二種則是Language Server

VS code創建Extension Host進程的方式,就是創建一個新的Electron進程,並且以node.js的形式運行,也就是說,這個進程就是一個完整的node.js進程

開發vscode插件的時候:

  • 插件就是一個node.js應用
  • 在應用中,可以直接訪問VS code的API,通過API操作VS code
  • 每當打開一個窗口,VS code就會爲這個窗口創建插件進程,並且按需要激活插件,同一時間,開發的插件代碼有可能被多次運行

vscode是居於electron,前端這裏不需要考慮兼容寫法

vscode構建擴展

確保已經安裝node.js和git,官網提供了推薦的開發工具:yeoman,yeoman是一個腳手架工具,通過yeoman可以快速創建代碼模板
下載

npm install -g yo generator-code

創建

yo code xxx(文件名)
  1. what type of extension do you want to creat ?:創建什麼類型的模板
  • New Extension(TypeScript):通過TS編程提供插件功能
  • New Extension(JavaScript):通過JS編程提供插件功能,結果類似,因爲TS最後需要被編譯成JS再發布
  • New Color Theme:主題插件
  • New Language Support:語言支持
  • New Code Snippets:代碼片段
  • New Keymap:分享快捷鍵
  • New Extension Pack:多個插件組合分享

選擇不同類型模板後接下來的問題會有所不同

輸入全部的問題後會自動創建文件,安裝需要的依賴,全部安裝完畢後,會提示運行下面的命令打開插件

cd xxx(同上的文件名)
code .

參考鏈接:https://geek-docs.com/vscode/vscode-plugin-dev/vscode-create-a-plug-in.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章