vb不能插入png图片_upload here - 代码中极速插入图片地址的 vscode 插件

upload here - 代码中极速插入图片地址的 vscode 插件

最近感觉和图片上传杠上了

图片上传是前端开发流程中必须但又不是很引人注意的一环，通常会跑到某个上传图片的网页，大概分这么几步：

• 打开网页
• 切换到Finder，拖拽上传，或者网页选择上传
• 复制网页链接
• 切换编辑器
• 粘贴至项目

甚至之前尝试过 Mac 自带的 Automator ，在系统右键添加一个服务：

然后拿到图片地址，粘贴到代码里。

但这样一番操作之后，还是需要再打开编辑器，然后执行粘贴，写代码写到酣畅淋漓的时候突然的切换，突然的打乱了思路。

能不能直接把这几步全都做到编辑器内？

调研了下 vscode 插件开发，几个功能点：

1. 选取文件：vscode.window.showOpenDialog
2. 上传进度：vscode.window.withProgress
3. 上传提示：vscode.window.showErrorMessage
4. 插入文本：vscode.window.activeTextEditor.insertSnippet
5. 剪贴板：vscode.env.clipboard.writeText
6. 获取配置：vscode.workspace.getConfiguration

都是可行的。一天的时间完成了功能开发和插件发布。

看个动图感受一下：

一气呵成，写到该插入图片的代码处，快捷键呼出选择文件对话框，执行上传，插入图片url，然后继续coding。

欢迎vscode插件市场搜索 “upload here” 下载试用。

使用该插件，首先需要配置图片上传接口地址：

Code -> Preferences -> Settings

该接口返回值需要满足如下格式：

{
    "data": {
        "url": "https://xxxx.png"
    }
}

然后使用快捷键（默认 shift + alt + p）或者鼠标右键，上传本地图片后将上传结果插入到光标位置。

此外还支持一些小功能：

1. 如果检测到当前是 markdown 文件，则图片上传完插入 markdown 图片语法。（已经用这个功能开始写这个项目README了！）

参考文档：

VS Code插件创作中文开发文档​liiked.github.ioExtension API​code.visualstudio.com