VSCode撸猫插件vscode-cats它来了，一起来云撸猫吧 前言 本月活动主题是代码吸猫，大约两周以前，我写了一篇如何给VSCode和个人网站添加 live2d 喵咪的博客，没想到得到了众多大佬的喜爱，但大佬们想要简单快乐的撸猫，给VSCode和网站领养喵咪 一起快乐撸猫实现撸猫有几分繁琐，用户体验性不佳。 因此为了让众多大佬更舒服的撸猫，我将撸猫功能封装成vscode-cats插件，同时已经将 vscode-cats 0.0.1 成功发布在 VSCode 应用市场上。如果想下载插件，VSCode 扩展中直接搜索 vscode-cats 安装。 ???????? 撒花~庆祝一下~???????? 传送门:应用市场[1]vscode-cats:github[2] 插件实现思路本插件的开发模式是通过修改 VSCode 自身文件来实现的， VSCode 官方并不推荐 (连文档都没有)，但即使这样，还是有大佬成功探索出这种模式，在此致敬一下此类项目的先导者: vscode-background 开发者[3]。 撸猫插件的思路与 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-extensionlehni.vscode-fix-checksums 复制代码 打开 Vscode ，快捷键 Ctrl + Shift + P 输入命令：FixChecksums:Apply 复制代码 方法二打开 VSCode 扩展搜索 Fix VSCode Checksums 插件 插件实现核心最后交待一下插件的大致实现核心吧。 getHTML.ts撸猫插件的核心，当安装插件后或者开启撸猫插件时替换原 VSCode workbench.html 里的代码。 exportdefaultfunction( config:any, extName:string, version:string ):string{ letmodel:string=config.model; letmodelWidth:number=config.modelWidth; letmodelHeight:number=config.modelHeight; letmoveX:number=config.moveX; letmoveY:number=config.moveY; letopacity:number=config.opacity; letposition:string=config.position; return`!--/*ext-${extName}-start*/-- !--/*ext.${extName}.ver.${version}*/-- !--Copyright(C)MicrosoftCorporation.Allrightsreserved.-- !DOCTYPEhtml html head metacharset="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 styletype="text/css" #live2dcanvas{ border:0!important; } /style bodyaria-label="" divid="live2d-widget" canvas id="live2dcanvas" width="${modelWidth}" height="${modelHeight}" style=" position:fixed; width:${modelWidth}px; height:${modelHeight}px; opacity:${opacity}; transition:opacity300msease-in-out; ${position}:${moveX+20}px; bottom:${moveY+20}px; z-index:99999; pointer-events:none; border: " /canvas /div /body !--InitBootstrapHelpers-- scriptsrc="../../../../bootstrap.js"/script scriptsrc="../../../../vs/loader.js"/script scriptsrc="../../../../bootstrap-window.js"/script !--Startupviaworkbench.js-- scriptsrc="workbench.js"/script script type="text/javascript" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js?_=1557308476616" /script scripttype="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 } 复制代码 文件操作方法另外最重要的就是文件的读取，修改，保存三大方法。 /** *设置文件内容 * *@param{string}filePath文件路径 *@param{string}content */ exportconstsaveContent=function(filePath,content:string):void{ fs.writeFileSync(filePath,content,"utf-8"); }; /** *获取文件内容 *@param{string}filePath文件路径 */ exportconstgetContent=function(filePath):string{ returnfs.readFileSync(filePath,"utf-8"); }; /** *获取workbench为原始代码 * *@private *@returns{string} */ exportconstrenewHTML=function():string{ letnowContent=originHtml(); returnnowContent; }; 复制代码 总结有了文件的读取、修改、保存和 getHTML 就可以轻松的实现 workbench.html 文件内容的更改。其余部分的实现等我再慢慢跟大家道来。 参考资料 [1] https://marketplace.visualstudio.com/items?itemName=zcxiaobao.vscode-cats [2] https://github.com/zcxiaobao/vscode-cats [3] https://github.com/shalldie/vscode-background 阅读原文