前言
之前編寫了一個vscode插件用vscode寫博客和發布，然后有園友要求寫一篇來介紹如何開發一個vscode擴展插件，或者說介紹開發這個插件的過程。然而文章還沒有寫，園子里面已經有人發布一個文章，是園友上位者的憐憫的VSCODE 插件初探介紹了自己開發的一個插件與如何簡單的開發一個插件。雖然已經有這么一個文章，但是我覺得還是可以更仔細的來介紹如何來開發一個vscode插件，也算之前說好要寫這么一個文章的一個承諾吧，於是就有了還這么篇文章。
一、開發環境介紹與安裝
為了演示一個安裝環境，我安裝了一個干凈的win10系統來操作截圖。
1.首先我們需要安裝一個最基本的Visual Studio Code，我們可以先到官網下載一最新版本的來進行安裝，點擊上面的連接，進去下載總是懂的吧。下載完后點擊安裝，然后一直下一步安裝就可以。
2.安裝完vscode后呢，我們就需要來看如何開發我們的自己的插件了，參考官方文檔Your First Extension(Example - Hello World)。根據文檔我們得知我們需要安裝一個 node.js,同樣的點擊前面的連接，到nodejs的中文網站下載一個安裝程序，下載完點擊安裝下一步就可以。
3.在安裝完上面兩個工具后，我們還需要一個生產插件代碼的東西，也就是 Yeoman 和 VS Code Extension generator.Yeoman的介紹不在本文章中，自己點擊上面的連接去了解。我們可以打開cmd來執行下面的命令來安裝這兩個工具。npm使用介紹
npm install -g yo generator-code
在完成上面的安裝后，可以通過輸入命令
yo code
來生成我們要的基本代碼。
在os系統上可以通過用上下鍵來選擇要創建哪種類型的項目，在win可以通過輸入1、2、3這樣的數字然后按回車來選擇。
二、生成基本代碼的講解與簡單的修改
在幾個項目類型中，我們選擇了第一個TypeScript來作為我們編寫擴展的語言，其他幾個項目類型這里不做介紹。
項目結構介紹
我們創建的一個項目結構如下：
選擇創建項目后有四個輸入和一個選擇
- 輸入你擴展的名稱
- 輸入一個標志（項目創建的文件名稱用這個）
- 輸入對這個擴展的描述
- 輸入以后要發布用到的一名稱（和以后再發布時候有一個名字是對應上的）
- 是問你要不要創建一個git倉庫用於版本管理
以上幾個輸入都會在package.json 這個文件里面有對應的屬性來表示。輸入完之后就創建了如上圖的一個目錄結構。這里不要臉的復制了一下別人的目錄說明，由於我這個項目沒有讓生成git倉庫，所以沒有.gitignore 這個文件。還有node_modules等其他多出來的目錄結構是創建項目后運行
npm install這個命令生成出來的。
.
├── .gitignore //配置不需要加入版本管理的文件
├── .vscode // VS Code的整合
│ ├── launch.json
│ ├── settings.json
│ └── tasks.json
├── .vscodeignore //配置不需要加入最終發布到拓展中的文件
├── README.md
├── src // 源文件
│ └── extension.ts // 如果我們使用js來開發拓展，則該文件的后綴為.js
├── test // test文件夾
│ ├── extension.test.ts // 如果我們使用js來開發拓展，則該文件的后綴為.js
│ └── index.ts // 如果我們使用js來開發拓展，則該文件的后綴為.js
├── node_modules
│ ├── vscode // vscode對typescript的語言支持。
│ └── typescript // TypeScript的編譯器
├── out // 編譯之后的輸出文件夾(只有TypeScript需要，JS無需)
│ ├── src
│ | ├── extension.js
│ | └── extension.js.map
│ └── test
│ ├── extension.test.js
│ ├── extension.test.js.map
│ ├── index.js
│ └── index.js.map
├── package.json // 該拓展的資源配置文件
├── tsconfig.json //
├── typings // 類型定義文件夾
│ ├── node.d.ts // 和Node.js關聯的類型定義
│ └── vscode-typings.d.ts // 和VS Code關聯的類型定義
└── vsc-extension-quickstart.md
運行與簡單修改
介紹完目錄結構后，我們可以來運行一下看看效果如果。我們打開一個vscode並把我們的sample目錄自己拖拉到vscode的界面上，然后選擇調試窗口，並點擊開始調試或者直接按快捷鍵 F5
項目運行起來后，會調用一個新的vscode窗口在標題欄的地方顯示一個[擴展開發主機]的標題，然后這個窗口是支持我們剛才運行的插件項目的命令。
我們可以看到擴展插件已經正常的運行了，接下來我們可以來簡單修改一下代碼以實現不同的簡單功能。在修改之前需要簡單的認識兩個文件
package.json
{
"name": "sample", //插件擴展名稱（對應創建項目時候的輸入）
"displayName": "sample",
"description": "blog sample", //插件擴展的描述（對應創建項目時候的輸入）
"version": "0.0.1",
"publisher": "caipeiyu", //發布時候的一個名稱（對應創建項目時候的輸入）
"engines": {
"vscode": "^0.10.10"
},
"categories": [
"Other"
],
"activationEvents": [ //這是我們要理解的地方，是觸發插件執行一些代碼的配置
"onCommand:extension.sayHello" //這種是通過輸入命令來觸發執行的
],
"main": "./out/src/extension", //這個是配置TypeScript編譯成js的輸出目錄
"contributes": {
"commands": [{ //title 和 command是一個對應關系的
"command": "extension.sayHello", //這個是對應上面那個命令觸發的，在代碼里面也要用到
"title": "Hello World" //這個是我們在vscode里面輸入的命令
}]
},
"scripts": { //是在發布打包，或者其他運行時候，要執行的一些腳本命令
"vscode:prepublish": "node ./node_modules/vscode/bin/compile",
"compile": "node ./node_modules/vscode/bin/compile -watch -p ./",
"postinstall": "node ./node_modules/vscode/bin/install"
},
"devDependencies": { //這是開發的依賴包，如果有其他的依賴包，並要打包的話，需要把dev去掉
"typescript": "^1.8.5",
"vscode": "^0.11.0"
}
}
extension.ts
'use strict';
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';
// this method is called when your extension is activated
// your extension is activated the very first time the command is executed
export function activate(context: vscode.ExtensionContext) {
// Use the console to output diagnostic information (console.log) and errors (console.error)
// This line of code will only be executed once when your extension is activated
console.log('Congratulations, your extension "sample" is now active!');
// The command has been defined in the package.json file
// Now provide the implementation of the command with registerCommand
// The commandId parameter must match the command field in package.json
let disposable = vscode.commands.registerCommand('extension.sayHello', () => {
//只看這個地方'extension.sayHello'和 package.json 里面的 "onCommand:extension.sayHello" 是一個對應關系
// The code you place here will be executed every time your command is executed
// Display a message box to the user
vscode.window.showInformationMessage('Hello World!');
});
context.subscriptions.push(disposable);
}
// this method is called when your extension is deactivated
export function deactivate() {
}
這兩個文件是很重要的，基本整個插件編寫都是圍繞着這兩個文件來修改的，例如我們現在要增加多一個命令叫做 Hello Sample 那么我們先在 package.json 里面添加兩個配置
...
"activationEvents": [
"onCommand:extension.sayHello",
"onCommand:extension.saySample"
],
"contributes": {
"commands": [{
"command": "extension.sayHello",
"title": "Hello World"
},{
"command": "extension.saySample",
"title": "Hello Sample"
}]
},
...
添加完這兩個配置后，我們就需要在 extension.ts 里來注冊這個命令事件
let disposable = vscode.commands.registerCommand('extension.sayHello', () => {
vscode.window.showInformationMessage('Hello World!');
});
context.subscriptions.push(disposable);
let saySample = vscode.commands.registerCommand('extension.saySample', () => {
vscode.window.showInformationMessage('This is a new sample command!');
});
context.subscriptions.push(saySample);
修改完代碼后，再次運行效果如下圖
三、 打包與發布
我們編寫完一個插件，總不能要用的時候來運行代碼然后來使用吧，而且要分享給別人也不方便啊。有個很low的辦法，就是拷貝項目到插件目錄，但是這不靠譜吧。所以我們需要一個打包工具叫 vsce 同樣的可以用npm來安裝，打開cmd執行命令
npm install -g vsce
安裝完成后可以用命令窗口 cd 到你的項目目錄下去，然后執行命令
vsce publish
來發布到marketplace.visualstudio.com上面去。發布成功后可以在vscode里面用 ext install 來按這個插件。這種做法我個人覺得特別的麻煩，還需要去配置一個token，然后這個token還的找個地方記住，還會過期，而且在發布過程中還得祈禱網絡好。所以這里不介紹，有興趣的自己看這里。那么這里來介紹一個打包成 .vsix 的插件，而且這個插件也可以通過這個頁面上傳分享。
cd到項目目錄下，然后執行命令 vsce package 來打包一個
vsce package
Executing prepublish script 'node ./node_modules/vscode/bin/compile'...
Created: /sample/sample-0.0.1.vsix
我們可以看到執行了這個命令后，再執行一個 script 'node ./node_modules/vscode/bin/compile' 這個命令是在 package.json里面有配置
"scripts": {
"vscode:prepublish": "node ./node_modules/vscode/bin/compile",
"compile": "node ./node_modules/vscode/bin/compile -watch -p ./",
"postinstall": "node ./node_modules/vscode/bin/install"
},
執行完之后再創建了一個sample-0.0.1.vsix，這個就是我們打包好的插件安裝包了，只要把這個直接拖到vscode的窗口上，就會提示你安裝成功重啟vscode，我們重啟完之后就使用相關的命令。而且在插件的目錄下也多了對應sample的目錄。
至於上傳分享就自行研究咯。
由於本人水平有限，知識有限，文章難免會有錯誤，歡迎大家指正。如果有什么問題也歡迎大家回復交流。要是你覺得本文還可以，那么點擊一下推薦。