【插件開發】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 //用戶的語言環境