Точное улучшение производительности | Как разработать плагин предварительного просмотра VS Code yarn.lock

⚠️Эта статья является первой подписанной статьей сообщества Nuggets, и её перепечатка без разрешения запрещена.

Привет всем, яЛуожу 🎋, деревянный фронтенд, живущий в Ханчжоу 🧚🏻‍♀️, если вам понравилась моя статья 📚, вы можете помочь мне собрать духовную силу ⭐️ лайком.

Yarn Lock PreviewПлагин выпущен, про-тест работает относительно стабильно, исходный код находится в разработке.vscode-yarn-lock-preview, если это поможет и немного вдохновит вас, вы можете наградить звездой.

Документация по VS Code API на китайском языкеБлагодаря всеобщему энтузиазму работа по переводу была проведена упорядоченно, и каждый может принять участие в переводе!

предисловие

существует«Разработайте расширение vscode на основе веб-просмотра с нуля»В этой статье Луо Чжу объяснил, как отображать пользовательскую функцию пользовательского интерфейса в vscode на основе веб-просмотра в реальном бою.НаггетсПлагин также был выпущен, пожалуйста, попробуйте его.

Людям 👨🏻‍💻 всегда нравится хвастаться своими новыми навыками, Луожу не исключение, в конце концов, новые навыки требуют большой боевой практики. Начав разработку расширений VS Code, я использовал идею подключаемого модуля VS Code для решения проблем разработки. Но большинство идей расширения уже хорошо известны, пока я не подумал, что смогуyarn.lockПосле визуализации файла и безрезультатного поиска связанных плагинов я понял, что моя возможность приближается.

Что такое пользовательский редактор❓

Прежде чем начать развитие, что мы должны понимать, какие редакторы? Что такое пользовательский редактор?

Редактор (Editor) в VS Code — это собственно то место, где мы используем наиболее часто используемую кодировку. Как показано на рисунке ниже, пользовательский интерфейс VS Code разделен на 5 частей, а именно: панель действий (панель активности), боковая панель (боковая панель), группы редакторов (группа редакторов), панель (панель) и строка состояния (строка состояния). ).

Пользовательский редактор относится к типу редактора в VS Code относительно текстового редактора по умолчанию. В зависимости от использования пользовательские редакторы делятся напользовательский текстовый редактор,пользовательский редактора такжеПользовательский редактор только для чтения.

Пользовательские текстовые редакторы часто используются для JSON, XML, CSV, JSON или любых других форматов.Текстовый документОбеспечивает настраиваемый визуальный рендеринг. НапримерSvg Preview,Markdown Preview Enhanced,Mermaid Previewа такжеTodo List.

Пользовательские редакторы часто используются для предварительного просмотра файлов активов, таких как3D Viewer for VSCode,Draw.io Integrationа такжеMagick Image Reader

Но что их объединяет, так это использование функции пользовательского редактора VS Code. Цель этой статьи — реализовать расширение того же типа Preview, что и вышеуказанный плагин.

Зачем разрабатывать Yarn Lock Preview?

В статье не было этой главы. Когда плагин был впервые выпущен, еще до того, как статья была закончена, мне не терпелось порекомендовать свой плагин своим коллегам, друзьям и нескольким группам, с которыми я раньше тусовался, а потом меня замучила душа друга группы, " Какой смысл в тебе?":

Разработка собственного плагина для редактора более хлопотна, чем просто разработка плагинов и плагинов веб-просмотра, никто не будет скучать и жертвовать своим свободным временем, чтобы делать что-то неинтересное. С точки зрения обучения вы можете освоить большое количество API-интерфейсов VSCode, а с точки зрения функций вы можете просматривать их более интуитивно.yarn.lockИ поддерживает поиск пакета и пакетов, которые от него зависят. Это полезно, когда вы хотите определить, на какие пакеты косвенно ссылается ваше приложение:

