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

简介: 前言大家好,我是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

效果



相关文章
|
2月前
|
人工智能 架构师 NoSQL
24岁程序媛,二战考研失利、三无人员 ==> 最佳新人、优秀个人,讲讲我的技术成长之路
能力、格局、谋略、远见、耐心。灵魂的欲望是命运的先知,希望永远自信、洒脱、松弛、明媚、张扬;追随自己的内心、以喜欢的方式、往正确的方向前行,永远在路上,我甘之如饴! 持续精进Java领域相关技术,包括微服务、高并发、高可用、分布式、集群等等;希望能接触到更多更大的优质项目,逐渐成长为一名具备全栈思维的架构师,既能深入理解底层技术,又能把控全局架构;抽时间了解学习Go语言、人工智能、大模型等领域。 在探索中明晰后续的发展方向,形成自己的一套体系,成为主管、管理层乃至更高,不希望自己的上限只是程序员。
|
4月前
职场中的“奇葩”领导与同事:相处之道与成长之痛
职场中的“奇葩”领导与同事:相处之道与成长之痛
33 1
|
编解码 前端开发 程序员
刚入职的程序员做不好哪些事情容易被开除?
刚入职的程序员做不好哪些事情容易被开除?
830 0
|
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
|
消息中间件 架构师 NoSQL
做好职业规划,做一个平凡而不平庸的自己
做好职业规划,做一个平凡而不平庸的自己
185 0
做好职业规划,做一个平凡而不平庸的自己
周鸿祎:怎样才能成为一个优秀的产品经理?
导读:本文来自奇虎360董事长周鸿祎的博客,分享了个人对于“一个优秀产品经理的必备素质”的经验与理念。 现在,互联网公司里开始重视产品经理了,这是一个好事。以前互联网谈融资,谈商业模式,谈战略,很少有谈产品的,因为产品可以从国外抄,谁下手快谁就能获得先发优势。
1807 0
|
Java 程序员 定位技术
程序员职业规划的3个锦囊
我们在面试时经常会被问到一个问题——“你未来五年的职业规划是什么?”很多小伙伴不理解HR为什么这么问,也不知道怎么回答。 实际上,即便HR不问,我们也应该多多想想这个问题。因为它指向的是我们自己的职业生涯规划。
6822 0
|
架构师 Java 程序员
不是所有的程序员都适合转管理,但是领导力可以有套路练就
最近很多小伙伴对技术栈管理的话题比较感兴趣,我们就继续这个话题,本次分享来自一位贴吧的程序员老司机,他亲自尽力过从技术转向管理岗位,我们听听他的分享: 为什么大家想转型做管理? 其实,做程序员挺好的,学会一种新技术或者解决一个技术难题,很容易就能获得成就感。
1087 0