前言

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

一译仗、vscode和vscode插件(extension)

明白兩者的關(guān)系對于插件的開發(fā)是很重要的抬虽。vscode是微軟2015年推出的一款輕量級的代碼編輯器，最大的優(yōu)點是開源的生態(tài)纵菌。微軟官方在保證vscode基本的功能的同時阐污，其他的功能通過插件的形式對vscode進(jìn)行拓展。這個有什么好處呢咱圆？對于vscode來說笛辟，保證了編輯器的輕量級；對于用戶來說序苏，享受輕量級的同時保證了功能的適用性手幢，因為你可以使用別人寫好的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è)的目錄粪狼，然后下面用到的時候會帶著大家一起去翻一翻文檔。

三超营、開發(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)下面的選項：

  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) // 生成新的語言打包功能的插件

那這里看你個人的需求，總體是沒有什么區(qū)別吴趴，如果你的插件可能包含多種功能漆诽，如有主題、有代碼片段，那你就可以選擇New Extension (TypeScript)或者New Extension (JavaScript)厢拭。那我們這里選擇使用New Extension (TypeScript)開發(fā)一個新的vscode插件兰英，同時也推薦大家使用TypeScript版本的new Extension，因為vscode本身就是使用TypeScript開發(fā)的供鸠，和TypeScript是天然契合的畦贸。

? 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)識符
? What's the description of your extension? hello-world // 插件描述
? Initialize a git repository? Yes // 是否幫你初始化一個git倉庫
? Which package manager to use? (Use arrow keys) // 使用什么包管理器
? npm 
  yarn

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

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

四、項目目錄分析

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

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

我們這里重點關(guān)注兩個文件：extension.ts和package.json，其他的文件在你使用腳手架的時候vscode默認(rèn)會給你配置好瞳脓，但是這兩個文件卻不會塑娇，因為你的插件的開發(fā)始終會圍繞著這兩個文件進(jìn)行，我們將這兩個文件單拎出來分析一下劫侧。
1.extension.js

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

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

export function deactivate() {
  
}

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

2.package.json

這個文件跟我們平時Vue項目中的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)注重點的字段嗜桌，其他的字段就跟我們平時開發(fā)的vue項目的常規(guī)字段作用相同，就不一一介紹了：

• publisher
• engines
• activationEvents
• contributes

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

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

首先在我們的入口文件extendion.ts的插件激活函activate中注冊一個命令快压，并定義好觸發(fā)命令時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的實例蔫劣，然后注意我們調(diào)用了vscode上面commands對象中的registerCommand方法坪郭，這個方法看名字似乎是注冊命令的，我們?nèi)ス倬W(wǎng)看一下：

vscode.window.showInformationMessage

但這里僅僅是注冊了一個命令和指定了命令的回調(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)的信息都在這個目錄下面：

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

正如我們在介紹package.json文件的時候提到，所有vscode的配置都在contributes字段下面進(jìn)行配置割岛，所有關(guān)于命令相關(guān)的配置都在commands數(shù)組中配置愉适，這也是符合我們預(yù)期的，因為我們可能需要需要配置多個命令癣漆。commands數(shù)組中的對象中的幾個屬性：

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

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

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

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

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

可以看一下文檔:

image-20201126152258839.png

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

這樣用僧，我們的第一個hello-world就成功。如何看到效果呢赞咙？

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

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

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