На самом деле это боль от реальной работы: если React Native опирается на две разные версии нативного пакета одновременно, то при запуске проекта это будет связано с повторной регистрацией определенного пакета.Viewвызвать сбой приложения. С тех пор, как я присоединился к Tuya в течение года, я N раз помогал студентам-бизнесменам исследовать эту проблему. Поскольку некоторые зависимости от версии не находятся непосредственно вdependenciesнаписан, но косвенно зависит от определенного пакета.Мой метод заключается вyarn.lockсерединаcmd+fПоиск каких пакетов зависит от пакета, который вызвал аватор, а затем анализировать этот структурированный простой текстовый файл:

Хотя я уже являюсь водителем-ветераном в решении этой проблемы, она всегда будет оттягивать много времени у меня и моих коллег. Вышеупомянутая проблема может быть экстремальной, и еще одна обратная связь разработчиков, с которой мы часто сталкиваемся, заключается в том, что приложение аварийно завершает работу после введения нативного пакета. На самом деле это связано с тем, что наше приложение React Native интегрировано в существующее собственное приложение для граффити во вложенной форме, поэтому поддержка собственной библиотеки также зависит от версии, предоставляемой приложением. У нас также есть соответствующие инструменты проверки при упаковке, но пользователи могут не полагаться на эту библиотеку напрямую, но эта библиотека косвенно или косвенно ссылается на эту библиотеку. В настоящее время мы должны включить анализ человеческой плоти в десятках тысяч строк простого текста yarn.lock.

Например, версия react-native-svg, которая в настоящее время поддерживается приложением, — 5.5.1. пользователь использовалreact-native-svg-chartsПоследняя версия зависит от react-native-svg^6.2.1или^7.0.3. Пользователи следуют инструкциям, чтобы напрямую установить и использовать сбой, а затем найти нас, чтобы задать вопрос. Затем, если мы используем этот плагин, мы можем искать прямо в проекте:

Последний сценарий — это сценарий, с которым вы обязательно столкнетесь.Например, зависимость объявления разработки:tuya-panel-kit@^4.6.0, а затем столкнетесь с проблемой, сделайте снимок экрана, чтобы сообщить вам, что я не обновил версию, почему я сообщил об ошибке или почему производительность отличается. Затем мы должны позволить пользователю увидеть фактическую версию зависимости. Некоторые разработчики уйдутnode_modulesИщите следующее, это на самом деле ненадежно, уровень настолько сложен, что его трудно быстро найти; некоторые разработчикиyarn.lockКитайский поиск человеческой плоти, или некоторые разработчики напрямую позволяют нам помочь в расследовании. Затем с помощью этого подключаемого модуля мы можем напрямую позволить разработчикам самостоятельно выполнять поиск, а затем делать снимки экрана и отправлять нам проблемы:

Советы:yarn list --pattern tuya-panel-kitКоманда также может отображать краткую информацию о зависимостях.

С таким количеством болтовни, я считаю, что читатели пришли к согласию со мной.Если нет, добро пожаловать в битву в области комментариев. Без лишних слов, давайте начнем показывать настоящую технологию.

Инициализировать проект

Используйте официальные леса

1. УстановитьYeomanа такжеVS Code Extension Generator:npm install -g yo generator-code
2. Соберите проект:yo code

$ yo code
#     _-----_     ╭──────────────────────────╮
#    |       |    │   Welcome to the Visual  │
#    |--(o)--|    │   Studio Code Extension  │
#   `---------´   │        generator!        │
#    ( _´U`_ )    ╰──────────────────────────╯
#    /___A___\   /
#     |  ~  |
#   __'.___.'__
# ´   `  |° ´ Y `

# ? What type of extension do you want to create? New Extension (TypeScript)
# ? What's the name of your extension? Yarn Lock Preview
# ? What's the identifier of your extension? yarn-lock-preview
# ? What's the description of your extension? Previews yarn.lock file
# ? Initialize a git repository? Yes
# ? Bundle the source code with webpack? No
# ? Which package manager to use? yarn

$ code ./vscode-yarn-lock-preview

