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

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

let vscode = require('vscode')
let qiniu = require('qiniu')

3. 注册一个调用插件的方法，当然这个方法要与 package.json 里的相对应

   package.json

"command": "extension.qiniu"

extension.js

let disposable = vscode.commands.registerCommand(
  'extension.qiniu',
  function () {}
)

4. 获取用户的配置

const config = vscode.workspace.getConfiguration('qiniu')

5. 开发过程中用到的其他的接口

// 在顶部显示一个输入框，获取文件路径
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. 具体上传图片的业务流程代码可以参考七牛云的官方文档，文档地址

存在的问题

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

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

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