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

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

Copyright ©; 2016-2022 coderfee, All rights reserved.