首页 > 分享 > VSCode撸猫插件vscode

VSCode撸猫插件vscode

萌宠菠菠乐园
2024-10-01 07:51

前言

大约两周以前，我写了一篇如何给 VSCode 和个人网站添加 live2d 喵咪的博客，没想到得到了众多大佬的喜爱，但大佬们想要简单快乐的撸猫，给VSCode和网站领养喵咪一起快乐撸猫实现撸猫有几分繁琐，用户体验性不佳。

因此为了让众多大佬更舒服的撸猫，我将撸猫功能封装成 vscode-cats 插件，同时已经将 vscode-cats 0.0.1 成功发布在 VSCode 应用市场上。如果想下载插件，VSCode 扩展中直接搜索 vscode-cats 安装。

撒花~~~ 庆祝一下 ~~~

传送门:

应用市场vscode-cats:github

插件实现思路

本插件的开发模式是通过修改 VSCode 自身文件来实现的， VSCode 官方并不推荐(连文档都没有)，但即使这样，还是有大佬成功探索出这种模式，在此致敬一下此类项目的先导者: vscode-background开发者。

撸猫插件的思路与 vscode-background 类似，background 插件通过修改 workbench 目录下 css 文件实现，撸猫插件通过修改 workbench 目录下 workbench.html 实现。

插件功能

目前撸猫插件还处于新生期，喵咪只能配置下面几个属性:

配置描述vscode-cats.enabledtrue:启用插件、false:禁用插件vscode-cats.model更换喵咪vscode-cats.modelWidth自定义喵咪宽度vscode-cats.modelHeight自定义喵咪高度vscode-cats.moveX自定义喵咪水平位置vscode-cats.moveY自定义喵咪垂直位置vscode-cats.opacity设置喵咪透明度vscode-cats.position设置喵咪左右定位

后续开发

后续开发，我现在还没完全设想好，目前脑袋里有的想法暂时想添加喵咪对话功能和背景音乐功能

对话功能

设想一下，当你写代码写的正酣时，可爱的喵咪还在卖力的夸奖你，那感觉不可谓不舒服啊，飘飘然如羽化登仙。

急求: 夸奖、吹捧、乐逗等喵言

背景音乐

光看文字还是有几分单调，如果能加上点简单的喵音，糯糯的、软软的，疲乏时听起来还是很舒服的。

看板娘

其实 live2d 喵咪只占一小部分，如果有大佬想要漂亮的小姐姐和帅气的小哥哥，也可以添加()。

大佬们，如果有更多好的想法，可以在评论区留言，咱们可以共同交流，寻求实现方案。

注意

如果想卸载 vscode-cats 插件，尽量关掉配置项 vscode-cats.enabled ，再进行卸载。插件是通过修改 VSCode 自身文件实现的，因此在初次安装，或者 VSCode 升级的时候，会出现损坏提示，请选择【不再提示】。如果实在介意此提示请不要安装此扩展！！！因为是第一次开发插件，插件开发经验较少，阿包不能保证是否存在 bug 。如果有大佬下载后不能正常使用，给阿包留言一下。

解决【不再提示】警告

因为上述实现方法直接修改 Vscode 的 JavaScript 文件，重启 Vscode 后有可能会有 code 文件错误的警告，我们来解决这种情况：

方法一开命令行，安装 Fix VSCode Checksums，键入命令：

code --install-extension lehni.vscode-fix-checksums 1 打开 Vscode ，快捷键 Ctrl + Shift + P 输入命令：

Fix Checksums:Apply 1 方法二

打开 VSCode 扩展搜索 Fix VSCode Checksums 插件

在这里插入图片描述

插件实现核心

最后交待一下插件的大致实现核心吧。

getHTML.ts

撸猫插件的核心，当安装插件后或者开启撸猫插件时替换原 VSCode workbench.html 里的代码。

export default function ( config: any, extName: string, version: string ): string { let model: string = config.model; let modelWidth: number = config.modelWidth; let modelHeight: number = config.modelHeight; let moveX: number = config.moveX; let moveY: number = config.moveY; let opacity: number = config.opacity; let position: string = config.position; return `    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' https: data: blob: vscode-remote-resource:; media-src 'none'; frame-src 'self' vscode-webview: https://*.vscode-webview-test.com; object-src 'self'; script-src * 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; connect-src 'self' https:; font-src 'self' https: vscode-remote-resource:;" /> </head> <style type="text/css"> #live2dcanvas { border: 0 !important; } </style> <body aria-label=""> <div id="live2d-widget"> <canvas id="live2dcanvas" width="${modelWidth}" height="${modelHeight}" style=" position: fixed; width: ${modelWidth}px; height: ${modelHeight}px; opacity: ${opacity}; transition: opacity 300ms ease-in-out; ${position}: ${moveX + 20}px; bottom: ${moveY + 20}px; z-index: 99999; pointer-events: none; border: 0; " ></canvas> </div> </body>  <script src="../../../../bootstrap.js"></script> <script src="../../../../vs/loader.js"></script> <script src="../../../../bootstrap-window.js"></script>  <script src="workbench.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js?_=1557308476616" ></script> <script type="text/javascript"> L2Dwidget.init({ model: { jsonPath: "https://unpkg.com/live2d-widget-model-${model}/assets/${model}.model.json", }, display: { superSample: 2, width: ${modelHeight}, height: ${modelHeight}, position: "${position}", hOffset: ${moveX + 20}, vOffset: ${moveY + 20}, }, react: { opacityDefault: ${opacity} } }); </script> </html> `; }

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 文件操作方法

另外最重要的就是文件的读取，修改，保存三大方法。

/** * 设置文件内容 * * @param {string} filePath 文件路径 * @param {string} content */ export const saveContent = function (filePath, content: string): void { fs.writeFileSync(filePath, content, "utf-8"); }; /** * 获取文件内容 * @param {string} filePath 文件路径 */ export const getContent = function (filePath): string { return fs.readFileSync(filePath, "utf-8"); }; /** * 获取workbench为原始代码 * * @private * @returns {string} */ export const renewHTML = function (): string { let nowContent = originHtml(); return nowContent; };

12345678910111213141516171819202122232425262728 总结

有了文件的读取、修改、保存和 getHTML 就可以轻松的实现 workbench.html 文件内容的更改。其余部分的实现等我再慢慢跟大家道来。