導語：有些項目會有這樣的需求萝嘁，為開發(fā)人員搭建一套開發(fā)環(huán)境IDE柴我，包含調試窗口媒区、編輯窗口靡砌、一系列其他操作；說的通俗一點就是做一個類似微信小程序的 微信web開發(fā)者工具 這樣的產品珊楼。我仔細思考了一下通殃，VSCode本身是一款開源產品，采用Electron和插件配置也能很容易對其界面和功能進行二次開發(fā)厕宗；于是有了這篇文章画舌，根據(jù)時間來記錄我的探索。（如果長時間停更了已慢，說明我踩到了無法逾越的坑了_）
- 公司目前已有類似產品——weTerm曲聂，具體實現(xiàn)我不太清楚，就界面和配置文件來看應該是基于VSCode的二次開發(fā)佑惠；
- 每個階段的發(fā)現(xiàn)朋腋，記錄在Github：
https://github.com/git-yx/vscode
項目階段（持續(xù)更新）
- 第一階段——介紹如何開發(fā)VSCode插件
- 第二階段——詳細分析VSCode開源代碼
一、開發(fā)環(huán)境介紹與安裝
- 安裝Visual Studio Code 膜楷，我們可以先到官網下載一最新版本的來進行安裝旭咽，下載完后點擊安裝，然后一直下一步安裝就可以赌厅；（注意：創(chuàng)建插件模板之后穷绵，會強制你更新VSCode至最新版本，否則運行插件會報error）
- 安裝 NodeJs 特愿，選擇最近的LTS版本即可仲墨；
- 在安裝完上面兩個工具后勾缭，我們還需要一個生產插件代碼的工具，也就是 Yeoman 和 VS Code Extension generator目养； Yeoman的介紹不在本文章中俩由，具體信息可以訪問 Yeoman；
★ 具體命令為：npm install -g yo generator-code
二混稽、生成插件基本結構
在環(huán)境配置完成以后采驻，就能使用 yo 命令來生成項目基本結構了。
- 使用 yo 命令來生成插件基本結構：yo code
vscode-init.png
可以根據(jù)自己需要選擇需要的模板類型匈勋，此處我選擇第一項： > New Extension (TypeScript)礼旅，如果對于 typescript 不太懂可以查看鏈接： TypeScript中文網
- 選擇創(chuàng)建項目后有四個輸入和一個選擇
- 輸入你擴展的名稱
- 輸入一個標志（項目創(chuàng)建的文件名稱用這個）
- 輸入對這個擴展的描述
- 問你要不要創(chuàng)建一個git倉庫用于版本管理
- 選擇使用 NPM 還是 Yarn 來管理依賴
-
依次回答列舉的幾個問題，然后就能得到一個嶄新的模板了~
vscode-init-yarn.png
- 項目初始化之后會得到這樣的目錄結構：
├── .vscode // VS Code的整合
│ ├── launch.json
│ ├── settings.json
│ ├── extensions.json
│ └── tasks.json
├── .vscodeignore //配置不需要加入最終發(fā)布到拓展中的文件
├── README.md
├── src // 源文件
│ └── extension.ts // 如果我們使用js來開發(fā)拓展洽洁，則該文件的后綴為.js
│ └── test // test文件夾
├── node_modules
├── out // 編譯之后的輸出文件夾(只有TypeScript需要痘系，JS無需)
├── package.json // 該拓展的資源配置文件
├── tsconfig.json // ts配置
└── vsc-extension-quickstart.md
三、插件運行和簡單修改
- 介紹完目錄結構后饿自，我們可以來運行一下看看效果如果汰翠。我們打開一個VSCode并把我們的插件目錄自己拖到vscode的界面上；選擇調試窗口昭雌，并點擊開始調試或者直接按快捷鍵 F5
vscode-debug.png
- 然后我們能看到复唤，VSCode 重新打開了一個窗口：按住 Ctrl + P 可以測試模板命令 > hello world
vscode-run.gif
我們可以看到擴展插件已經正常的運行了，接下來我們可以來簡單修改一下代碼以實現(xiàn)不同的簡單功能烛卧。在修改之前需要簡單的認識兩個文件佛纫。
(★) package.json
{
"name": "first-extension",
"displayName": "first extension",
"description": "the first step to create vscode extension",
"version": "0.0.1",
"engines": {
"vscode": "^1.36.0"
},
"categories": [
"Other"
],
"activationEvents": [ // 這是我們要理解的地方，是觸發(fā)插件執(zhí)行一些代碼的配置
"onCommand:extension.helloWorld" //這種是通過輸入命令來觸發(fā)執(zhí)行的
],
"main": "./out/extension.js", //這個是配置TypeScript編譯成js的輸出目錄
"contributes": {
"commands": [{ //title 和 command是一個對應關系的
"command": "extension.helloWorld", //這個是對應上面那個命令觸發(fā)的总放，在代碼里面也要用到
"title": "Hello World" //這個是我們在vscode里面輸入的命令
}]
},
"scripts": { //是在發(fā)布打包呈宇，或者其他運行時候，要執(zhí)行的一些腳本命令
"vscode:prepublish": "yarn run compile",
"compile": "tsc -p ./",
"watch": "tsc -watch -p ./",
"pretest": "yarn run compile",
"test": "node ./out/test/runTest.js"
},
"devDependencies": { //這是開發(fā)的依賴包局雄，如果有其他的依賴包甥啄，并要打包的話，需要把dev去掉
"@types/glob": "^7.1.1",
"@types/mocha": "^5.2.6",
"@types/node": "^10.12.21",
"@types/vscode": "^1.36.0",
"glob": "^7.1.4",
"mocha": "^6.1.4",
"typescript": "^3.3.1",
"tslint": "^5.12.1",
"vscode-test": "^1.0.0-next.0"
}
}
(★) extension.ts
- 這個文件我簡單梳理了一下炬搭，將英文去掉了蜈漓，增加了一些簡單描述。
// 導入 vscode 全局api
import * as vscode from 'vscode';
// 暴露 命令被激活執(zhí)行函數(shù)
// 鍵盤組合鍵 ctrl + p 可以輸入指令
export function activate(context: vscode.ExtensionContext) {
// 當接收到指令 執(zhí)行生命周期
console.log('ext is now active!');
// 命令定義在 package.json內尚蝌，此處匹配命令執(zhí)行函數(shù)
let disposable = vscode.commands.registerCommand('extension.helloWorld', () => {
vscode.window.showInformationMessage('Hello World!');
});
// 掛載執(zhí)行函數(shù)到 vscode上下文中
context.subscriptions.push(disposable);
}
// 暴露 命令被凍結執(zhí)行函數(shù)
export function deactivate() {
console.log('ext is now deactive!');
}
這兩個文件是很重要的迎变，基本整個插件編寫都是圍繞著這兩個文件來修改的，例如我們現(xiàn)在要增加多一個命令叫做 hello 那么我們先在 package.json 里面添加兩個配置
...
"activationEvents": [
"onCommand:extension.helloWorld",
"onCommand:extension.hello"
],
"contributes": {
"commands": [{
"command": "extension.helloWorld",
"title": "Hello World"
},{
"command": "extension.hello",
"title": "hello"
}]
}
...
添加完這兩個配置后飘言，我們就需要在 extension.ts 里來注冊這個命令事件
// 根據(jù) package.json 來注冊 extension.hello 命令
let hello = vscode.commands.registerCommand('extension.hello',()=>{
// vscode 的提示接口
vscode.window.showInformationMessage('hello ~');
});
// 掛載命令到上下文中
context.subscriptions.push(hello);
- 修改之后再次運行衣形，會發(fā)現(xiàn)多了一個 hello 的命令。
四、打包與發(fā)布
這里我只介紹將插件打包成本地插件文件谆吴，我們的目的是搭建自己的IDE環(huán)境倒源，今后只需要搭建一個云存儲來存放開發(fā)者開發(fā)的ext插件即可，不需要上傳至微軟的倉庫中句狼。 若有發(fā)布至vscode的需要笋熬，可以查看： VSCode插件發(fā)布
這里介紹 VSCode插件打包工具 vsce：
- 作用：將已經寫好的 插件代碼 打包成 vsix 文件，便于插件管理腻菇；
- 安裝：yarn add vsce 或者 npm install vsce
一胳螟、執(zhí)行打包
cd 到項目目錄下，執(zhí)行命令 vsce package ：順利的話就能在項目根目錄下找到 項目名-版本號.vsix 的文件筹吐。
-
錯誤踩坑：
vscode-err.png在 package.json 文件中增加字段
"publisher": "xxx"即可糖耸；
二、使用插件
-
按照下圖找到 vsix 文件安裝入口丘薛，選擇已經打包好的 vsix 文件即可嘉竟。
vscode-ext-install.png -
安裝完成后，即可在插件->已安裝插件 找到自己剛剛安裝的插件（如果沒找到洋侨，請重啟VSCode）舍扰。
vscode-show.png
五、歸納整理
這里只介紹了 VSCode 的命令接口希坚，其實VSCode還提供了各種類型的相當多的接口边苹。我們可以根據(jù)自己需要來調用合適的接口滿足自己的需求。以下裁僧，我列舉幾個常見的 IDE 需要的需求：
- 類似 微信web開發(fā)者工具 的代碼編譯勾给、代碼預覽、代碼壓縮并提交至云端锅知、用戶登錄功能；
- 針對不同類型文件的代碼提示功能脓钾；
這里我簡單介紹了 VSCode 插件開發(fā)的基本步驟售睹，下一節(jié)我將會詳細分析 VSCode 的開源代碼。從布局開始可训，剖析code的運行機制昌妹，插件的插拔機制。
部分圖片握截、文字摘取自：
- cnblogs：《vscode編寫插件詳細過程》
