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文件，先来看看默认生成的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
{
  "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 编写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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，进行发布，如果成功，会返回类似内容：

1
Successfully published publisherName.extensionName@version!

尾声

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