vscode插件開發(fā)-helloWorld

前言

在我們使用vscode開發(fā)中，經(jīng)常使用很多好用的vscode插件，那你有沒有試著自己實(shí)現(xiàn)一個(gè)自己的vscode插件呢？如果有，那你可以跟著這個(gè)教程一步一步來，慢慢了解開發(fā)vscode插件的一些套路，在你真正需要開發(fā)一個(gè)vscode插件的時(shí)候，做到心中有數(shù)，手到擒來。

一、vscode和vscode插件(extension)

明白兩者的關(guān)系對(duì)于插件的開發(fā)是很重要的。vscode是微軟2015年推出的一款輕量級(jí)的代碼編輯器，最大的優(yōu)點(diǎn)是開源的生態(tài)。微軟官方在保證vscode基本的功能的同時(shí)，其他的功能通過插件的形式對(duì)vscode進(jìn)行拓展。這個(gè)有什么好處呢？對(duì)于vscode來說，保證了編輯器的輕量級(jí)；對(duì)于用戶來說，享受輕量級(jí)的同時(shí)保證了功能的適用性，因?yàn)槟憧梢允褂脛e人寫好的vscode插件，也可以定制自己的vscode插件，這就使得vscode和市面上之前主流的編輯器如webstorm相比，更有優(yōu)勢。明白了兩者的關(guān)系，我們就可以進(jìn)行插件的開發(fā)了。

二、官方文檔預(yù)覽

官方文檔地址：https://code.visualstudio.com/api。我們推薦閱讀英文文檔：

如圖，注意并不是API右邊的extensions，關(guān)于插件開發(fā)的所有的內(nèi)容都是在API目錄下面，我們先上一眼左側(cè)的目錄，然后下面用到的時(shí)候會(huì)帶著大家一起去翻一翻文檔。

三、開發(fā)環(huán)境搭建

  • node

  • git

  • Yeoman

node和git的安裝和使用各位同學(xué)就自行百度了,我們主要講解Yeoman的安裝和使用，Yeoman 是一種高效、開源的 Web 應(yīng)用腳手架搭建系統(tǒng),本身是用JavaScript開發(fā)的，但是可以用于任何語言編寫的應(yīng)用。我們這里通過Yeoman搭建vscode插件的開發(fā)工程。

你也可以去查閱Yeoman官方文檔，了解更多關(guān)于Yeoman的信息。

1.安裝Yeoman

npm install -g yo generator-code

2.使用Yeoman命令搭建開發(fā)目錄

在命令行輸入命令：

yo code

出現(xiàn)下面的選項(xiàng)：


出現(xiàn)這樣的界面，首先說明你的Yeoman是安裝成功了，首先需要明確的是，vscode插件的種類分為下面的幾種：

  New Extension (TypeScript)  // 不明確是哪種類型的插件 使用TypeScript開發(fā)
  New Extension (JavaScript)  // 不明確是哪種類型的插件 使用JavaScript開發(fā)
  New Color Theme  // 生成專為主題插件開發(fā)的目錄
  New Language Support // 生成專為語言插件開發(fā)的目錄
  New Code Snippets // 生成專為代碼片段插件開發(fā)的目錄
  New Keymap // 生成專為快捷鍵插件開發(fā)的目錄
  New Extension Pack // 生成打包功能的插件
  New Language Pack (Localization) // 生成新的語言打包功能的插件

那這里看你個(gè)人的需求，總體是沒有什么區(qū)別，如果你的插件可能包含多種功能，如有主題、有代碼片段，那你就可以選擇New Extension (TypeScript)或者New Extension (JavaScript)。那我們這里選擇使用New Extension (TypeScript)開發(fā)一個(gè)新的vscode插件，同時(shí)也推薦大家使用TypeScript版本的new Extension，因?yàn)関scode本身就是使用TypeScript開發(fā)的，和TypeScript是天然契合的。


選擇New Extension（TypeScript）后會(huì)讓你填寫新建插件的相關(guān)信息：

? What type of extension do you want to create? New Extension (TypeScript) 
? What's the name of your extension? hello-world // 插件名字
? What's the identifier of your extension? hello-world // 插件標(biāo)識(shí)符
? What's the description of your extension? hello-world // 插件描述
? Initialize a git repository? Yes // 是否幫你初始化一個(gè)git倉庫
? Which package manager to use? (Use arrow keys) // 使用什么包管理器
? npm 
  yarn

當(dāng)你做完上面的步驟，Yeoman會(huì)在當(dāng)前目錄下生成一個(gè)項(xiàng)目，目錄結(jié)構(gòu)是這樣的：

這就是vscode的開發(fā)工程目錄。

