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(文件名)
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