VSCode撸猫插件vscode-cats它来了，一起来云撸猫吧
Posted 战场小包
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VSCode撸猫插件vscode-cats它来了，一起来云撸猫吧相关的知识，希望对你有一定的参考价值。
前言
大约两周以前，我写了一篇如何给 VSCode 和个人网站添加 live2d 喵咪的博客，没想到得到了众多大佬的喜爱，但大佬们想要简单快乐的撸猫，给VSCode和网站领养喵咪 一起快乐撸猫 实现撸猫有几分繁琐，用户体验性不佳。
因此为了让众多大佬更舒服的撸猫，我将撸猫功能封装成 vscode-cats 插件，同时已经将 vscode-cats 0.0.1 成功发布在 VSCode 应用市场上。如果想下载插件，VSCode 扩展中直接搜索 vscode-cats 安装。
💥💥💥💥💥💥💥💥 撒花~~~ 庆祝一下 ~~~💥💥💥💥💥💥💥💥
传送门:
插件实现思路
本插件的开发模式是通过修改 VSCode 自身文件来实现的， VSCode 官方并不推荐(连文档都没有)，但即使这样，还是有大佬成功探索出这种模式，在此致敬一下此类项目的先导者: vscode-background开发者。
撸猫插件的思路与 vscode-background 类似，background 插件通过修改 workbench 目录下 css 文件实现，撸猫插件通过修改 workbench 目录下 workbench.html 实现。
插件功能
目前撸猫插件还处于新生期，喵咪只能配置下面几个属性:
| 配置 | 描述 |
|---|---|
vscode-cats.enabled | true:启用插件、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
- 打开
Vscode，快捷键Ctrl + Shift + P输入命令：
Fix Checksums:Apply
方法二
打开 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 ` <!-- /*ext-$extName-start*/ -->
<!-- /*ext.$extName.ver.$version*/ -->
<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
<!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: $modelWidthpx;
height: $modelHeightpx;
opacity: $opacity;
transition: opacity 300ms ease-in-out;
$position: $moveX + 20px;
bottom: $moveY + 20px;
z-index: 99999;
pointer-events: none;
border: 0;
"
></canvas>
</div>
</body>
<!-- Init Bootstrap Helpers -->
<script src="../../../../bootstrap.js"></script>
<script src="../../../../vs/loader.js"></script>
<script src="../../../../bootstrap-window.js"></script>
<!-- Startup via workbench.js -->
<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>
`;
文件操作方法
另外最重要的就是文件的读取，修改，保存三大方法。
/**
* 设置文件内容
*
* @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;
;
总结
有了文件的读取、修改、保存和 getHTML 就可以轻松的实现 workbench.html 文件内容的更改。其余部分的实现等我再慢慢跟大家道来。
后语
伙伴们，如果大家感觉本文对你有一些帮助，给阿包点一个赞👍或者关注➕都是对我最大的支持。
另外如果本文章有问题，或者对文章其中一部分不理解，都可以评论区回复我，我们来一起讨论，共同学习，一起进步！
以上是关于VSCode撸猫插件vscode-cats它来了，一起来云撸猫吧的主要内容，如果未能解决你的问题，请参考以下文章