Плагин VSCode cat vscode-cats здесь, давайте перейдем к облачному коту

внешний интерфейс JavaScript
Плагин VSCode cat vscode-cats здесь, давайте перейдем к облачному коту

Соси кошек вместе с кодом! Эта статья участвует【Эссе "Мяу Звезды"】.

предисловие

Тема мероприятия этого месяца — код — отстой. Около двух недель назад я написал статью о том, как датьVSCodeи личный сайт добавитьlive2dБлог Мяу Ми, я не ожидал, что меня полюбят многие боссы, но боссы хотят играть в кошек просто и с удовольствием,Примите кошку для VSCode и веб-сайтаНемного громоздко реализовывать кошачье лизание, и пользовательский опыт не очень хорош.

Поэтому, чтобы большие парни чувствовали себя более комфортно с кошками, я инкапсулировал функцию облизывания кошек какvscode-catsплагин и имеетvscode-cats 0.0.1успешно размещен вVSCodeрынок приложений.Если вы хотите скачать плагин, найдите установку vscode-cats прямо в расширении VSCode..

💥💥💥💥💥💥💥💥 Посыпать цветами~~~ Праздновать ~~~💥💥💥💥💥💥💥💥

Портал:

Идеи реализации плагина

Режим разработки этого плагина заключается в измененииVSCodeРеализуется собственным файлом,VSCodeОфициально это не рекомендуется (даже документация), но даже так, есть еще большие ребята, которые успешно изучили этот режим, и я хотел бы отдать должное первопроходцам таких проектов:vscode-backhoe Developer.

Идеи и идеи плагина Lumaovscode-backgroundаналогичный,backgroundплагин, изменивworkbenchПод содержаниемcssФайл реализован, а плагин cat модифицированworkbenchПод содержаниемworkbench.htmlвыполнить.

Функция плагина

В настоящее время плагин Lumao все еще находится в зачаточном состоянии, и кот может настроить только следующие свойства:

настроить описывать
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Мяу занимает лишь небольшую часть, если есть большие парни, которые хотят красивую барышню и красивого братишку, можно и его добавить (😎😎😎).

Более

Ребята, если у вас есть еще хорошие идеи, вы можете оставить сообщение в области комментариев, и мы сможем вместе общаться и искать решения.

Уведомление

  1. Если вы хотите удалитьvscode-catsПлагины, попробуйте отключить элементы конфигурацииvscode-cats.enabled, а затем удалить.
  2. Плагин измененVSCodeреализован в собственном файле, поэтому он устанавливается в первый раз, илиVSCodeПри обновлении появится сообщение о повреждении, выберите [Больше не предлагать].Если вы действительно возражаете против этой подсказки, пожалуйста, не устанавливайте это расширение! ! !
  3. Поскольку плагин разрабатывается впервые, а опыта в разработке плагинов мало, Abao не может гарантировать, существует ли он или нет.bug. Если есть большой парень, который не может нормально использовать его после загрузки, оставьте сообщение Абао.

Устраните предупреждение [больше нет подсказок]

Поскольку вышеприведенный метод реализации напрямую измененVscodeизJavaScriptфайл, перезапуститьVscodeможет быть позжеcodeпредупреждение об ошибке файла, исправим ситуацию:

метод первый

  1. открыть командную строку, установитьFix VSCode Checksums, введите команду:
code --install-extension lehni.vscode-fix-checksums
  1. ОткрытьVscode,горячая клавишаCtrl + Shift + Pвведите команду:
Fix Checksums:Apply

Способ второй

Открыть поиск расширения VSCodeFix VSCode Checksumsплагин

fix.png

Ядро реализации плагина

Наконец, давайте поговорим об общем ядре реализации плагина.

getHTML.ts

Ядро плагина Lumao, при установке плагина или при включении плагина Lumao заменить оригинал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: ${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>
  
    <!-- 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Изменения содержимого файла. Остальная часть реализации будет ждать, пока я расскажу вам медленно.

Замечательные статьи в прошлом

послесловие

Друзья, если вы чувствуете, что эта статья вам полезна, ставьте лайк Абао👍 или подписывайтесь➕ — это самая большая поддержка для меня.

Кроме того, если есть какие-либо проблемы с этой статьей или если вы не понимаете часть статьи, вы можете ответить мне в области комментариев, давайте обсудим, изучим и добьемся успеха вместе!

Если вы чувствуете, что область комментариев неясна, вы также можете добавить мой WeChat (li444186976) или qq (3315161861) для подробного общения, название - пакет поля боя.

Категории