проект нормализации

1. Код Спецификация Конфигурация -npx @luozhu/create-coding-style
2. Отформатируйте код в соответствии с новым соглашением о коде —yarn lint --fix
3. Каноническая конфигурация Git Commit —npx @luozhu/create-commitlint

Расширенная информационная конфигурация

1. Конфигурация расширенной информации (package.json)
   1. настроитьpublisher
   2. добавитьlicenseполе.
   3. Добавить кrepositoryполе.
   4. настроитьicon: путь к значку размером 128 x 128 пикселей.
2. Измените ридми: потому что первоначальный не прошелvsce packageчек об оплате
3. использоватьnpx vsce packageПопробуйте упаковывать, убедитесь, что ошибки нет ошибок и предупреждений

Упаковка с esbuild

существуетРазработайте расширение vscode на основе веб-просмотра с нуляВ этой статье мы говорили об использовании упаковки esbuild для уменьшения размера упакованных продуктов и ускорения отладки. Обратитесь к предыдущей статье, чтобы завершить настройку, поэтому я не буду здесь вдаваться в подробности.

Don't repeat yourself

Основываясь на том принципе, что повторяющаяся работа может быть заменена сценариями, лучшие практики разработки моего плагина vscode были ускорены в виде шаблона для выполнения.yarn create @luozhu/vscode-extensionВы можете быстро приступить к разработке расширений vscode.

Принцип пользовательского редактора

Рабочий механизм

Мы уже знаем, что в VS Code есть три вида пользовательских редакторов: настраиваемые текстовые редакторы, настраиваемые редакторы и настраиваемые редакторы только для чтения. Все три типа редакторов заменяют стандартный текстовый редактор в VS Code. Разница в том, что пользовательский текстовый редактор основан на стандартной модели текстового документа VS Code и не должен предоставляться разработчиками, такими какSvg Previewплагин. Пользовательский редактор используется для предварительного просмотра двоичных файлов, поэтому разработчикам необходимо предоставлять собственные модели документов и самостоятельно реализовывать такие функции, как сохранение и резервное копирование.Draw.io Integrationплагин. Пользовательские редакторы только для чтения используются для предварительного просмотра двоичных файлов, таких какMagick Image Reader.

Зная разницу между тремя пользовательскими редакторами, давайте посмотрим, к какому пользовательскому редактору относится наш плагин. На самом деле ответ очевиден,yarn.lockФайл относится к стандартной модели документа VS Code, и мы можем использовать самый простой пользовательский текстовый редактор.

Написание пользовательского редактора включает в себя представления, подключаемые модули, модели документов, базовые файлы ресурсов и взаимодействие между ними.Общий принцип заключается в следующем:

Благодаря предварительному просмотруyarn.lockНе требует от нас предоставления модели документа, поэтому нам нужно только основатьCustomTextEditorProviderНапишите CustomEditorProvider для регистрации плагина, затем напишите наше представление (пользовательский интерфейс) и, наконец, реализуйте взаимодействие между представлением и плагином.

Нам нужно сосредоточиться на том, как разрабатывать представления, как взаимодействуют представления и плагины, как реализовать CustomEditorProvider и как зарегистрировать CustomEditorProvider.

Как развивать взгляды

Представления реализуются через веб-представления, поэтому вы можете создавать пользовательские интерфейсы с помощью стандартных HTML, CSS и JavaScript или знакомых вам интерфейсных фреймворков.

Как представления взаимодействуют с плагинами

Из-за ограничений VS Code Webview не может напрямую обращаться к API VS Code и отправлять сетевые запросы, но может взаимодействовать с плагином в двух направлениях через postMessage. Но рукописная двусторонняя связь вызывает затруднения, особенно при выполнении сетевого запроса, веб-просмотр должен сначала отправить сообщение, чтобы инициировать сетевой запрос, событие мониторинга, зарегистрированное на стороне подключаемого модуля, инициирует сетевой запрос, а подключаемый модуль ожидает возврата сетевого запроса, прежде чем отправить сообщение для отправки данных в веб-представление, и, наконец, веб-представление получает информацию через зарегистрированные события прослушивателя. Краткий процесс выглядит следующим образом:

