CODERFE

VSCode 插件开发——七牛图床工具

已经接近一个月没有更新博客文章了,可能是因为太懒了,也可能是比较忙。这段时间开始用 Visual Studio Code 进行开发,感觉它确实比其他编辑器更快、更轻,但唯一的缺点就是插件生态不是那么成熟。在开发微信小程序的时候,由于没有 API 提示,于是自己就开发了两个插件,一个是 vscode-wxml ,另一个则是 vscode-weapp-api 。昨天写博客的时候因为要插入图片,步骤也是极其繁琐,于是便有了 qiniu-fig-bed 这个插件。

开发准备

  • 阅读 vscode 的文档,但是目前只有英文文档,看起来比较吃力。文档地址
  • 阅读七牛云 SDK 文档,这个比较简单。文档地址
  • 安装两个工具:yo / generator-code

    1
    npm install -g yo generator-code
  • 打开 VSCode

目录结构

  • 生成目录结构:yo code , 目录大概会是这样子:

    structure

package.json 插件配置文件

extension.js 插件入口文件

package.json

其实开发 vscode 插件时,这个 package.json 是非常重要的,它不仅包含了常规的 npm 配置,也包含着 vscode 的诸多配置。

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
// 插件入口文件
"main": "./extension",
// 插件何时会被激活,在此设置为当打开一个 markdown 文件时激活插件
"activationEvents": [
"onLanguage:markdown"
],
"contributes": {
// 快捷键绑定,在此绑定为 `Ctrl + Q N` ,要注意并不是 `Ctrl + Q + N`
"keybindings": [
{
"command": "extension.qiniu",
"key": "ctrl+q n",
"mac": "cmd+q n",
"linux": "ctrl+q n",
"when": "editorTextFocus && editorLangId == 'markdown'"
}
],
//包含你的插件的配置选项,可以在 `file > preferences > User Settings` 下更改
"configuration": {
"type": "object",
"title": "qiniu cloud configuration",
"properties": {
"qiniu.enable": {
"type": "boolean",
"default": false,
"description": "是否开启七牛上传插件"
},
"qiniu.AccessKey": {
"type": "string",
"default": "",
"description": "七牛云 > 个人面板 > 密钥管理 > AK"
},
"qiniu.SecretKey": {
"type": "string",
"default": "",
"description": "七牛云 > 个人面板 > 密钥管理 > SK"
},
"qiniu.bucket": {
"type": "string",
"default": "",
"description": "任意一个空间名称"
},
"qiniu.remotePath": {
"type": "string",
"default": "",
"description": ""
},
"qiniu.domin": {
"type": "string",
"default": "",
"description": "与空间名称对应的空间域名"
}
}
}
}

extension.js

由于图床插件比较简单,所以我把所有的代码都写在主入口文件 extension.js

  1. 首先要在项目中安装七牛 SDK

    1
    npm install --save qiniu
  2. 导入关键模块,vscode & qiniuvscode 中包含了我们所需的所有的接口,而 qiniu 模块则负责主要的上传工作

    1
    2
    let vscode = require('vscode');
    let qiniu = require('qiniu');
  3. 注册一个调用插件的方法,当然这个方法要与 package.json 里的相对应

    package.json

    1
    "command": "extension.qiniu"

    extension.js

    1
    let disposable = vscode.commands.registerCommand('extension.qiniu', function () {})
  4. 获取用户的配置

    1
    const config = vscode.workspace.getConfiguration('qiniu');
  5. 开发过程中用到的其他的接口

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // 在顶部显示一个输入框,获取文件路径
    vscode.window.showInputBox({
    placeHolder: "请输入上传到七牛云空间后的文件名,可以包含前缀,例如:blog/name.png"
    });
    // 在顶部显示上传成功的信息
    vscode.window.showInformationMessage("上传成功!");
    // 获取用户当前光标位置,并在光标后插入返回的 markdown 图片链接
    let editor = vscode.window.activeTextEditor;
    editor.edit((textEditorEdit) => {
    textEditorEdit.insert(editor.selection.active, image);
    });
  6. 具体上传图片的业务流程代码可以参考七牛云的官方文档,文档地址

存在的问题

  • 在输入本地图片路径是,没有验证图片路径的有效与否
  • 弹出的第二个输入框是用于输入上传至七牛空间之后的文件名称,这个由于暂时没有设置默认名称,因此必须填写,格式如下,可省略文件类型:

    1
    2
    3
    前缀/文件名称
    prefix/file-name
    blog/test
  • 目前功能尚不完整,有待继续增强。

如何安装使用

安装

在 vscode 中,Ctrl + Shift + P ,然后 ext install qiniu-fig-bed

使用

打开 markdown 文件,然后 Ctrl + Q N ,要注意不是 Ctrl + Q + N ,在状态栏会有提示

Github

qiniu-fig-bed

更新

2016.11.14 在上传代码中引入 node 的 fs 模块来获取文件类型,因此上传文件的时候可直接省略文件类型名称