产品经理又开始为难我了???我。。。。(一)

简介: 前言大家好,我是Fly哥。最近做项目的时候,就是产品经理给的图总是很大,不压缩。每天要处理这些图片真的很累哇。于是一怒之下写下了这个「vscode 插件」。「插件核心功能是压缩,然后上传图片」。压缩的网站其实就是「tinypng」 这个网站然后图片压缩后,然后再上传到cdn上,然后然后这个压缩过的url 直接放到我们的粘贴板上。下面跟着我的步伐一步一步来写实现它。先看效果图:图片效率对比开发这个主要是提高团队开发效率, 绝不是为了炫技。看图:图片image-20211017224316386image-20211017224316386需求分析可在vscodde的set

前言



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


image.png


效率对比



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

image.png


image.gifimage-20211017224316386


image-20211017224316386


需求分析



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


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


中文文档



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


搭建项目



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


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


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


image.gifvscode开始这个页面

image.png


vscode开始这个页面


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


我们看下项目结构:


image.gif插件结构


插件结构


插件运行



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


image.gif插件

image.png


插件


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


目前是:


image.png


插件

image.png

插件


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


插件运行——成功演示



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


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


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


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


直接看下面的gif 图吧:

image.png


image.gifMay-29-2022 13-28-35


插件开发——配置参数



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


image.gif配置参数

image.png

配置参数


第一个参数我们稍后再讲其实就是对应你注册的自定义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」


压缩图片。


我们看下效果:


image.gif效果

image.png

效果



相关文章
|
4月前
职场中的“奇葩”领导与同事:相处之道与成长之痛
职场中的“奇葩”领导与同事:相处之道与成长之痛
35 1
|
JavaScript 前端开发 API
产品经理又开始为难我了???我。。。。(二)
插件开发——配置右键菜单 这个功能描述大概就是,你在写的时候突然要上传,直接点击鼠标右键,然后直接选择图片。对就是这个简单的东西,做东西需要从用户的角度考虑,一定要爽,能省一步是一步。呵呵哈哈哈 这个配置其实就是在 还是在刚才的「package.json」 上继续配置: "menus": { "editor/context": [ { "when": "editorFocus", "command": "extension.choosedImage", "group": "navigation" } ] w
产品经理又开始为难我了???我。。。。(二)
|
测试技术
干货 | 测试人职场晋升“潜规则”:15 年经验资深测试经理的职场忠告
![](https://ceshiren.com/uploads/default/original/3X/6/b/6b7c415433c9acc8c4e15708b60b419da5eb9ed3.png) ![](https://ceshiren.com/uploads/default/original/3X/8/d/8dec96d8de9bc7b8ceab15cf3117a3b772c7dc7
|
消息中间件 分布式计算 负载均衡
阿里技术面全A,终面却被产品经理拉下马,我不服
阿里技术面全A,终面却被产品经理拉下马,我不服
阿里技术面全A,终面却被产品经理拉下马,我不服
|
缓存 NoSQL 前端开发
揭密!程序员面试不得不知道的潜规则
规则1:面试的本质不是考试,而是告诉面试官你会做什么 很多刚入行的小伙伴特别容易犯的一个错误,不清楚面试官到底想问什么,其实整个面试中面试官并没有想难道你的意思,只是想通过提问的方式来知道你会什么
揭密!程序员面试不得不知道的潜规则
|
架构师 物联网 Java
倾听程序员的心声真的很重要
说到开发产品,没有人比程序员更了解产品。程序员知道产品的优点、缺陷、用途和潜在用途。说起这些,程序员了如指掌,如数家珍。 在这个似乎无所不在的数字时代,倾听程序员必须要说的内容非常重要,而且也许比以往任何时期都更加重要。
1041 1
周鸿祎:怎样才能成为一个优秀的产品经理?
导读:本文来自奇虎360董事长周鸿祎的博客,分享了个人对于“一个优秀产品经理的必备素质”的经验与理念。 现在,互联网公司里开始重视产品经理了,这是一个好事。以前互联网谈融资,谈商业模式,谈战略,很少有谈产品的,因为产品可以从国外抄,谁下手快谁就能获得先发优势。
1812 0
怎样才能成为一个优秀的产品经理?,互联网营销
  现在,互联网公司里开始重视产品经理了,这是一个好事。以前互联网谈融资,谈商业模式,谈战略,很少有谈产品的,因为产品可以从国外抄,谁下手快谁就能获得先发优势。现在,互联网里的资本已经不成问题,抄袭速度都一样快了。
1144 0
|
程序员 项目管理
艾伟也谈项目管理,项目经理成长日记(4)——态度决定一切
超仔刚刚推门进来,屁股还没有碰到他的椅子上已经让人感觉到他欢喜轻飘的神色,我抬头望着他眼睛,神色中洋溢的满是欢快。我看着他那兴奋的样子,微微笑着问道:“签完了?结果还可以吗?” “还不错!” “能满意就可以,继续努力。
1161 0