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

简介: 插件开发——配置右键菜单这个功能描述大概就是,你在写的时候突然要上传,直接点击鼠标右键,然后直接选择图片。对就是这个简单的东西,做东西需要从用户的角度考虑,一定要爽,能省一步是一步。呵呵哈哈哈这个配置其实就是在 还是在刚才的「package.json」 上继续配置:"menus": { "editor/context": [ { "when": "editorFocus", "command": "extension.choosedImage", "group": "navigation" } ]w

插件开发——配置右键菜单



这个功能描述大概就是,你在写的时候突然要上传,直接点击鼠标右键,然后直接选择图片。对就是这个简单的东西,做东西需要从用户的角度考虑,一定要爽,能省一步是一步。呵呵哈哈哈


这个配置其实就是在 还是在刚才的「package.json」 上继续配置:


"menus": {
    "editor/context": [
      {
        "when": "editorFocus",
        "command": "extension.choosedImage",
        "group": "navigation"
      }
    ]


when:就是你鼠标在编辑的时候


command: 就是自定义的事件,我叫他选择图片, 这个其实就是在extension.js 注册的


事件名字 tips:就是对应的事件名称


let texteditor = vscode.commands.registerTextEditorCommand(
  'extension.choosedImage', ...


这个其实就是在extension .js 注册对应的事件名,这里的「事件名」 一定要和 「package.json」 中文件对应不然会出不来的。给大家演示下:


image.png


图片


图片


重启插件 按下f5 然后按下右键就有我们自定义的右键菜单了。但是问题来了我们按住右键 是不是得弹出一个选择图片的框哇,不然怎么上传对吧?


打开图片上传 弹框


强大的vscode支持了内置的api, 支持打开:


const uri = await vscode.window.showOpenDialog({
    canSelectFolders: false,
    canSelectMany: false,
    filters: {
      images: ['png', 'jpg','apng','jpeg','gif','webp'],
    },
  });


就是这个 api, 你可以过滤出想要的图片, 在filters 里面,然后呢 吐出给我们的是对应图片的路径。


我们看下效果:

image.png

读取图片数据


其实这个时候我们我们已经有了图片的路径,这时候就要利用 「node.js」的fs 模块 去读取 这个图片的数据 buffer ,这个其实为了方便我们将图片上传到oss 上。代码如下:


const uri = await vscode.window.showOpenDialog({
    canSelectFolders: false,
    canSelectMany: false,
    filters: {
      images: ['png', 'jpg','apng','jpeg','gif','webp'],
    },
  }); 
let imgBuffer =  await fs.readFile(uri[0].path);


这里还涉及到一个就是说:本地图片的名字 进行加密, 不能上传到oss 各种中文啥的, 显示的我们很不专业哇


所以这里写了一个MD5的转换


function md5Name(name) {
 const index = name.lastIndexOf('.')
 const sourceFileName = name.substring(0, index)
 const suffix = name.substring(index)
 const fileName = md5(sourceFileName + Date.now()) + suffix
 return fileName.toLowerCase()
}


就是将名字搞成花里胡哨的样子,呵呵哈哈哈!


图片压缩


我们得到图片的buffer 数据后其实要对图片要支持压缩, 其实社区里面有很多方案, 这里的话我调研的很多还是决定使用tinfiy, 他也有对应的「node.js」 使用的他主要理由主要是看下面这张图:


                                image.png


apng


对的这家伙支持「apng」, 其他的不是很清楚。但是他不是免费的一个人一个月免费「500」 次, 思考了下还行,我们也用不到辣么多次最终还是考虑用它去实现。


安装

安装npm包并添加到您应用的依赖中,您就可以使用Node.js客户端:


npm install --save tinify


认证


您必须提供您的API密钥来使用API。您可以通过注册您的姓名和Email地址来获取API密钥。请秘密保存API密钥。


const tinify = require("tinify");
tinify.key = "YOUR_API_KEY";


这个的话其实就是你的邮箱去注册一下,然后把你对应的「key」 去激活其实就可以了


image.png如图


如图


其实就是下面这个你的key 设置激活就好了


tinify压缩图片


您可以上传任何JPEG或PNG图片到Tinify API来进行压缩。我们将自动检测图片类型并相应的使用TinyPNG或TinyJPG引擎进行优化。只要上传文件或提供图片URL,就会开始压缩。


您可以选择一个本地文件作为源并写入到另一个文件中。


const source = tinify.fromFile("unoptimized.webp");
source.toFile("optimized.webp");


您还可以从缓冲区(buffer)(二进制字符串)上传图片并获取压缩后图片的数据。


const fs = require("fs");
fs.readFile("unoptimized.jpg", function(err, sourceData) {
  if (err) throw err;
  tinify.fromBuffer(sourceData).toBuffer(function(err, resultData) {
    if (err) throw err;
    // ...
  });
});


代码实现


function compressBuffer(sourceData, key = 'xxx') {
 return new Promise((resolve,reject) => {
  tinify.key = key;
  tinify.fromBuffer(sourceData).toBuffer(function(err, resultData) {
   if(resultData) {
    resolve(resultData)
   }
   if (err) {
    reject(err);
   }
   // ...
  });
 })
}


基于他这个封装了一个promise, 这个「fromBuffer」 , 到 「toBuffer」 是真的好用。哈哈哈哈很香,记得一定要设置key 不然promise 直接会报错的, 设置key的方法 就在上面👆🏻, 然后这样其实我们就获得了压缩的图片数据了。


上传图片到oss


这里的话其实有的使用七牛云、 有的使用阿里云。去上传图片,或者是ajax 去上传其实都可以


一般都是要获取token 啥的以及各种签名信息,然后直接上传就好了, 然后呢你就可以获得一张图片地址了。代码我就不展示了, 都是前端应该都懂。这里我说下我遇到的一些问题


  1. 第一个就是js 跑的 是node js 的环境, 如果使用「FormData」 这个类的话 他直接会报找不到, 这个方法是 undefined, 还有「fetch」, 所以说要去安装对应node js 包 ,我这里使用的是 「cross-fetch」「form-data」



这里我说一下配置的问题就是你在扩展中如何获得的你配置的参数:


"configuration": [
   {
    "title": "压缩图片",
    "properties": {
     "upload_image.secretKey": {
      "type": "string",
      "default": "",
      "description": "设置tinify的ApIKey"
     },
     "upload_image.secretTokenUrl": {
      "type": "string",
      "default": "",
      "description": "设置得物的tokenUrl"
     }
    }
   }
  ]
复制代码


每个属性前面对应的 upload_image 其实你在扩展中你可以通过:


const imageConfig =  vscode.workspace.getConfiguration('upload_image')


然后你就可以拿到配置了,upload_image 后面的属性 其实对应的就是对象中的key 然后呢你就可以对吧操作了


这个东西还是具体项目, 具体分析,你们自己 可以针对自己的项目去配置


插件开发——图片链接写入编辑器中



通过上面的方法已经可以获得图片上传后的链接,接下来就是将链接写入编辑器中:首先判断编辑器选择位置,editor.selection中可以获得光标位置、光标选择首尾位置。若光标有选中内容则editBuilder.replace替换选中内容,否则

editBuilder.insert在光标位置插入图片链接:


// 将图片链接写入编辑器
function addImageUrlToEditor(url) {
 let editor = vscode.window.activeTextEditor
 if (!editor) {
   return
 }
 const { start, end, active } = editor.selection
 if (start.line === end.line && start.character === end.character) {
   // 在光标位置插入内容
   const activePosition = active
   editor.edit((editBuilder) => {
  editBuilder.insert(activePosition, url)
   })
 } else {
   // 替换内容
   const selection = editor.selection
   editor.edit((editBuilder) => {
  editBuilder.replace(selection, url)
   })
 }


插件发布



到这里,其实一整个vscode插件 其实已经可以开发完成了, 然后我们要把他进行打包发布到vscode 的应用市场


创建账号


我是直接github 登录创建, 首先我们进入文档中提到的主页,完成验证登录后创建一个组织。


image.png

image.png

创建一个组织

创建发布者


进入下面这个页面 marketplace.visualstudio.com/manage/publ…** 插件发布者, 给大家看下我的:

image.png发布者


发布者

打包发布

首先全局 安装脚手架


npm install -g vsce
复制代码


然后 cd 到当前插件目录 使用下面命令


$ cd myExtension
$ vsce package
# myExtension.vsix generated
复制代码


这里的打包会报一些error:


第一个就是插件的package.json 增加发布者


"publisher": "Fly",
复制代码


如果给插件加图标:其实在项目中创建一个文件夹:image 然后把图片放进去:同时也要在package.json 中配置


"icon": "images/dewu.jpeg",
复制代码


这里可能有⚠️,不过没什么关系,继续跑就完事了


image.png

warn


最后的话其实就是要写readme ,不然 不让你发布。


打包上传


一切准备就绪:命令行 输入


vsce package


然后项目中就会出现:

image.png


照片


照片


然后可以把这个东西拖到页面这个页面


marketplace.visualstudio.com/manage/publ…

image.png


上传


然后点击上传就好了,你就可以在vscode 插件商场可以看到自己写的插件了


image.png

插件

相关文章
|
机器学习/深度学习 自然语言处理 机器人
【RAG实践】基于LlamaIndex和Qwen1.5搭建基于本地知识库的问答机器人
LLM会产生误导性的 “幻觉”,依赖的信息可能过时,处理特定知识时效率不高,缺乏专业领域的深度洞察,同时在推理能力上也有所欠缺。
|
11月前
|
机器学习/深度学习 并行计算 PyTorch
探索PyTorch:张量的创建和数值计算
探索PyTorch:张量的创建和数值计算
|
算法 PyTorch 计算机视觉
改进的yolov5目标检测-yolov5替换骨干网络-yolo剪枝(TensorRT及NCNN部署)-2
改进的yolov5目标检测-yolov5替换骨干网络-yolo剪枝(TensorRT及NCNN部署)-2
改进的yolov5目标检测-yolov5替换骨干网络-yolo剪枝(TensorRT及NCNN部署)-2
|
设计模式 存储 缓存
【ffmpeg 视频播放】深入探索:ffmpeg视频播放优化策略与设计模式的实践应用(二)
【ffmpeg 视频播放】深入探索:ffmpeg视频播放优化策略与设计模式的实践应用
252 0
|
存储 机器人 API
初识LangChain的快速入门指南
LangChain是一个基于大语言模型用于构建端到端语言模型应用的框架,它提供了一系列工具、套件和接口,让开发者使用语言模型来实现各种复杂的任务,如文本到图像的生成、文档问答、聊天机器人等。
602 1
|
10月前
|
安全 Java 测试技术
如何避免静态变量初始化中的异常
在Java中,静态变量初始化时可能会遇到异常。为避免此类问题,可以采取以下措施:1. 使用静态代码块进行初始化;2. 确保初始化逻辑简单且安全;3. 捕获并处理可能的异常。这些方法能有效提高程序的健壯性和稳定性。
200 15
|
消息中间件 开发工具 RocketMQ
消息队列 MQ产品使用合集之如何关闭客户端的日志记录
消息队列(MQ)是一种用于异步通信和解耦的应用程序间消息传递的服务,广泛应用于分布式系统中。针对不同的MQ产品,如阿里云的RocketMQ、RabbitMQ等,它们在实现上述场景时可能会有不同的特性和优势,比如RocketMQ强调高吞吐量、低延迟和高可用性,适合大规模分布式系统;而RabbitMQ则以其灵活的路由规则和丰富的协议支持受到青睐。下面是一些常见的消息队列MQ产品的使用场景合集,这些场景涵盖了多种行业和业务需求。
|
11月前
|
XML 小程序 前端开发
小程序制作教程
小程序制作教程
580 3
小程序制作教程
|
人工智能 关系型数据库 分布式数据库
DB+AI会擦出怎样的火花?一站式带你了解阿里云瑶池数据库经典的AI产品服务与实践!
从 DB+AI 精选解决方案、特惠权益等,一站式带你了解阿里云瑶池数据库经典的AI产品服务与实践。
|
10月前
|
传感器 安全 物联网
5G与物联网:加速产业数字化转型
【10月更文挑战第26天】
265 0