四、項(xiàng)目目錄分析

現(xiàn)在我們已經(jīng)成功搭建了一個(gè)vscode插件開發(fā)的工程，我們首先看看目錄的基本結(jié)構(gòu)，大致和我們平時(shí)開發(fā)的項(xiàng)目目錄結(jié)構(gòu)差不多，由于是TypeScript語言開發(fā)，所以根目錄下面多了一個(gè)tsconfig.json文件，這個(gè)文件的作用是配置TypeScript，我們后面會(huì)分析到。簡單梳理一下項(xiàng)目結(jié)構(gòu)：

├── .vscode
│   ├── launch.json     // 插件加載和調(diào)試的配置
│   └── tasks.json      // 配置TypeScript編譯任務(wù)
├── .gitignore          // 忽略構(gòu)建輸出和node_modules文件
├── README.md           // 一個(gè)友好的插件文檔
├── src
│   └── extension.ts    // 插件入口文件
├── package.json        // 插件配置清單
├── tsconfig.json       // TypeScript配置

我們這里重點(diǎn)關(guān)注兩個(gè)文件：extension.ts和package.json，其他的文件在你使用腳手架的時(shí)候vscode默認(rèn)會(huì)給你配置好，但是這兩個(gè)文件卻不會(huì)，因?yàn)槟愕牟寮拈_發(fā)始終會(huì)圍繞著這兩個(gè)文件進(jìn)行，我們將這兩個(gè)文件單拎出來分析一下。
1.extension.js


這個(gè)文件是整個(gè)插件的入口文件，當(dāng)你的插件啟動(dòng)的時(shí)候就會(huì)首先走這里的邏輯，首先引入了vscode實(shí)例對(duì)象，該對(duì)象是vscode暴露給開發(fā)者調(diào)用vscode API使用的，換句話說，是通過這個(gè)對(duì)象進(jìn)行調(diào)用對(duì)應(yīng)的api進(jìn)行我們插件的二次開發(fā)。然后里面有兩個(gè)鉤子函數(shù)：

export function activate(context: vscode.ExtensionContext) {
  
}

activate鉤子函數(shù)是插件激活的時(shí)候啟動(dòng)，你可以在這個(gè)鉤子函數(shù)里面定義插件的啟動(dòng)時(shí)候相關(guān)的邏輯。

export function deactivate() {
  
}

deactivate鉤子函數(shù)是插件失活的時(shí)候觸發(fā)的鉤子函數(shù)，比如插件關(guān)閉的時(shí)候需要清理不需要的引用，你可以在這個(gè)函數(shù)中手動(dòng)清除。

2.package.json

這個(gè)文件跟我們平時(shí)Vue項(xiàng)目中的package.json文件就不太一樣了，

{
    "name": "hello-world",
    "displayName": "hello-world",
   "publisher"："mss-plugin"
    "description": "hello-world",
    "version": "0.0.1",
    "engines": {
        "vscode": "^1.51.0"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        
    ],
    "main": "./out/extension.js",
    "contributes": {
        
    },
    "scripts": {
    
    },
    "devDependencies": {
        
    }
}

我們這里只關(guān)注重點(diǎn)的字段，其他的字段就跟我們平時(shí)開發(fā)的vue項(xiàng)目的常規(guī)字段作用相同，就不一一介紹了：

  • publisher
  • engines
  • activationEvents
  • contributes

publisher字段表示發(fā)布的時(shí)候生成的私有名字，這個(gè)字段的值就是你在vscode應(yīng)用市場發(fā)布的插件的名字，后面插件發(fā)布的時(shí)候會(huì)用到，這里就暫且先提一下。engines表示你使用的vscode引擎的版本，不同的版本API的使用方式可能會(huì)有所異同。activationEvents字段是配置觸發(fā)剛才提到的extendion.js文件中active鉤子函數(shù)的事件，后面會(huì)多次提到這個(gè)字段。contributes字段是對(duì)插件的一些配置，比如圖標(biāo)，菜單等。

五、跑起一個(gè)hello-world
先說實(shí)現(xiàn)的效果：我們在vscode的命令面板中出現(xiàn)vsplugin.helloWorld命令，當(dāng)我們選擇這個(gè)命令的時(shí)候，右下角彈出'歡迎打開新世界的大門'彈窗。話不多說，我們先去查閱文檔：


看到文檔左側(cè)的GET STRTED的目錄下面有Your First Extendion，查閱這個(gè)就會(huì)發(fā)現(xiàn)官網(wǎng)有相關(guān)的講解，你想輸出一個(gè)hello world，你需要這樣做：

