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

October 26,2016
0
VSCode

开发准备

  • 阅读 vscode 的文档,但是目前只有英文文档,看起来比较吃力。文档地址

  • 阅读七牛云 SDK 文档,这个比较简单。文档地址

  • 安装两个工具:yo / generator-code

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

目录结构

  • 生成目录结构:yo code

package.json 插件配置文件

extension.js 插件入口文件

package.json

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

// 插件入口文件
"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
npm install --save qiniu
  1. 导入关键模块,vscode & qiniuvscode 中包含了我们所需的所有的接口,而 qiniu 模块则负责主要的上传工作
let vscode = require('vscode')
let qiniu = require('qiniu')
  1. 注册一个调用插件的方法,当然这个方法要与 package.json 里的相对应

    package.json

"command": "extension.qiniu"

extension.js

let disposable = vscode.commands.registerCommand(
  'extension.qiniu',
  function () {}
)
  1. 获取用户的配置
const config = vscode.workspace.getConfiguration('qiniu')
  1. 开发过程中用到的其他的接口
// 在顶部显示一个输入框,获取文件路径
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)
})
  1. 具体上传图片的业务流程代码可以参考七牛云的官方文档,文档地址

存在的问题

  • 在输入本地图片路径是,没有验证图片路径的有效与否

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

    前缀/文件名称
    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 模块来获取文件类型,因此上传文件的时候可直接省略文件类型名称


商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,您可以自由地在任何媒体以任何形式复制和分发作品,也可以修改和创作,但是分发衍生作品时必须采用相同的许可协议。
本文采用 CC BY-NC-SA 4.0 - 非商业性使用 - 相同方式共享 4.0 国际进行许可。