【外掛開發】VSCode外掛開發全攻略--常用API總結
文章轉載於：https://www.pianshen.com/article/4369332888/
一、環境搭建
1、npm install -g yo generator-code 安裝腳手架; 2、yo code 建立專案
本人選擇的是：javascript
建立好之後系統會自動生成一個 package.json 和 extension.js 檔案；
二、package.json 配置
{ "name": "lucky-npm", //外掛名稱 "displayName": "lucky npm", "description": "", "version": "1.0.1", "publisher": "mrgao", "engines": { "vscode": "^1.32.0" }, "repository": { "type": "git", "url": "git+https://github.com/MrGaoGang/lucky_start.git" }, "categories": [ //分類 "Other" ], "icon": "icon/logo.png", //logo "activationEvents": [ //啟用方式 "workspaceContains:package.json", "onCommand:lucky.gao.extension.install", "onCommand:lucky.gao.extension.start_dev", "onCommand:lucky.gao.extension.build_pro" ], "main": "./extension.js", //入口檔案 "contributes": { "snippets": [ //自定義一些程式碼模板（可以嘗試輸入fetch） { "language": "javascript", "path": "./src/snippet/snippet.json" } ], "views": { //檢視 "explorer": [ { //在資源管理器中的檢視，id為mrgao_luckys，名字為LUCKY NPM "id": "mrgao_luckys", "name": "LUCKY NPM" } ] }, "commands": [ //有哪些命令 { "command": "lucky.gao.extension.install", "title": "安裝依賴(install)" }, { "command": "lucky.gao.extension.start_dev", "title": "啟動測試環境(dev)" }, { "command": "lucky.gao.extension.build_pro", "title": "構建生產版本(pro)" } ], "menus": { //選單，是否右鍵顯示選單，其中group為分類, "editor/context": [ { "when": "editorFocus", "command": "lucky.gao.extension.install", "group": "6_luck" }, { "when": "editorFocus", "command": "lucky.gao.extension.start_dev", "group": "6_luck" }, { "when": "editorFocus", "command": "lucky.gao.extension.build_pro", "group": "6_luck" } ] } }, "scripts": { "postinstall": "node ./node_modules/vscode/bin/install", "test": "node ./node_modules/vscode/bin/test" }, "devDependencies": { "typescript": "^3.3.1", "vscode": "^1.1.28", "eslint": "^5.13.0", "@types/node": "^10.12.21", "@types/mocha": "^2.2.42" } }
1. activationEvents 介紹啟用外掛的方式
- onLanguage 啟用
發出此啟用事件，只要解析為某種語言的檔案被開啟，就會啟用感興趣的擴充套件。
"activationEvents"：[ " onLanguage：python " ]
可以使用陣列中的單獨 onLanguage 條目宣告多種語言 activationEvents。
"activationEvents"：[ " onLanguage：json ", " onLanguage：markdown ", " onLanguage：typescript " ]
- onCommand 載入方式
發出此啟用事件，並且只要呼叫命令，就會啟用當前擴充套件：
" activationEvents "：[ " onCommand：extension.sayHello " ]
- onDebug 載入方式
並在啟動除錯會話之前啟用當前擴充套件：
" activationEvents "：[ " onDebug " ]
onDebugInitialConfigurations
onDebugResolve
這是兩個更細粒度的 onDebug 啟用事件：
onDebugInitialConfigurations 在呼叫 provideDebugConfigurations 方法之前觸發 DebugConfigurationProvider。
onDebugResolve:type 在呼叫指定型別的 resolveDebugConfiguration 方法之前觸發 DebugConfigurationProvider。
經驗法則：如果除錯擴充套件的啟用是輕量級的，請使用 onDebug。如果它是重量級的，則使用 onDebugInitialConfigurations 和/或 onDebugResolve 取決於是否 DebugConfigurationProvider 實施相應的方法 provideDebugConfigurations 和/或 resolveDebugConfiguration。有關這些方法的更多詳細資訊，請參閱使用 DebugConfigurationProvider。
- workspaceContains 啟用方式
每當開啟資料夾並且資料夾包含至少一個與 模式匹配的檔案時，就會啟用此啟用事件並激活當前擴充套件。
" activationEvents "：[ " workspaceContains：** /。editorconfig " ]
- onFileSystem 啟用方式
發出此啟用事件，只要讀取特定方案中的檔案或資料夾，就會啟用感興趣的擴充套件。這通常是 file-scheme，但是對於自定義檔案系統提供程式，有更多的方案可以實現，例如 ftp 或 ssh。
" activationEvents "：[ " onFileSystem：sftp " ]
- onView 啟用方式
發出此啟用事件，只要展開指定 ID 的檢視，就會啟用當前擴充套件：
" activationEvents "：[ " onView：nodeDependencies " ]
- onUri 啟用方式
發出此啟用事件，只要開啟該擴充套件的系統範圍的 Uri，就會啟用感興趣的擴充套件。Uri 計劃固定為 vscode 或 vscode-insiders。Uri 許可權必須是擴充套件的識別符號。Uri 的其餘部分是任意的。
" activationEvents "：[ " onUri " ]
如果 vscode.git 副檔名定義 onUri 為啟用事件，則會在以下任何一個 Uris 中開啟它：
vscode://vscode.git/init
vscode://vscode.git/clone?url=https%3A%2F%2Fgithub.com%2FMicrosoft%2Fvscode-vsce.git
vscode-insiders://vscode.git/init （對於 VS Code Insiders）
- onWebviewPanel 啟用方式
每當 VS Code 需要使用匹配恢復 webview 時，將發出此啟用事件並激活當前擴充套件 viewType。
例如，onWebviewPanel 的宣告如下：
" activationEvents "：[ " onWebviewPanel：catCoding " ]
當 VS Code 需要使用 viewType 恢復 webview 時，將導致擴充套件被啟用：catCoding。viewType 在呼叫中設定 window.createWebviewPanel，您需要有另一個啟用事件（例如，onCommand）來初始啟用您的擴充套件並建立 webview。
- * 啟用方式
該*啟用事件發出後，每當 VS 程式碼啟動感興趣的擴充套件將被啟用。為確保良好的終端使用者體驗，請僅在您的使用者使用其他啟用事件組合時才在擴充套件中使用此啟用事件。
" activationEvents "：[ " * " ]
contributes介紹
詳情請見contributes介紹
三、常用 API
這裡主要介紹一下 extension 中的一些常用命令。官方 API 請見:vscode api
1. 命令
- 命令註冊
//註冊命令 vscode.commands.registerCommand('lucky.hello', () => { }); //註冊之後必須在package.json中配置: { "contributes": { "commands": [{ "command": "lucky.hello", "title": "Hello World" }] } }
- 命令執行
//vscode.open為vscode自帶命令（也可以使用自己的命令），可以用來開啟一個頁面 vscode.commands.executeCommand( "vscode.open", vscode.Uri.parse(`https://code.visualstudio.com/updates/`) );
- 獲取所有命令
vscode.commands.getCommands(false); //會返回所有命令 接收一個引數:是否顯示系統自帶的內部命令,此處Wiefalse
2. 顯示
vscode.window.showInformationMessage("我是info資訊！"); vscode.window.showErrorMessage("我是錯誤資訊！"); vscode.window.setStatusBarMessage("設定狀態列的訊息"); //帶回調的提示 vscode.window .showInformationMessage("是否要做什麼.....？", "是", "否", "不再提示") .then(result => { if (result === "是") { } else if (result === "不再提示") { // 其它操作 } });
3. window
- 建立一個終端並輸入命令
let terminalA = vscode.window.createTerminal({ name: "我是終端的名字" });
terminalA.show(true);
terminalA.sendText("npm start"); //輸入命令
- 顯示一個輸入框，讓使用者輸入一個字串
/** * 開啟輸入框以詢問使用者輸入。 undefined如果輸入框被取消（例如按ESC），則返回值。否則，返回的值將是使用者鍵入的字串，如果使用者沒有輸入任何內容，則返回值為空，但是單擊"確定"將輸入框解除。 * */ const result = vscode.window.showInputBox({ prompt: "請輸入版本號，", value: "預設值", placeHolder: "提示", valueSelection: [len, len] }); result.then(inputValue => { // 是按下ESC鍵 if (typeof _versionName === "undefined") return; //按下enter鍵 });
- 建立樹狀檢視
vscode.window.registerTreeDataProvider('viewId', treeProvider); //viewId對應package.json中id "contributes": { "views": { "explorer": [ { "id": "viewId", "name": "NPM Tools" } ] }, } //treeProvider請見此外掛原始碼。
- 開啟文件
vscode.workspace.openTextDocument(vscode.Uri.file("檔案路徑)).then( document => vscode.window.showTextDocument(document) )
4、環境
- vscode.env.appName //當前編輯器的名稱
- vscode.env.appRoot //開啟的根目錄
- vscode.env.language //使用者的語言環境