首先在我們的入口文件extendion.ts的插件激活函activate中注冊一個(gè)命令，并定義好觸發(fā)命令時(shí)vscode調(diào)用的回調(diào)函數(shù)

export function activate(context: vscode.ExtensionContext) {
    vscode.commands.registerCommand('vsplugin.helloWorld', () => {
        vscode.window.showInformationMessage('恭喜你，打開新世界的大門！');
    });
}

context: vscode.ExtensionContext這里的vscode就是vscode官方提供給我們調(diào)用它的所有API的實(shí)例，然后注意我們調(diào)用了vscode上面commands對(duì)象中的registerCommand方法，這個(gè)方法看名字似乎是注冊命令的，我們?nèi)ス倬W(wǎng)看一下：


找到REFERENCES下面的VS Code API，這里是官網(wǎng)供開發(fā)者查閱vscode所有API的一個(gè)集合，我們找到commands對(duì)象：

所有關(guān)于commands對(duì)象的方法都在這里有介紹，我們往下翻找到FENCTION:

可以發(fā)現(xiàn)傳入兩個(gè)參數(shù)，第一個(gè)參數(shù)是你傳入的命令的名稱，第二個(gè)參數(shù)是你命令指定的回調(diào)函數(shù)。我上面的例子就是按照官網(wǎng)的提示定義了命令和回調(diào)函數(shù)，同時(shí)定義了一個(gè)彈窗：

vscode.window.showInformationMessage

但這里僅僅是注冊了一個(gè)命令和指定了命令的回調(diào)函數(shù)，我們的命令還沒有出現(xiàn)在控制面板中，要想我們注冊的命令出現(xiàn)在控制面板中，

我們就得回到開頭說到的package.json配置文件中去配置：

{
  "contributes": {
    "commands": [
      {
        "command": "vsplugin.helloWorld",
        "title": "Hello World",
        "category": "Hello",
      }
    ]
  }
}

同樣的，我們?nèi)シ喎單臋n，找到REFERENCES下面的Contribution Points,所有關(guān)于配置相關(guān)的信息都在這個(gè)目錄下面：


可以看到有很多的配置，這些配置包括了對(duì)vscode面板菜單、命令、快捷鍵、調(diào)試等等的配置，當(dāng)你需要配置相關(guān)功能的時(shí)候你就可以來這里查找，我們選擇我們需要的commands:

    "contributes": {
        "commands": [
            {
                "command": "vsplugin.helloWorld",
                "title": "helloWorld",
                "category": "demo1"
            }
    ]
    }

正如我們在介紹package.json文件的時(shí)候提到，所有vscode的配置都在contributes字段下面進(jìn)行配置，所有關(guān)于命令相關(guān)的配置都在commands數(shù)組中配置，這也是符合我們預(yù)期的，因?yàn)槲覀兛赡苄枰枰渲枚鄠€(gè)命令。commands數(shù)組中的對(duì)象中的幾個(gè)屬性：

  • command：剛才在extension中注冊的命令 必須和這里保持一致
  • title：命令名稱
  • 命令分類

當(dāng)我們在package.json中配置后，使用command + shift + p打開命令面板就可以看到我們這個(gè)命令了：


面板中有了命令，但是我們還沒有定義什么時(shí)候去觸發(fā)我們的extension.ts中的active鉤子函數(shù)，因?yàn)橹挥杏|發(fā)了這個(gè)鉤子函數(shù)，我們才能觸發(fā)里面命令對(duì)應(yīng)的回調(diào)函數(shù):

() => {
        vscode.window.showInformationMessage('恭喜你，打開新世界的大門！');
});

所以接著我們?nèi)ヅ渲孟虑懊嫣岬降?code>activationEvents,這個(gè)字段表示在什么時(shí)候去激活extension.ts中的激活函數(shù)：

"activationEvents": [
        "onCommand:vsplugin.helloWorld"
    ],

可以看一下文檔:


image-20201126152258839.png

可以看到有很多的激活事件(Activation Events)，能在激活事件(activationEvents)中配置的選項(xiàng)都在這里。我們需要的是鍵入命令的時(shí)候才激活鉤子函數(shù)：



官網(wǎng)也給出了例子。

這樣，我們的第一個(gè)hello-world就成功。如何看到效果呢？

  • 按下F5鍵
  • 在彈出的調(diào)試的vscode的窗口command + shift +p

就可以在右下角看到我們的彈窗：


這是vscode插件開發(fā)的第一篇，后續(xù)會(huì)陸續(xù)推出關(guān)于vscode開發(fā)的文章，所有的示例代碼都在https://github.com/MssText/vscode-plugin-demo，有基礎(chǔ)的同學(xué)可以先睹為快。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容