插件开发——配置右键菜单
这个功能描述大概就是，你在写的时候突然要上传，直接点击鼠标右键，然后直接选择图片。对就是这个简单的东西，做东西需要从用户的角度考虑，一定要爽，能省一步是一步。呵呵哈哈哈
这个配置其实就是在 还是在刚才的「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」 中文件对应不然会出不来的。给大家演示下：
图片
图片
重启插件 按下f5 然后按下右键就有我们自定义的右键菜单了。但是问题来了我们按住右键 是不是得弹出一个选择图片的框哇，不然怎么上传对吧？
打开图片上传 弹框
强大的vscode支持了内置的api, 支持打开：
const uri = await vscode.window.showOpenDialog({ canSelectFolders: false, canSelectMany: false, filters: { images: ['png', 'jpg','apng','jpeg','gif','webp'], }, });
就是这个 api, 你可以过滤出想要的图片， 在filters 里面，然后呢 吐出给我们的是对应图片的路径。
我们看下效果：
读取图片数据
其实这个时候我们我们已经有了图片的路径，这时候就要利用 「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」 使用的他主要理由主要是看下面这张图：
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」 去激活其实就可以了
如图
如图
其实就是下面这个你的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 啥的以及各种签名信息，然后直接上传就好了， 然后呢你就可以获得一张图片地址了。代码我就不展示了， 都是前端应该都懂。这里我说下我遇到的一些问题
- 第一个就是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 登录创建， 首先我们进入文档中提到的主页，完成验证登录后创建一个组织。
创建一个组织
创建发布者
进入下面这个页面 marketplace.visualstudio.com/manage/publ…** 插件发布者， 给大家看下我的：
发布者
发布者
打包发布
首先全局 安装脚手架
npm install -g vsce 复制代码
然后 cd 到当前插件目录 使用下面命令
$ cd myExtension $ vsce package # myExtension.vsix generated 复制代码
这里的打包会报一些error:
第一个就是插件的package.json 增加发布者
"publisher": "Fly", 复制代码
如果给插件加图标：其实在项目中创建一个文件夹：image 然后把图片放进去：同时也要在package.json 中配置
"icon": "images/dewu.jpeg", 复制代码
这里可能有⚠️，不过没什么关系，继续跑就完事了
warn
最后的话其实就是要写readme ,不然 不让你发布。
打包上传
一切准备就绪：命令行 输入
vsce package
然后项目中就会出现：
照片
照片
然后可以把这个东西拖到页面这个页面
marketplace.visualstudio.com/manage/publ…
上传
然后点击上传就好了，你就可以在vscode 插件商场可以看到自己写的插件了
插件
