从零开发自己的Vscode插件在工作中经常用有一些图片来美化我们的前端页面，这时需要我们先将图片下载到本地再通过tiny

一、内容简介

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

二、需求分析

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

三、从零开发

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

1. 搭建项目

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

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": [
    "onCommand:extension.choosedImage"
  ],
  "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.window.showOpenDialog({
            canSelectFolders: false,
            canSelectMany: false,
            filters: {
              images: ['png', 'jpg'],
            },
      	})
      }
      console.log(qiniuConfig, uri)
  )
  
  context.subscriptions.push(texteditor)
}

通过getConfiguration获取在编辑器中配置的内容；showOpenDialog来调出文件选择框：

从零开发自己的Vscode插件