【外掛開發】VSCode外掛開發全攻略(二)HelloWord
文章轉載於:https://www.cnblogs.com/liuxianan/p/vscode-plugin-hello-world.html
寫著前面
學習一門新的語言或者生態首先肯定是從HelloWord開始。
您可以直接克隆我放在GitHub上vscode-plugin-demo的程式碼到本地,然後嘗試修改程式碼並執行,也可以使用微軟官方的腳手架vscode-generator-code來生成專案結構,腳手架的使用我們後面再來介紹,先來熟悉一下專案結構。
HelloWorld
2.1.專案結構
專案結構其實很簡單,主要是清單檔案package.json
以及extension.js
這個外掛入口檔案:
package.json
部分關鍵內容如下(已省略其它)
{ // 擴充套件的啟用事件 "activationEvents": [ "onCommand:extension.sayHello" ], // 入口檔案 "main": "./src/extension", // 貢獻點,vscode外掛大部分功能配置都在這裡 "contributes": { "commands": [ { "command": "extension.sayHello","title": "Hello World" } ] } }
src/extension.js
內容如下:
const vscode = require('vscode'); /** * 外掛被啟用時觸發,所有程式碼總入口 * @param {*} context 外掛上下文 */ exports.activate = function(context) { console.log('恭喜,您的擴充套件“vscode-plugin-demo”已被啟用!'); // 註冊命令 context.subscriptions.push(vscode.commands.registerCommand('extension.sayHello', function () { vscode.window.showInformationMessage('Hello World!'); })); }; /** * 外掛被釋放時觸發 */ exports.deactivate = function() { console.log('您的擴充套件“vscode-plugin-demo”已被釋放!') };
2.2.解讀
承如上述程式碼:
main
定義了整個外掛的主入口;- 我們在
contributes.commands
裡面註冊了一個名為extension.sayHello
的命令,並在src/extension.js
中去實現了它(彈出一個Hello World
的提示); - 但是僅僅這樣還不夠,命令雖然定義了,但是vscode還不知道啥時候去執行它,還需要在
activationEvents
新增上onCommand:extension.sayHello
用來告訴vscode,當用戶執行了這個命令操作時去執行前面我們定義的內容; - 除了
onCommand
之外,還有onView
、onUri
、onLanguage
等等,具體我們後面會詳細講到。
2.3.執行除錯
預設情況下,工程已經幫我們配置好了除錯相關引數(有興趣的可以檢視.vscode/launch.json
檔案的寫法),只需要到除錯面板選中要除錯的專案(僅僅是第一次需要,後續會自動記住上次除錯的專案),然後按下F5
就會彈出一個新的vscode視窗:
這個新視窗已經載入了我們的外掛,視窗標題會註明擴充套件開發主機
,對於只有單顯示器的同學來說,很容易寫著寫著就忘了哪個是主視窗,哪個是新視窗,所以可以通過這個來區分。
先插句話:
為了描述方便,我們約定,後續把新彈出來的那個視窗叫
新視窗
,之前老的那個叫舊視窗
。
然後按下Ctrl+Shift+P
,輸入HelloWorld
執行對應命令,當你發現右下角彈出了HelloWorld
的提示時,恭喜你,你已經掌握了你人生第109種新語言了,哈哈,開個玩笑。
2.4.新增右鍵選單和快捷鍵
上面由於我們只是註冊了命令,沒有新增選單或快捷鍵,呼叫不方便,所以我們現在新增一下。
開啟package.json
,按照下述方式新增:
{ "contributes": { "commands": [ { "command": "extension.sayHello", "title": "Hello World" } ], // 快捷鍵繫結 "keybindings": [ { "command": "extension.sayHello", "key": "ctrl+f10", "mac": "cmd+f10", "when": "editorTextFocus" } ], // 設定選單 "menus": { "editor/context": [ { "when": "editorFocus", "command": "extension.sayHello", "group": "navigation" } ] } } }
然後重新執行外掛,在編輯器的右鍵可以看到如下選單:
這裡我們暫時不對配置項做過渡解讀,後面會有專門篇章來介紹package.json
檔案的寫法。
2.5.關於重新載入
如果修改了擴充套件程式碼,想重新載入的話,可以直接在新視窗上按下Ctrl+R
來快速重新載入,也可以先停止,然後再按F5
。
2.6.關於開發語言
vscode外掛可以使用TypeScript來編寫(官方推薦),也可以使用JavaScript,本文統一使用後者,不過使用哪種方式,能實現的功能都是一樣的。
腳手架的使用
終於到腳手架環節了,如果你喜歡乾淨的專案的話,可以使用官方腳手架來生成。
安裝腳手架:
npm install -g yo generator-code
然後cd到你的工作目錄,執行yo code
:
根據嚮導一步步選擇即可,沒啥好說的,執行完後就生成了一個乾淨的可以直接F5
執行的vscode
外掛工程了。