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

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

效果



目录
打赏
0
0
0
0
10
分享
相关文章
|
7月前
职场中的“奇葩”领导与同事:相处之道与成长之痛
职场中的“奇葩”领导与同事:相处之道与成长之痛
67 1
写给高效能产品经理的七个建议
阿里云智能高级产品专家「戚亚东(花名:才云)」通过日常的工作观察和面试经验,总结了关于高效能产品经理的七个建议。
39391 13
写给高效能产品经理的七个建议
开发者眼中的优秀产品经理是哪样?
本人作为一名开发人员,可以说打交道最多的就是产品和测试,尤其是新需求出来的时候,开需求讨论会,产品和一线开发人员在会讨论的交锋,很值得思考。那么接下来就来聊聊为什么会出现这种情况。
188 1
开发者眼中的优秀产品经理是哪样?
产品设计——你的老师每天都坐在你面前
产品设计——你的老师每天都坐在你面前
95 0
产品经理又开始为难我了???我。。。。(二)
插件开发——配置右键菜单 这个功能描述大概就是,你在写的时候突然要上传,直接点击鼠标右键,然后直接选择图片。对就是这个简单的东西,做东西需要从用户的角度考虑,一定要爽,能省一步是一步。呵呵哈哈哈 这个配置其实就是在 还是在刚才的「package.json」 上继续配置: "menus": { "editor/context": [ { "when": "editorFocus", "command": "extension.choosedImage", "group": "navigation" } ] w
产品经理又开始为难我了???我。。。。(二)
周鸿祎:怎样才能成为一个优秀的产品经理?
导读:本文来自奇虎360董事长周鸿祎的博客,分享了个人对于“一个优秀产品经理的必备素质”的经验与理念。 现在,互联网公司里开始重视产品经理了,这是一个好事。以前互联网谈融资,谈商业模式,谈战略,很少有谈产品的,因为产品可以从国外抄,谁下手快谁就能获得先发优势。
1835 0
成功产品经理的8个心态!,互联网营销
  心态这个词有点飘忽,看不见摸不着,每个人都有自己的理解,今天和大家扯一下我的看法。   人们常说,工作1-5年的人需要锻炼的是技能,工作5-10年就应该锻炼一个人的心态了。   我开始渐渐的理解这句话的含义,从锻炼能力到锻炼心态,是个从量变到质变的过程。
1005 0
怎样才能成为一个优秀的产品经理?,互联网营销
  现在,互联网公司里开始重视产品经理了,这是一个好事。以前互联网谈融资,谈商业模式,谈战略,很少有谈产品的,因为产品可以从国外抄,谁下手快谁就能获得先发优势。现在,互联网里的资本已经不成问题,抄袭速度都一样快了。
1159 0
关于人人都是产品经理的思考【产品经理的反思】
其实我们人人都是产品经理,人人都是自己的CEO,一个好的产品经理应该具备一家完善的公司能力;人能给人的只有信息,人能做的就是更好的协调周边资源或信息的运作方式,从中推进人生向更高处发展。我们都需要一双眼睛,是发现痛点、找到**破局**点的敏锐之眼,二需要一双手,是动手优化、着手改变的行动之手;三是需要一颗心,是洞察人性的同理心,懂得自己与用户,懂得产品上每个细节给到人的满足感、确认感和依赖感。
5068 0

热门文章

最新文章