从零开发Vscode上传图片插件

一、内容简介

在工作中经常用有一些图片来美化我们的前端页面，这时需要我们先将图片下载到本地再通过tinypng这个网站将图片压缩后上传到七牛云，最后将图片链接放在我们的代码中，虽然工作也都在搬砖，但是这种砖不是我喜欢的那种砖。于是，就想到开发一个Vscode插件来帮我自动压缩上传图片。

效果预览:

现在已经算是一个有完整功能的插件了，感兴趣的小伙伴可以在Vscode中搜索插件upload-to-qiniu进行安装。

二、需求分析

• 1.可在Vscode的setting中配置上传所需的参数，可以根据个人的需求单独进行配置；
• 2.在开发过程中可在编辑器中直接选择图片并上传到七牛并将图片链接填写到光标位置；
• 3.鼠标悬浮在图片链接时可以预览图片

三、从零开发

一个好的文档可以帮助我们更容易的开发：如果英文比较好的同学可以直接看Vscode英文文档，这里api会比较全，可以找到更简洁的方案实现功能； 不过我的话，还是花很久时间找了这篇比较全的中文文档

1. 搭建项目

vscode插件的开发需要现在全局安装脚手架：npm install -g yo generator-code
安装成功后，直接对应命令yo code 来生成一个Vscode插件工程 ：

输入对应的配置后，就可以生成一个项目了[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sJjinZ9H-1607143985426)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/811da70c2dd941a280970f500922d5e6~tplv-k3u1fbpfcp-watermark.image)]

2. 启动项目调试

安装好依赖进入项目后，按f5会打开一个新的Vscode编辑器，在命令行面板（Ctrl+Shift+P / Shift+command+P）输入Hello World，如果编辑器右下角弹出弹窗

则说明工程可以正常运行，可以开始我们的需求开发啦；

3. 配置所需参数

在package.json中，可以看到有contributes参数，在这里添加一个configuration来设置插件参数， 如图：

完整configuration配置如下：

"configuration": [{
   
    "title": "图片上传工具配置",
    "properties": {
   
        "upload_image.domain": {
   
            "type": "string",
            "default": "",
            "description": "设置上传域名"
        },
        "upload_image.accessKey": {
   
            "type": "string",
            "default": "",
            "description": "设置七牛上传accessKey"
        },
        "upload_image.secretKey": {
   
            "type": "string",
            "default": "",
            "description": "设置七牛上传secretKey"
        },
        "upload_image.scope": {
   
            "type": "string",
            "default": "",
            "description": "设置七牛上传上传空间"
        },
        "upload_image.gzip": {
   
            "type": "boolean",
            "default": "true",
            "description": "是否启用图片压缩"
        }
    }
}]

点击重新运行后在调试的Vscode编辑器中找到settings，找到Extendsions

可以看到我们配置的配置项已经可以在编辑器中自己设置了：

3. 配置右键菜单

接下来可以实现我们的一个选择图片的交互功能：鼠标点击后右键可以弹出一个菜单选择图片后，拿到图片和我们之前配置的一些参数;

1. 在package.json定义命令和事件：

"activationEvents": [
    "*"
  ],
  "main": "./out/extension.js",
  "contributes": {
   
    "commands": [
        {
   
            "command": "extension.choosedImage",
            "title": "选择图片"
        }
    ],
    "menus": {
   
        "editor/context": [{
   
            "when": "editorFocus",
            "command": "extension.choosedImage",
            "group": "navigation"
        }]
    },

我的理解是：activationEvents为需要注册的事件；commands定义事件名和标题；menus定义事件执行的时机和命令显示的位置。

2. 在extension.js中编辑事件：

import * as vscode from 'vscode'

export function activate(context: vscode.ExtensionContext) {
   
  let texteditor = vscode.commands.registerTextEditorCommand(
    'extension.choosedImage',
    async (textEditor, edit, args) => {
   
    	// 获取七牛参数
        const qiniuConfig = vscode.workspace.getConfiguration('upload_qiniu_config')
        const uri = await vscode.win