前言

大家好，我是Fly哥。最近做项目的时候，就是产品经理给的图总是很大，不压缩。每天要处理这些图片真的很累哇。于是一怒之下写下了这个「vscode 插件」。「插件核心功能是压缩，然后上传图片」。压缩的网站其实就是「tinypng」 这个网站然后图片压缩后，然后再上传到cdn上，然后然后这个压缩过的url 直接放到我们的粘贴板上。下面跟着我的步伐一步一步来写实现它。先看效果图：

效率对比

开发这个主要是提高团队开发效率， 绝不是为了炫技。看图：

image-20211017224316386

image-20211017224316386

需求分析

1. 可在vscodde的setting中配置上传所需的参数，可以根据个人的需求单独进行配置；

2. 2.在开发过程中可在编辑器中直接选择图片并上传到阿里云将图片链接填写到光标位置；

中文文档

❝

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

❞

搭建项目

vscode 插件的开发需要全局安装脚手架：

npm install -g yo generator-code
复制代码

安装成功后，直接使用对应命令 「yo code」 来生成一个插件工程：

vscode开始这个页面

vscode开始这个页面

这就开始脚手架页面了，可以选择自己习惯的配置。输入对应的配置 然后 就创建了对应的项目了。

我们看下项目结构：

插件结构

插件结构

插件运行

这时候我们先要去测试下我的这个插件到底是不是能够成功运行。在项目根目录按住F5 然后运行 「vscode extension」 ,这时候会出现一个新的vscode 窗口，但是我这里遇到的一个问题就是这个：

插件

插件

我大概理解了下就是vscode 插件的依赖版本比较低：

目前是：

插件

插件

这上面说的很清楚 vscode扩展指定 与其兼容的 vscode 版本兼容 很显然我这里太高了， 给他降级。然后给他换成1.60.2 完美解决

插件运行——成功演示

ok, 怎么查看自己查看插件有没有成功运行呢， 分为3步

1. F5 开始调试 —— 产生一个新的调试窗口

2. 在新的窗口—— command + shift + P 找到 hello word

3. 点击运行看见弹窗 显示 表示弹窗运行成功

直接看下面的gif 图吧：

May-29-2022 13-28-35

插件开发——配置参数

配置插件的属性面板， 这个主要是要在package.json 配置一些参数

配置参数

配置参数

第一个参数我们稍后再讲其实就是对应你注册的自定义command， 下面的配置 其实就是对应插件属性面板一些参数，然后你可以通过vscode 的一些api 可以获得你配置的这些参数

下面我是我配置的参数，你可以会根据插件自定义去调整

"properties": {
    "upload_image.domain": {
      "type": "string",
      "default": "",
      "description": "设置上传域名"
    },
    "upload_image.accessKey": {
      "type": "string",
      "default": "",
      "description": "设置oss上传accessKey"
    },
    "upload_image.secretKey": {
      "type": "string",
      "default": "",
      "description": "设置oss上传secretKey"
    },
    "upload_image.scope": {
      "type": "string",
      "default": "",
      "description": "设置oss上传上传空间"
    },
    "upload_image.gzip": {
      "type": "boolean",
      "default": "true",
      "description": "是否启用图片压缩"
    }
  }

大概就是这几个参数， 然后我们测试下同样打开f5 然后在新窗口 找到设置然后找到扩展， 设置项其实就是对应我们的 上面的「title」

压缩图片。

我们看下效果：

效果

效果