VS Code—插件的开发

vscode 插件开发步骤

说再多也不如做一遍,这里我们一起来一步步做一个插件。就做官网的那个demo,wordCounter,用于统计当前页单词量。 官网是TypeScript,我不会...这里就用nodejs来示例。

一、搭建环境,准备工作

首先当然是安装nodejs跟vscode,这里我略过了,不用我多嘴。

vscode 团队,为插件开发提供了一个工具,先全局安装这个,然后执行 yo code 来开始我们的工作。

npm install -g yo generator-code

yo code


我们选第二项,这里需要注意下:一般情况可以用键盘的 ↑ ↓ 键来调整,但是win10有时候按了没反应,这时候可以输入2回车,来达到同样的目的。

然后会出现以下一系列选项,一路回车就好...... 相信起名字不会难道各位,其实我自己很多时候为一个变量的命名会耽误很久,改很多次。囧。


然后它会自动执行 npm install 来加载vscode这个依赖。我这里网不行所以直接差掉,自己用 cnpm install 来安装,没有影响,可以直接关闭。

准备工作到此完毕,我们开始搞代码。

二、结构简介


三、Hello World,vscode加载插件的流程

扯了那么多,先看看helloworld的效果吧。直接按F5


不出意外,会弹出一个提示消息:“Hello World”

VSCODE ,是如何加载并运行插件的。

这里我参考了不少资料,官网的文档,和其它的一些文章。四级的英语水平,头一次感觉到稍许作用。

https://code.visualstudio.com/docs/extensionAPI/activation-events

http://www.3fwork.com/b102/002764MYM005691/

https://code.visualstudio.com/docs/extensionAPI/extension-manifest

1.package.json 告知vscode,自己定义的事件,和触发事件的方式

"activationEvents": [

    "onCommand:extension.sayHello"

],

"contributes": {

    "commands": [{

        "command": "extension.sayHello",

        "title": "Hello World"

    }]

}

activationEvents是定义事件触发的时间,contributes是定义有哪些事件。commands 中的command和title是事件的名称,和显示给用户的内容(因为这里触发时间是在用户command的时候,即在F1中选择命令。)

先说定义的事件,事件名称,个人建议还是加上自己的命名空间。比如:extension.插件名.事件名 。 各有所爱吧,我觉得这样直观一些。定义的command事件,就可以在 F1 中找到对应的命令,用起来很方便。这里是用户点击了【Hello World】这个项,就触发了【extension.sayHello】这个事件。

然后是 activationEvents ,这个表示事件被激活的时间。这里是指:用户在F1中选择了命令的时候。之后会介绍其它的激活方式。

2.extension.js 程序入口

我使用的是注释的方式来描述extension.js里面的各个地方的作用:

// vscode这个包,包含了里面所有的api

var vscode = require('vscode');


// 在插件被激活的时候,这个方法会被调用

function activate(context) {


    //这是注册在package.json里面的事件,且是command方式触发的

    //注意:这里的command注册事件,返回的是一个类似于“非托管资源的对象”,难道是实现了“idispossible接口”么...吐个嘈

    //这个需要手动释放

    var disposable = vscode.commands.registerCommand('extension.sayHello', function () {


        //用户选择这个command指令的时候,就会触发里面的方法

        //这里是显示了一个helloworld提示框

        vscode.window.showInformationMessage('Hello World!');

    });


    //需要释放的资源都在这里依次push到这个数组里面

    //注意,这些非托管的资源,都含有dispose方法,自己封装的对象,如果有需要手动释放的资源,请也实现dispose方法吧

    context.subscriptions.push(disposable);

}

exports.activate = activate;

四、稍稍改动,做一个自启动统计词量的插件

题外话:我的了解,vscode是基于electron做的,而electron好像是在新版本chrome出来一周还是一个月,就被更新chrome到electron,所以在跟vscode 的前端交互这里,前端方面不用考虑兼容写法,什么新语法糖随便用...

1.修改package.json

"activationEvents": [   // "*" 表示在vscode启动的时候,就启动插件了。不太友好,谨慎使用。

    "*"

],

// "contributes": {     // 自启动插件,不需要命令

//  "commands": [{

//      "command": "extension.sayHello",

//      "title": "Hello World"

//  }]

// },

2.添加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;

3.在入口 extension.js中调用一下wordCounter.js

// vscode这个包,包含了里面所有的api

var vscode = require('vscode');

// 在插件被激活的时候,这个方法会被调用

function activate(context) {

    var WordCounter = require('./src/wordCounter');

    var counter = new WordCounter(vscode);

    //需要释放的资源都在这里依次push到这个数组里面

    //注意,这些非托管的资源,都含有dispose方法,自己封装的对象,如果有需要手动释放的资源,请也实现dispose方法吧

    // context.subscriptions.push(disposable);

    context.subscriptions.push(counter);

}

exports.activate = activate;

简单看一下效果,F5启动:


五、Demo,以及发布的问题

下载wordCounter插件项目

发布到插件市场,其实挺麻烦的。流程大概是这样...如果我没记错。

1 注册microsoft账号

2 注册开发者账号

3 申请token用于远程发布

4 本地安装vsce

4 本地利用token登陆

5 配置文件,进行发布

发布流程 建议前往 https://code.visualstudio.com/docs/tools/vscecli查阅详细步;


如果只是自己用就方便多了,

直接把项目拷贝到 xxx\.vscode\extensions文件夹下

Windows %USERPROFILE%\.vscode\extensions

Mac $HOME/.vscode/extensions

Linux$HOME/.vscode/extensions

源自:https://www.cnblogs.com/lianmin/p/5499266.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249