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

后续开发

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

对话功能

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

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

背景音乐

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

看板娘

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

更多

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

注意

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

解决【不再提示】警告

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

方法一

  1. 开命令行,安装 Fix VSCode Checksums,键入命令:
code --install-extension lehni.vscode-fix-checksums
  1. 打开 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它来了,一起来云撸猫吧的主要内容,如果未能解决你的问题,请参考以下文章

VSCode撸猫插件vscode-cats它来了,一起来云撸猫吧

vscode-cats插件是如何开发的?小包带你来实现一下

vscode-cats插件是如何开发的?小包带你来实现一下

vscode-cats插件是如何开发的?小包带你来实现一下

vscode-cats插件是如何开发的?小包带你来实现一下

给VSCode和网站领养喵咪 一起快乐撸猫