Помимо конкретной реализации, это взаимодействие уже очень античеловеческое, и когда оно используется, оно также столкнется с затратами на конверсию и умственной нагрузкой, вызванной различными API, используемыми веб-просмотром и плагином. Чтобы решить эту болевую точку, я инкапсулировал@luozhu/vscode-channelдля достижения хорошей двусторонней связи. Вы можете просто перейти на сторону веб-просмотраcallМетод вызывает метод и ждет результата обработки, на стороне плагина проходитbindОбработка событий привязки метода.

Как реализовать CustomEditorProvider

Обратитесь к официальной демоверсииcatScratchEditorМы видим, чтоCatScratchEditorProviderдостигается за счетvscode.CustomTextEditorProviderПользовательский поставщик редактора, созданный интерфейсом. а такжеvscode.CustomTextEditorProviderЭтот интерфейс имеет только один методresolveCustomTexEditor. Так что в принципе нам нужно только реализоватьresolveCustomTexEditorЭтот метод подойдет.

Как зарегистрировать CustomEditorProvider

После реализации провайдера пользовательского редактора нам нужно зарегистрировать его в плагине, VS Code предоставляетvscode.window.registerCustomEditorProviderМетод используется для решения этой задачи.

Реализация пользовательского редактора

На бумаге в конце концов я чувствую себя мелким, и я абсолютно точно знаю, что это дело должно быть сделано. Если вы запутались в предыдущих концепциях, следующий настоящий бой может внезапно просветлить вас.

Объявить пользовательский редактор

Пользовательский редактор естьpackage.jsonВклады (contributes)изcustomEditorsобъявленный атрибут,customEditorsПредоставляет пользовательский редактор. Это массив, что означает, что мы можем предоставить несколько пользовательских редакторов в одном расширении. Наш пользовательский редактор объявлен следующим образом:

"contributes": {
  "activationEvents": [
    "onCustomEditor:yarn-lock-preview.yarnLock"
  ],
  "customEditors": [
    {
      "viewType": "yarn-lock-preview.yarnLock",
      "displayName": "Preview yarn.lock",
      "selector": [
        {
          "filenamePattern": "yarn.lock"
        }
      ],
      "priority": "option"
    }
  ]
},

• activationEvents- Зарегистрируйтесь для участия в мероприятиях по активации
  • onCustomEditor:*- Событие для активации пользовательского редактора
• customEditors- Предоставлен пользовательский редактор.
  • viewType- идентификатор пользовательского редактора. Он должен быть уникальным среди всех кастомных редакторов, предлагается расширить идентификатор какviewType的一部分包括在内。 В использованииvscode.registerCustomEditorProviderИ вonCustomEditor:${id}При регистрации пользовательского редактора в событии активации используйтеviewType.
  • displayName- Читаемое пользователем имя пользовательского редактора. Это имя отображается пользователю при выборе используемого редактора.
  • selector- Набор глобусов, для которых включены пользовательские редакторы.
  • priority- (Необязательно) Определите, когда использовать пользовательский редактор. Это поле управляет надлежащим использованием определенного пользовательского редактора.
    • option- Этот редактор не используется автоматически, когда пользователь открывает ресурс, но пользователь может использоватьReopen Withкоманда для переключения в этот редактор.
    • default- Автоматически использовать этот редактор, когда пользователь открывает ресурс, при условии, что для ресурса не зарегистрирован другой пользовательский редактор по умолчанию.

Теперь мы можем открытьyarn.lockфайл и введите в палитре командReopen withВыберите тот, который я зарегистрировал ранееPreview yarn.lock:

На данный момент мы видим пустой редактор и полосу непрерывной загрузки вверху.

