vscode編寫插件詳細過程

前言

以前編寫了一個vscode插件用vscode寫博客和發佈,而後有園友要求寫一篇來介紹如何開發一個vscode擴展插件,或者說介紹開發這個插件的過程。然而文章尚未寫,園子裏面已經有人發佈一個文章,是園友上位者的憐憫的VSCODE 插件初探介紹了本身開發的一個插件與如何簡單的開發一個插件。雖然已經有這麼一個文章,可是我以爲仍是能夠更仔細的來介紹如何來開發一個vscode插件,也算以前說好要寫這麼一個文章的一個承諾吧,因而就有了還這麼篇文章。html

1、開發環境介紹與安裝

爲了演示一個安裝環境,我安裝了一個乾淨的win10系統來操做截圖。node

1.首先咱們須要安裝一個最基本的Visual Studio Code,咱們能夠先到官網下載一最新版本的來進行安裝,點擊上面的鏈接,進去下載老是懂的吧。下載完後點擊安裝,而後一直下一步安裝就能夠。
git

2.安裝完vscode後呢,咱們就須要來看如何開發咱們的本身的插件了,參考官方文檔Your First Extension(Example - Hello World)。根據文檔咱們得知咱們須要安裝一個 node.js,一樣的點擊前面的鏈接,到nodejs的中文網站下載一個安裝程序,下載完點擊安裝下一步就能夠。
typescript

3.在安裝完上面兩個工具後,咱們還須要一個生產插件代碼的東西,也就是 YeomanVS Code Extension generator.Yeoman的介紹不在本文章中,本身點擊上面的鏈接去了解。咱們能夠打開cmd來執行下面的命令來安裝這兩個工具。npm使用介紹npm

npm install -g yo generator-codejson

在完成上面的安裝後,能夠經過輸入命令網絡

yo codeide

來生成咱們要的基本代碼。
工具

在os系統上能夠經過用上下鍵來選擇要建立哪一種類型的項目,在win能夠經過輸入一、二、3這樣的數字而後按回車來選擇。

2、生成基本代碼的講解與簡單的修改

在幾個項目類型中,咱們選擇了第一個TypeScript來做爲咱們編寫擴展的語言,其餘幾個項目類型這裏不作介紹。post

TypeScript語法自行理解

項目結構介紹

咱們建立的一個項目結構以下:

選擇建立項目後有四個輸入和一個選擇

  1. 輸入你擴展的名稱
  2. 輸入一個標誌(項目建立的文件名稱用這個)
  3. 輸入對這個擴展的描述
  4. 輸入之後要發佈用到的一名稱(和之後再發布時候有一個名字是對應上的)
  5. 是問你要不要建立一個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);

修改完代碼後,再次運行效果以下圖

3、 打包與發佈

咱們編寫完一個插件,總不能要用的時候來運行代碼而後來使用吧,並且要分享給別人也不方便啊。有個很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的目錄。

至於上傳分享就自行研究咯。


因爲本人水平有限,知識有限,文章不免會有錯誤,歡迎你們指正。若是有什麼問題也歡迎你們回覆交流。要是你以爲本文還能夠,那麼點擊一下推薦。

相關文章
相關標籤/搜索