02月13, 2017

VSCODE插件初体验

前言

使用vscode也有大半年时间了,从一开始的各种问题到现在渐渐好用。插件维护比sublime好,速度能秒atom,这大概就是现在离不开vscode的原因吧。虽然它还有不少问题,比如代码高亮和智能提示,尤其是在vue这种template文件中,完全没有用!

不过今天不是来吐槽这个的。虽然说到vscode的插件比sublime维护方便,但是插件数量还是比不上的,毕竟时间还不长。比如我一直很喜欢的作者信息生成的插件,什么名字忘记了,毕竟卸载好久了...主要就是设置了作者姓名,邮箱这些信息之后,在顶部自动生成包括作者/邮箱/时间还有其他自定义的信息。

在vscode插件市场找了半天也没找到,决定自己动手撸一个。

需求准备

首先,确定下这个插件的需求:

  • 自动生成作者信息,部分信息(作者/邮箱)可配置。
  • 根据文件类型生成不同注释。
  • 支持自定义模版。

其他准备

这两个文档在之后的开发会用到,下面会讲到。

开发插件

1. vscecli信息

由于后面生成项目要用到发布者信息,我就把vscecli的生成发布者信息部分先讲了,当然后面发布还要用到它。下面是生成发布者信息的步骤,最好还是按照vscecli的文档来做。

  • 安装:npm install -g vsce
  • 创建:vsce create-publisher (publisher name) (publisher name就是发布者的名字,是你在visualstudio注册的名字,此外你还需要Personal Access Token)
  • 登陆:vsce login (publisher name) (这一步会要求你输入发布者名字和Personal Access Token)

至此,本地会记住你的信息,如果你需要更换用户,也可以使用vsce logout登出,并换账号登陆。

2. 生成项目

这里我使用了官方的generator,生成必要的package.json信息,如果你自己去写,可以参看官网文档

  • npm install -g yo generator-code && yo code

alt

可以看到,提供了几种基本插件/主题编写的模版,由于我没学过typescript,这里选择了javascript的插件。

按部就班填写信息,如果你已经在上一步登陆vsce,这里的publisher name是自动填写的,你也可以手动填写,但保持和你的注册用户名一致。

alt

确认后,会自动使用npm安装依赖,耐心等待一会,项目就生成完毕。

我这里没有让它自动生成git项目,可以通过git remote add添加你自己的github仓库地址。

alt

生成的项目结构大概是这样的,由于功能比较简单,这里只要关心extension.js就可以了,这是我们的主要功能js。

3. manifest解释

vscode的manifest文件,也就是package.json文件,先来看看默认生成的:

{
    "name": "vscode-test",  // 插件名字
    "displayName": "vscode-test", // 插件显示名字
    "description": "test",
    "version": "0.0.1",  // 插件版本
    "publisher": "edwardhjp",  // 发布者
    "engines": {
        "vscode": "^1.5.0"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "onCommand:extension.sayHello" // 激活事件,onCommand表示command调用,就是在vscode用`cmd + shift + p`调出来后使用,其他的参看文档。
    ],
    "main": "./extension", // 入口文件
    "contributes": {
        "commands": [{
            "command": "extension.sayHello",  // `cmd + shift + p`实际执行的command,和上面的激活事件要对应
            "title": "Hello World" // `cmd + shift + p`调用显示名字
        }]
    },
    "scripts": {
        "postinstall": "node ./node_modules/vscode/bin/install",
        "test": "node ./node_modules/vscode/bin/test"
    },
    "devDependencies": {
        "typescript": "^2.0.3",
        "vscode": "^1.0.0",
        "mocha": "^2.3.3",
        "eslint": "^3.6.0",
        "@types/node": "^6.0.40",
        "@types/mocha": "^2.2.32"
    }
}

基本解释都写在注释里了,根据自己需要修改吧。

4. extension.js编写

var vscode = require('vscode'); // 包含vscode所有api的模块

function activate(context) {
    // 插件激活事件,必须与package.json的对应
    var disposable = vscode.commands.registerCommand('extension.sayHello', function () {
        // Info信息框
        vscode.window.showInformationMessage('Hello World!');
    });

    context.subscriptions.push(disposable);
}
exports.activate = activate;

// 取消插件激活事件
function deactivate() {
}
exports.deactivate = deactivate;

官方的js文件,就是在调用的时候弹一个Hello World!的提示框。原则上你的逻辑都应该在registerCommand的function里面。如果你的逻辑很复杂,建议把逻辑移到外面,合理解构代码。

你可以在vscode打开项目的目录文件,然后使用F5进行debug模式,vscode会起一个扩展主机给你进行开发。

但是我的vscode不知道什么原因,扩展主机一直失败。我都是直接把项目拷贝到本地插件目录进行开发的,每次debug都要重启vscode,说多了都是泪~

如果你知道怎么解决,请告诉我!

5. 插件发布

又要用到刚才的vscecli了。

在项目根目录使用:vsce package打包你的插件,会生成一个extensionName-version.vsix的信息文件。

然后:vsce publish,进行发布,如果成功,会返回类似内容:

Successfully published publisherName.extensionName@version!

尾声

好了,现在你可以在vscode市场搜索你自己上传的插件了。祝大家写得愉快!

本文链接:https://excaliburhan.com/post/vscode-extension-first-taste.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。