Способ открытия командной панели для вывода команд не очень удобный, мы можем добавить кнопку-переключатель в меню редактора для быстрого переключения режима редактора. Сначала мыpackage.jsonНастройте команды и меню в:

"contributes": {
  "commands":[
    {
      "command": "yarn-lock-preview.switchEditorMode",
      "title": "switch editor mode",
      "icon": "$(rocket)"
    }
  ],
  "menus": {
    "editor/title": [
      {
        "command": "yarn-lock-preview.switchEditorMode",
        "group": "navigation"
      }
    ]
  }
}

• commands- Предоставляет команды палитре команд.
• menus- Предоставляет элементы меню редактору.

затем вsrc/extensionЗарегистрируйте команды и реализуйте обратные вызовы команд в активной функции в:

import { commands, ExtensionContext } from 'vscode';

export function activate(context: ExtensionContext) {
  console.log('Congratulations, your extension "yarn-lock-preview" is now active!');

  context.subscriptions.push(
    commands.registerCommand('yarn-lock-preview.switchEditorMode', () => {
      commands.executeCommand('workbench.action.reopenWithEditor');
    })
  );
}

я только нашелworkbench.action.reopenWithEditorЭта команда, которую можно запустить, я намерен реализовать что-то похожее на gitоткрыть файла такжеОткрыт для измененийфункция. Из-за плохих академических навыков,git.openFileМне все еще нужно изучить его реализацию.Если кто-нибудь увидит это, они могут дать мне несколько советов. Текущий эффект выглядит следующим образом:

Зарегистрироваться Пользовательский поставщик редактора

Теперь у нас есть наш пользовательский тип документа зарегистрированyarn-lock-preview.yarnLockа такжеonCustomEditor:yarn-lock-preview.yarnLockсобытие активации. Теперь нам нужно использоватьwindow.registerCustomEditorProviderМетод регистрирует соответствующий провайдер пользовательского редактора.

Если вы попытаетесь позвонитьregisterCustomEditorProviderметод, вы обнаружите, что у нас нет поставщика пользовательского редактора для использования, мы реализуем поставщика пользовательского редактора в следующем разделе.

import vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  console.log('Congratulations, your extension "yarn-lock-preview" is now active!');

  context.subscriptions.push(
    vscode.window.registerCustomEditorProvider(
      'yarn-lock-preview.yarnLock',
      provider // 自定义编辑器 provider 实例
    );
  );
}

Реализация поставщика пользовательского редактора

Поскольку файл, который мы хотим предварительно просмотреть, это стандартная модель документов VS Code, нам нужно нанести егоCustomTextEditorProviderЭтот интерфейс инкапсулирует класс для его реализации. Для этого создаем новыйYarnLockEditorProvider.tsфайл, минимальная реализация которого выглядит следующим образом:

import vscode from 'vscode';

class YarnLockEditorProvider implements vscode.CustomTextEditorProvider {
  // 将 context 注入 this 对象
  constructor(private readonly context: vscode.ExtensionContext) {}

  /**
   * 当自定义编辑器打开时调用。
   */
  async resolveCustomTextEditor(
    _document: vscode.TextDocument,
    webviewPanel: vscode.WebviewPanel,
    _token: vscode.CancellationToken
  ): Promise<void> {
    // 给 webview 设置初始内容
    webviewPanel.webview.options = {
      enableScripts: true, // 允许在 webview 中运行脚本
    };
    webviewPanel.webview.html = this.getHtmlForWebview();
  }

  private getHtmlForWebview(): string {
    return `
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Cat Coding</title>
        </head>
        <body>
            <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" width="300" />
        </body>
        </html>
    `;
  }
}

export default YarnLockEditorProvider;

• class YarnLockEditorProvider implements vscode.CustomTextEditorProvider- Объявите класс, реализующий поставщика пользовательского текстового редактора.
• resolveCustomTextEditor: анализирует пользовательский редактор на основе заданного текстового ресурса. Когда пользователь впервые открываетCustomTextEditorProviderресурсы, или когда они используют этоCustomTextEditorProviderЭтот метод будет вызываться при повторном открытии существующего редактора.
• webviewPanel.webview.options- Настройте параметры веб-просмотра, здесь мы настроили разрешение сценариев.
• webviewPanel.webview.html = this.getHtmlForWebview()- Установить начальный контент для HTML.

