VSCode插件開發梳理

紙上得來終覺淺，深知此事要躬行，所以來體驗一下VSCode的插件開發，網上有不少小夥伴的文章給了很大幫助，本文的代碼是直接使用網上的內容，特此整理出來給後來學習的夥伴們參考

https://www.cnblogs.com/lianm...
http://www.cnblogs.com/Leo_wl...

搭建環境

首先Nodejs和VSCode須要提早安裝好，這裏對這塊的安裝再也不贅述。接下來安裝yo 這是vscode團隊爲插件開發提供的工具

npm install -g yo generator-code

安裝成功後，經過yo code生成插件開發項目，這裏官方推薦使用typescript，固然咱們更熟悉javascript，其他的根據狀況默認便可

一路生成後，經過VSCode打開（File->Open Folder）剛生成的插件項目,在這一堆文件中，咱們只關心兩個重點，extension.js 是插件的入口文件，package.json包含插件的配置信息

準備完成後，爲了先驗證下插件項目正常OK，在VSCode中F5運行（或Debug->start）若是你能夠看到VSCode又啓動了一個窗口運行插件項目,shift+ctrl+p 輸入Hello World若是在右下角能看到Hello World的提示信息就OK 了

若是在編輯插件時內容作了變動，在運行的窗口只需經過Ctrl+r 便可刷新，無需關閉從新運行

插件內容

這裏就開始寫插件具體的內容了，發揮創造想象力的時候到了，可是一開始無從下手，能夠參考下官網的文檔，寫的非常詳細，雖然是英文的可是直接翻譯讀起來也沒特別怪

官方入門示例一：https://code.visualstudio.com...

這裏的插件內容是根據官網示例二的Markdown字數統計作了修改後的內容，能夠統計任意文件中所編寫的字符數量

新建wordCounter.js

class WordCounter {
    constructor(_vscode) {        //構造函數，傳入vscode對象
        this.vscode = _vscode;
        this.init();
    }
 
    init() {                      //初始化
        var vscode = this.vscode;
        var StatusBarAlignment = vscode.StatusBarAlignment;
        var window = this.vscode.window;
 
        //statusBar，是須要手動釋放的
        this.statusBar = window.createStatusBarItem(StatusBarAlignment.Left);
 
        //跟註冊事件相配合的數組，事件的註冊，也是須要釋放的
        var disposable = [];
        //事件在註冊的時候，會自動填充一個回調的dispose到數組
        window.onDidChangeTextEditorSelection(this.updateText, this, disposable);
 
        //保存須要釋放的資源
        this.disposable = vscode.Disposable.from(disposable);
 
        this.updateText();
        this.statusBar.show();
    }
 
    updateText() {       //如今快凌晨兩點，偷個懶早點睡，臨時改爲字符數量了。
        var window = this.vscode.window;
        this.editor = window.activeTextEditor;
        var content = this.editor.document.getText();
        var len = content.replace(/[\r\n\s]+/g, '').length;
        this.statusBar.text = `啦啦啦...已經敲了${len}個字符了`;
    }
 
    dispose() {  //實現dispose方法
        this.disposable.dispose();
        this.statusBar.dispose();
    }
}
 
module.exports = WordCounter;

修改extension.js

// vscode這個包，包含了裏面全部的api
const vscode = require('vscode');
// 在插件被激活的時候，這個方法會被調用
function activate(context) {
    var WordCounter = require('./wordCounter');
    var counter = new WordCounter(vscode);
    //須要釋放的資源都在這裏依次push到這個數組裏面
    context.subscriptions.push(counter);
}
exports.activate = activate;

// this method is called when your extension is deactivated
function deactivate() {
}
exports.deactivate = deactivate;

修改package.json

{
    "name": "wordcount",
    "displayName": "WordCount",
    "description": "wordcount",
    "version": "0.0.1",
    "engines": {
        "vscode": "^1.29.0"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "*"
    ],
    "main": "./extension",
    "contributes": {
        "commands": [
            {
                "command": "extension.sayHello",
                "title": "Hello World"
            }
        ]
    },
    "scripts": {
        "postinstall": "node ./node_modules/vscode/bin/install",
        "test": "node ./node_modules/vscode/bin/test"
    },
    "devDependencies": {
        "typescript": "^3.1.4",
        "vscode": "^1.1.25",
        "eslint": "^4.11.0",
        "@types/node": "^8.10.25",
        "@types/mocha": "^2.2.42"
    }
}

而後就shift+ctrl+p進入到插件運行環境下測試就能夠在狀態欄中的字符數量提示了

本地使用插件

插件編寫好了以後，如何正常在VSCode開發過程當中使用，這塊直接把開發的插件項目拷貝到VSCode存放安裝插件的目錄下

C:\Users\your name\.vscode\extensions

插件項目拷貝進去後，重啓VSCode，而後隨意打開一個新的項目，在狀態欄也能夠看到字符統計的這個功能了

插件發佈

官方插件發佈流程：https://code.visualstudio.com...

Visual Studio Code的應用市場基於微軟本身的Azure DevOps，插件的身份驗證、託管和管理都是在這裏。要發佈到應用市場首先得有應用市場的publisher帳號

1.註冊帳號 https://aka.ms/SignupAzureDevOps
2.獲得token,登陸後選擇Security,按照下圖上的方式勾選，這裏注意獲得token必定要複製下來保存，由於第二次進入就不會再顯示了

3.安裝vsce打包工具 npm install -g vsce
4.使用vsce工具命令建立發佈帳號vsce create-publisher your-publisher-name
5.登陸帳號vsce login your-publisher-name
6.發佈vsce publish

發佈成功後，能夠訪問https://marketplace.visualstu... 查看

在VSCode中也能夠搜索進行安裝

這裏在發佈時有幾個常見錯誤：
錯誤1：Error:Missing publisher name. Learn more:https://code.visualstudio.com...
解決方式：在package.json中將剛剛建立好的發佈帳號配置進去"publisher":"your name",

錯誤2：Error:Make sure to edit the README.md file before you publish your extension
解決方式：看下README.md文件中是否有http地址

錯誤3：A ‘repository’field is missing from the 'package.josn' manifest file .Do you want to continue? [y/n]
解決方式：y

代碼下載

訪問百度網盤地址直接下載便可
https://pan.baidu.com/s/1-veA...