VSCode外掛開發全攻略(二)HelloWord
寫著前面
學習一門新的語言或者生態首先肯定是從HelloWord開始。
您可以直接克隆我放在GitHub上vscode-plugin-demo 的程式碼到本地,然後嘗試修改程式碼並執行,也可以使用微軟官方的腳手架vscode-generator-code來生成專案結構,腳手架的使用我們後面再來介紹,先來熟悉一下專案結構。
HelloWorld
專案結構
專案結構其實很簡單,主要是清單檔案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”已被釋放!') };
解讀
承如上述程式碼:
main
定義了整個外掛的主入口;- 我們在
contributes.commands
裡面註冊了一個名為extension.sayHello
的命令,並在src/extension.js
中去實現了它(彈出一個Hello World
的提示); - 但是僅僅這樣還不夠,命令雖然定義了,但是vscode還不知道啥時候去執行它,還需要在
activationEvents
新增上onCommand:extension.sayHello
用來告訴vscode,當用戶執行了這個命令操作時去執行前面我們定義的內容; - 除了
onCommand
之外,還有onView
、onUri
、onLanguage
等等,具體我們後面會詳細講到。
執行除錯
預設情況下,工程已經幫我們配置好了除錯相關引數(有興趣的可以檢視.vscode/launch.json
檔案的寫法),只需要到除錯面板選中要除錯的專案(僅僅是第一次需要,後續會自動記住上次除錯的專案),然後按下F5
就會彈出一個新的vscode視窗:
這個新視窗已經載入了我們的外掛,視窗標題會註明擴充套件開發主機
,對於只有單顯示器的同學來說,很容易寫著寫著就忘了哪個是主視窗,哪個是新視窗,所以可以通過這個來區分。
先插句話:
為了描述方便,我們約定,後續把新彈出來的那個視窗叫
新視窗
,之前老的那個叫舊視窗
。
然後按下Ctrl+Shift+P
,輸入HelloWorld
執行對應命令,當你發現右下角彈出了HelloWorld
的提示時,恭喜你,你已經掌握了你人生第109種新語言了,哈哈,開個玩笑。
新增右鍵選單和快捷鍵
上面由於我們只是註冊了命令,沒有新增選單或快捷鍵,呼叫不方便,所以我們現在新增一下。
開啟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
檔案的寫法。
關於重新載入
如果修改了擴充套件程式碼,想重新載入的話,可以直接在新視窗上按下Ctrl+R
來快速重新載入,也可以先停止,然後再按F5
。
關於開發語言
vscode外掛可以使用TypeScript來編寫(官方推薦),也可以使用JavaScript,本文統一使用後者,不過使用哪種方式,能實現的功能都是一樣的。
腳手架的使用
終於到腳手架環節了,如果你喜歡乾淨的專案的話,可以使用官方腳手架來生成。
安裝腳手架:
npm install -g yo generator-code
然後cd到你的工作目錄,執行yo code
:
根據嚮導一步步選擇即可,沒啥好說的,執行完後就生成了一個乾淨的可以直接F5
執行的vscode
外掛工程了。
相關推薦
VSCode外掛開發全攻略(二)HelloWord
寫著前面 學習一門新的語言或者生態首先肯定是從HelloWord開始。 您可以直接克隆我放在GitHub上vscode-plugin-demo 的程式碼到本地,然後嘗試修改程式碼並執行,也可以使用微軟官方的腳手架vscode-generator-code來生成專案結構,腳手架的使用我們後面再來介紹,先來熟悉
VSCode外掛開發全攻略(七)WebView
更多文章請戳VSCode外掛開發全攻略系列目錄導航。 什麼是Webview 大家都知道,整個VSCode編輯器就是一張大的網頁,其實,我們還可以在Visual Studio Code中建立完全自定義的、可以間接和nodejs通訊的特殊網頁(通過一個acquireVsCodeApi特殊方法),這個網頁就叫W
VSCode外掛開發全攻略(六)開發除錯技巧
更多文章請戳VSCode外掛開發全攻略系列目錄導航。 前言 在介紹完一些比較簡單的內容點之後,我覺得有必要先和大家介紹一些開發中遇到的一些細節問題以及技巧,特別是後面一章節將要介紹WebView的知識,這個坑會比較多,避免大家走彎路。 開發方式 最理想的方式是準備雙顯示器,一個寫程式
VSCode外掛開發全攻略(五)跳轉到定義、自動補全、懸停提示
更多文章請戳VSCode外掛開發全攻略系列目錄導航。 跳轉到定義 跳轉到定義其實很簡單,通過vscode.languages.registerDefinitionProvider註冊一個provider,這個provider如果返回了new vscode.Location()就表示當前游標所在單詞支援跳轉
VSCode外掛開發全攻略(一)概覽
文章索引 寫在前面 一年前我寫了一篇3萬多字的Chrome外掛(擴充套件)開發全攻略,反響還不錯,幫助了很多新手快速上手,甚至包括大名鼎鼎的紅芯瀏覽器(戳這裡瞭解更多)。 最近因工作需要又接觸到了vscode外掛開發,所以趁勢再寫一篇有關vscode外掛開發的文章,記錄一些自己踩過的坑以及接觸vscod
VSCode外掛開發全攻略(八)程式碼片段、設定、自定義歡迎頁
程式碼片段 程式碼片段,也叫snippets,相信大家都不陌生,就是輸入一個很簡單的單詞然後一回車帶出來很多程式碼。平時大家也可以直接在vscode中建立屬於自己的snippets: 建立程式碼片段 那麼如何在擴充套件中建立snippets呢? package.json檔案新增如下: "contribut
VSCode外掛開發全攻略(十)打包、釋出、升級
釋出方式 外掛開發完了,如何釋出出去分享給他人呢?主要有3種方法: 方法一:直接把資料夾發給別人,讓別人找到vscode的外掛存放目錄並放進去,然後重啟vscode,一般不推薦; 方法二:打包成vsix外掛,然後傳送給別人安裝,如果你的外掛涉及機密不方便釋出到應用市場,可以嘗試採用這種方式; 方法三:註冊
VSCode外掛開發全攻略(九)常用API總結
本文提煉一些常見的API使用場景供參考,本文內容有待完善。 編輯器相關 修改當前啟用編輯器內容 替換當前編輯器全部內容: vscode.window.activeTextEditor.edit(editBuilder => { // 從開始到結束,全量替換 const end = ne
VSCode外掛開發全攻略(三)package.json詳解
package.json 在詳細介紹vscode外掛開發細節之前,這裡我們先詳細介紹一下vscode外掛的package.json寫法,但是建議先只需要隨便看一下,瞭解個大概,等後面講到具體細節的時候再回過頭來看。 如下是package.json檔案的常用配置,當然這裡還不是全部: { // 外掛的
VSCode外掛開發全攻略(四)命令、選單、快捷鍵
命令 我們在前面HelloWord章節中已經提到了命令寫法,這裡再重溫一下。 context.subscriptions.push(vscode.commands.registerCommand('extension.sayHello', () => { vscode.window.showI
【乾貨】Chrome外掛(擴充套件)開發全攻略(轉載)
轉載來源:https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html 【乾貨】Chrome外掛(擴充套件)開發全攻略 寫在前面 我花了將近一個多月的時間斷斷續續寫下這篇博文,並精心寫下完整demo,寫部落格的辛苦大家懂的,
Linux使用者管理全攻略(二)
摘要:本文詳解使用者(User)和使用者組(Group)的配置檔案,本文是《Linux 使用者(User)和使用者組(Group)管理概述》文件的關健部份的細化;通過本文,您至少能明白/etc/passwd /etc/group ,以及什麼是UID和GID 等;其中對UID的
企業專案遷移go-zero全攻略(二)
承接上篇:上篇文章講到 `go-zero` 架構設計和專案設計。本篇文章接著這個專案設計,將生成的 `app 模組` 中 `gateway` 和 `RPC` 進行改造。廢話不多說,讓我們開始! ## gateway service gateway 中我做了一些自定義,在端請求我們後臺介面情況下,雖然多數情
【微軟大法好】VS Tools for AI全攻略(2)
port shell orf 方式 virt cnblogs 我們 玩耍 虛擬 接著上文,我們來討論如何使用Azure資源來訓練我們的tensorflow項目。Azure雲我個人用得很多,主要是因為微軟爸爸批了150刀每月的額度,我可以愉快地玩耍。 那麽針對Azure,有成
C#微信公眾號全攻略(3)--接管所有訊息驗證部分 C#程式碼
新建網站 新建一般處理程式 怎麼操作SQL資料庫不寫了 只發一些關鍵部分程式碼 一般處理程式關鍵程式碼 public class Interface : IHttpHandler { public stati
C#微信公眾號全攻略(5)--群發訊息時的openid對應的使用者是誰呢
有一個openid不屬於公眾號關注使用者的任何一位 在通過微信控制檯群發訊息後 將有一個Event為MASSSENDJOBFINISH的事件推送 對應的openid 他是誰呢 他的nickname是張三瘋 來自 中國 廣東 廣州 簽名是DayDayUpUp
資料結構內排序之慘死攻略(二)
接上回合《資料結構內排序之慘死攻略(一)》 聽聞今天還要學資料結構,心中堵著一片烏雲。 就算受低潮情緒影響也要堅持學下去啊。 目錄 5 歸併排序 5.1 栗子 5.2 程式碼實現 5.3 歸併演算法優化 5.3.1 R.Sedgewick優化 5.3.2
C#微信公眾號全攻略(4)--實現回覆訊息C#程式碼
接上文 這個函式把使用者發來的內容交接給messageHelp來處理 最後返回messageHelp.ReturnMessage private void Handle(string postStr) { messageHelp help = new
大資料專案經理成長攻略(二)
在上一次《大資料專案經理成長攻略》文章實踐一段時間來,與很多圈內朋友進行了交流,對前面思考的體系進行了完善,有了新的感悟。 01 更新了知識技能體系 作為資料探勘的專案經理,主要需要具備以下的技能。 在這裡我還是要推薦下我自己建的大資料學習交流qq裙:&nb
VS Tools for AI全攻略(2)低配置虛擬機器也能玩轉深度學習,無需NC/NV系列
接著上文VS Tools for AI全攻略,我們來討論如何使用Azure資源來訓練我們的tensorflow專案。Azure雲我個人用得很多,主要是因為微軟爸爸批了150刀每月的額度,我可以愉快地玩耍。 那麼針對Azure,有成套的兩個方案解決問題。 方案一(比較有錢的、對速度要求高的):使用De