Для упрощения операции инициализации имеемYarnLockEditorProviderкласс инкапсулируетregisterстатический метод:

static register(context: vscode.ExtensionContext): vscode.Disposable {
  const provider = new YarnLockEditorProvider(context);
  const providerRegistration = vscode.window.registerCustomEditorProvider(
    YarnLockEditorProvider.viewType,
    provider,
    {
      webviewOptions: {
        retainContextWhenHidden: true, // 隐藏时保留上下文
      },
    }
  );
  return providerRegistration;
}

private static readonly viewType = 'yarn-lock-preview.yarnLock';

Теперь мы можем зарегистрировать нашего поставщика пользовательского редактора вsrc/extension.tsизactivateвызов методаYarnLockEditorProvider.register(context)чтобы получить зарегистрированный пользовательский редактор, затемpushПросто перейдите к массиву прослушивателей прокси:

import vscode from 'vscode';
import YarnLockEditorProvider from './YarnLockEditorProvider';

export function activate(context: vscode.ExtensionContext) {
  context.subscriptions.push(YarnLockEditorProvider.register(context));
}

Вот такой простой, но полноценный пользовательский редактор сделан:

реализация визуального предпросмотра yarn.lock

Ранее мы успешно принесли вам функцию наблюдения за кошками в пользовательском редакторе. Конечно, наша конечная цель — не смотреть код типа «черная кошка». В этой главе мы бросим вызов последнему боссу: реализации доступного для поиска Json-дерева зависимостей yarn.lock.

Разобрать файл yarn.lock

Технические вопросы решены, теперь займемся бизнес-задачами. Наши болевые точки в том, что файлы Yarn.lock представляют собой простой текст, его труднее читать, а форма отображения лучше. Тогда мы определенно можем превратить текстовые файлы в более простой в обращении ресурс, в качестве внешнего интерфейса, конечно же, JSON. С официальной пряжей@yarnpkg/lockfileМы можем сделать это с помощью инструментов. Давайте напишем демо и попробуем.

import * as lockfile from '@yarnpkg/lockfile';
class YarnLockEditorProvider implements vscode.CustomTextEditorProvider {

  /**
   * 当自定义编辑器打开时调用。
   */
  async resolveCustomTextEditor(
    document: vscode.TextDocument,
    webviewPanel: vscode.WebviewPanel,
    _token: vscode.CancellationToken
  ): Promise<void> {
    ...
    // 获取纯文本并解析成 json 数据
    const json = lockfile.parse(document.getText()).object;
    // 将 JSON 字符串传递给 HTML 拼装方法展示
    webviewPanel.webview.html = this.getHtmlForWebview(JSON.stringify(json));
    ...
  }
  private getHtmlForWebview(json: string): string {
    return `
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Cat Coding</title>
        </head>
        <body>
          <h1>JSON 数据</h1>
          <p>${json}</p>
        </body>
        </html>
    `;
  }
}

Эффект следующий:

интеграция веб-просмотра umijs

Ссылаться на"# Разработать расширение vscode на основе веб-просмотра с нуля"а такжеvscode-juejin-meИнициализируйте проект umijs и выполните некоторую обрезку. затем используйте@luozhu/vscode-utilsизgetUmiHTMLContentметод для получения содержимого HTML:

webviewPanel.webview.html = getUmiHTMLContent(this.context, webviewPanel, {
  title: 'Yarn Lock Preview',
});

обновление содержимого веб-просмотра

