以前編寫了一個vscode插件用vscode寫博客和發佈,而後有園友要求寫一篇來介紹如何開發一個vscode擴展插件,或者說介紹開發這個插件的過程。然而文章尚未寫,園子裏面已經有人發佈一個文章,是園友上位者的憐憫的VSCODE 插件初探介紹了本身開發的一個插件與如何簡單的開發一個插件。雖然已經有這麼一個文章,可是我以爲仍是能夠更仔細的來介紹如何來開發一個vscode插件,也算以前說好要寫這麼一個文章的一個承諾吧,因而就有了還這麼篇文章。html
爲了演示一個安裝環境,我安裝了一個乾淨的win10系統來操做截圖。node
1.首先咱們須要安裝一個最基本的Visual Studio Code,咱們能夠先到官網下載一最新版本的來進行安裝,點擊上面的鏈接,進去下載老是懂的吧。下載完後點擊安裝,而後一直下一步安裝就能夠。
git
2.安裝完vscode後呢,咱們就須要來看如何開發咱們的本身的插件了,參考官方文檔Your First Extension(Example - Hello World)。根據文檔咱們得知咱們須要安裝一個 node.js,一樣的點擊前面的鏈接,到nodejs的中文網站下載一個安裝程序,下載完點擊安裝下一步就能夠。
typescript
3.在安裝完上面兩個工具後,咱們還須要一個生產插件代碼的東西,也就是 Yeoman 和 VS Code Extension generator.Yeoman的介紹不在本文章中,本身點擊上面的鏈接去了解。咱們能夠打開cmd來執行下面的命令來安裝這兩個工具。npm使用介紹npm
npm install -g yo generator-codejson
在完成上面的安裝後,能夠經過輸入命令網絡
yo codeide
來生成咱們要的基本代碼。
工具
在os系統上能夠經過用上下鍵來選擇要建立哪一種類型的項目,在win能夠經過輸入一、二、3這樣的數字而後按回車來選擇。
在幾個項目類型中,咱們選擇了第一個TypeScript來做爲咱們編寫擴展的語言,其餘幾個項目類型這裏不作介紹。post
咱們建立的一個項目結構以下:
選擇建立項目後有四個輸入和一個選擇
以上幾個輸入都會在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的目錄。
至於上傳分享就自行研究咯。
因爲本人水平有限,知識有限,文章不免會有錯誤,歡迎你們指正。若是有什麼問題也歡迎你們回覆交流。要是你以爲本文還能夠,那麼點擊一下推薦。