После интеграции umijs проходимwebviewPanel.webview.htmlИсходное содержимое настройки пусто. Если мы хотим передать текст из плагина в веб-просмотр, нам нужно сделать коммуникацию. Написание коммуникационного кода в VS Code затруднено из-за различных ограничений. Плагины, которые в основном полагаются на веб-просмотр, будут инкапсулировать механизм связи. Моя идея упаковки состоит в том, чтобы учиться уjs-channelРеализована минимальная умственная нагрузка для использования@luozhu/vscode-channel. С помощью этого инструмента мы можем легко реализовать операцию обновления веб-просмотра:

Сторона плагина отправляет сообщение об обновлении:

import Channel from '@luozhu/vscode-channel';
class YarnLockEditorProvider implements vscode.CustomTextEditorProvider {
  async resolveCustomTextEditor(
    document: vscode.TextDocument,
    webviewPanel: vscode.WebviewPanel,
    _token: vscode.CancellationToken
  ): Promise<void> {
    // 给 webview 设置初始内容
    webviewPanel.webview.options = {
      enableScripts: true,
    };

    webviewPanel.webview.html = getUmiHTMLContent(this.context, webviewPanel, {
      title: 'Yarn Lock Preview',
    });
    
    // 初始化一个 channel 对象
    const channel = new Channel(this.context, webviewPanel);
    const json = lockfile.parse(document.getText()).object;
    // 触发 updateWebview 事件，并将文本作为参数传入
    channel.call('updateWebview', json);
  }
}

Сторона веб-просмотра прослушивает сообщения:

import Channel from '@luozhu/vscode-channel';

export default function HomePage() {
  const [data, setData] = React.useState({});
  React.useEffect(() => {
    channel.bind('updateWebview', message => {
      setData(message.params);
    });
  },[])
}

Синхронизация текстового контента

В предыдущей главе мы реализовали синхронизацию исходного контента, но контент не статичен,yarn.lockСкорее всего, он изменится. В настоящее время нам также необходимо соответствующим образом обновить наш контент. Для этого требования нам нужно использоватьvscode.workspace.onDidChangeTextDocumentСлушатель событий для достижения:

// 仍然是在 resolveCustomTextEditor 方法中实现
// 由于需要对 json 数据处理和重复调用更新方法，封装了此方法
function updateWebview(textDocument: vscode.TextDocument) {
  let json = lockfile.parse(textDocument.getText());
  switch (json.type) {
    case 'merge':
      // TODO: 处理 merge type
      break;
    case 'conflict':
      // TODO: 处理 conflict type
      break;
    default:
      json = json.object;
  }
  channel.call('updateWebview', json);
}
// 注册钩子事件处理程序，这样我们就可以使 webview 与文本文档同步。
//
// 文本文件作为我们的模型，所以我们必须将文件中的变化同步到我们的编辑器。
// 请记住，一个文本文件也可以在多个自定义编辑器之间共享（例如，当你分割一个自定义编辑器时就会发生这种情况）。
const changeDocumentSubscription = vscode.workspace.onDidChangeTextDocument(e => {
  if (e.document.uri.toString() === document.uri.toString()) {
    updateWebview(e.document);
  }
});
// 确保当我们的编辑器关闭时，移除了监听器。
webviewPanel.onDidDispose(() => {
  changeDocumentSubscription.dispose();
});

Реализовать представление JSON с возможностью поиска

Реализация поиска не сложна. Если вам интересно, вы можете прочитать исходный код напрямую. Пользовательский интерфейс использует antd, который поставляется с umi. Представление JSON, которое я выбралreact-json-view, здесь есть несколько интересных моментов, о которых стоит поговорить.

1. Когда объем данных слишком велик, производительность рендеринга низкая, и необходимо определить, следует ли сворачивать

import ReactJson from 'react-json-view';
...
<ReactJson
  shouldCollapse={filed => {
    // 除了根目录都折叠
    if (filed.name) {
      return true;
    }
    return false;
  }}
/>

2. Стиль соответствует текущей теме

import ReactJson from 'react-json-view';

const getCssVar = (cssVar: string) => {
  const htmlStyle = document.documentElement.style;
  return htmlStyle.getPropertyValue(cssVar).trim();
};

...
<ReactJson
  style={{
    backgroundColor: getCssVar('--vscode-editor-background'),
    fontSize: getCssVar('--vscode-editor-font-size'),
  }}
/>

3. Адаптация светлой и темной темы

Идеальной адаптацией является переключение темы ReactJson при смене темы Нам нужно инициировать уведомление на стороне плагина:

// 初始主题
channel.call('updateColorTheme', vscode.window.activeColorTheme);
// 监听主题改变事件
vscode.window.onDidChangeActiveColorTheme(colorTheme => {
  channel.call('updateColorTheme', colorTheme);
});

Затем прослушивает боковую веб-просмотрupdateColorThemeмероприятие:

const [theme, setTheme] = React.useState<ThemeKeys>();
...
React.useEffect(() => {
channel.bind('updateColorTheme', message => {
  const { kind } = message.params;
  setTheme(kind === 1 ? 'rjv-default' : 'monokai');
});
}, []);
...
<ReactJson
  theme={theme}
/>

Пользовательский интерфейс был продемонстрирован в начале статьи, вот эффект черной темы:

Приложение с участием API

Разработка подключаемого модуля VS Code требует много знаний, и каждый тип подключаемого модуля имеет свою собственную процедуру и API. Основываясь на принципе разделения ответственности, некоторые API, связанные с пользовательскими редакторами, перечислены здесь для удобства всех и меня в будущем.

vscode.commands.registerCommand

Регистрирует команду, которая может быть вызвана раскладкой клавиш, пунктом меню, действием или напрямую. Двойная регистрация команды с существующим идентификатором команды приведет к ошибке.

vscode.TextDocument

vscode.window.registerCustomEditorProvider

дляcustomEditorsВнесено расширенными функциональными точкамиviewTypeЗарегистрируйте поставщика для пользовательского редактора.

При открытии пользовательского редактораonCustomEditor:viewTypeАктивное событие. Ваше расширение должно бытьviewTypeЗарегистрироватьCustomTextEditorProvider,CustomReadonlyEditorилиCustomEditorProviderкак часть активации.

vscode.CustomTextEditorProvider

Поставщик пользовательского текстового редактора.

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

CustomTextEditorProvider.resolveCustomTextEditor

Анализирует пользовательский редактор из заданного текстового ресурса. Этот метод будет использоваться в первый раз, когда пользовательCustomTextEditorProviderпри открытии ресурса, либо используют этоCustomTextEditorProviderВызывается при повторном открытии существующего редактора.

vscode.CustomReadonlyEditorProvider

Пользовательский поставщик редактора только для чтения, использующий пользовательскую модель документа.

Пользовательское использование редактора только для чтенияCustomDocument, вместоTextDocument.

Вы должны использовать этот тип пользовательского редактора при работе с двоичными файлами или более сложными сценариями. Для простых текстовых документов используйтеCustomTextEditorProvider.

vscode.CustomEditorProvider

Поставщик редактируемых пользовательских редакторов, использующих пользовательские модели документов.

Используйте пользовательский редакторCustomDocument, вместоTextDocument. Это дает расширению полный контроль над операциями редактирования, сохранения и резервного копирования.

Вы должны использовать этот тип пользовательского редактора при работе с двоичными файлами или более сложными сценариями. Для простых текстовых документов используйтеCustomTextEditorProvider.

vscode.WebviewPanel

Панель, содержащая веб-представление.

последние хорошие статьи

• Nuggets | Разработка расширения vscode на основе веб-просмотра с нуля
• выпуск плагина vscode
• Кнопка в интерфейсной компонентизации
• Каждый интерфейс заслуживает собственной библиотеки компонентов, как арбуз каждое лето 🍉
• Лучшие фреймворки Node.js для использования в 2021 году
• Обязательные серии интервью React
• Серия учебников по языку Go

Эта статья была впервые опубликована вКолонка самородков, синхронизировано сБлог Луожуи публичный аккаунтДом утреннего чая в Луочжу.