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

В последнее время я экспериментировал с VS Code Webviews, и у меня был один из таких моментов а что, если: что, если мы поместим приложение React в Webview внутри расширения внутри VS Code?

Здесь начинается этот небольшой эксперимент Франкенштейна, небольшой обзор того, что мы можем делать (но, вероятно, не должны, подробнее об этом позже) с расширениями VS Code, Webviews и React.

Настройка проекта

У каждого путешествия есть отправная точка. Мы будем редактировать небольшой файл конфигурации в Json. Мы хотели бы предоставить небольшой графический интерфейс для редактирования файла, выполнения некоторых проверок и так далее.

Вот наш пример файла конфигурации:

Теперь мы можем начать кодировать и создавать наш проект. Первоначальная настройка довольно проста:

  • сначала установите VS Code и node.js, если у вас их еще нет
  • для создания расширения по умолчанию вы можете использовать шаблоны Yeoman: npm install -g yo generator-code
  • создать проект расширения с: yo code

Вам будет задано несколько вопросов, чтобы все подготовить. Я выбрал Typescript на протяжении всего этого проекта, но это зависит от вас.

? Какой тип расширения вы хотите создать? Новое расширение (TypeScript)

? Как называется ваше расширение? vscode-реагировать

? Какой идентификатор у вашего расширения? vscode-реагировать

? Каково описание вашего расширения? Зарождение

? Инициализировать репозиторий git? да

? Какой менеджер пакетов использовать? npm

Откройте проект в VS Code, и вот у нас есть базовое «Hello world!» расширение, которое вы можете протестировать, нажав F5, чтобы войти в режим отладки, который запустит новое окно VS Code, в котором доступно расширение, просто нажмите Ctrl + maj + P, чтобы отобразить палитру команд, и введите Hello World.

(вы можете найти эту часть в официальном руководстве по запуску расширений VS Code )

Добавление языковой поддержки в расширение

Цель нашего расширения - редактировать файлы config.json. Поэтому мы хотим иметь возможность использовать расширение только с файлами Json.

Сначала мы отредактируем файл package.json, который является глобальным объявлением нашего расширения для VS Code.

В разделе «способствует» мы добавляем языковую часть, чтобы объявить наш фиктивный язык конфигурации.

Поскольку мы больше не делаем расширение Hello World, мы можем переименовать команду, которую мы будем использовать, заменив ее следующим объявлением

Нам также нужно переименовать соответствующие ActivEvents

С этой конфигурацией мы можем теперь начать кодировать наше расширение. Сначала мы меняем действие, к которому будет прикреплен наш код, в файле src / extension.ts.

Теперь в нашем расширении вместо отображения Hello World мы предложим пользователю выбрать файл dummyConfig Json и отобразить путь к этому файлу в виде информационного сообщения. VS Code API предоставляет функцию с именем window.showOpenDialog, которая принимает объект openDialogOptions для определения свойств диалогового окна. Смотрите документацию здесь.

Вы можете протестировать новую команду, как мы это делали раньше, запустив отладку, но на этот раз используя измененное имя команды Webview React.

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

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

API-документация для Webviews написана очень хорошо и может помочь вам, если вам понадобится больше деталей для этой части.

А пока мы начнем с создания папки с именем view и файла машинописного текста с именем ViewLoader.ts, в котором мы будем управлять нашим Webview.

В этом классе мы используем createWebviewPanel для создания Webview, а затем устанавливаем содержимое Webview с помощью «_panel.webview.html».

Перед тестированием базового Webview нам просто нужно вызвать ViewLoader в нашем расширении, где мы обрабатываем команду вместо вызова showInformationMessage.

И теперь мы можем отладить наше расширение и увидеть содержимое веб-просмотра.

Создание приложения React внутри нашего проекта расширения

Вот сложная часть: как управлять расширением для VS Code и приложением React независимо внутри одного проекта?

Вся магия будет исходить от npm и Webpack с помощью некоторых плагинов ;-)

Первым делом нужно включить в наш проект все библиотеки, которые нам понадобятся:

  • Реагировать, очевидно: npm install react react-dom
  • Поскольку я использую Typescript, мне нужно включать типы, но вы можете этого не делать, если используете классический JS: npm install — save-dev @types/react @types/react-dom
  • Для создания нашего приложения React мы будем использовать Webpack: npm install — save-dev webpack webpack-cli
  • И некоторые инструменты: ts-loader, очевидно, для Typescript, style и css-loader для… style и css.
  • Наконец, npm-run-all позволит нам связать задачу сборки для расширения и для реагирующего приложения - npm install - save-dev ts-loader style-loader css-loader npm-run-all

Теперь мы можем создать папку для нашего приложения для реагирования, назовем ее «app» и поместим в папку просмотра. Затем создайте файлы «index.css», «index.tsx» и «tsconfig.json» в папке «app».

В файле приложения response tsconfig.json мы заявляем, что используем react и используем папку «configViewer» в качестве выходного каталога в корне нашего проекта расширения, эта папка будет полезно позже, чтобы связать расширение и реагирующее приложение.

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

Мы меняем задачи «компилировать» и «смотреть» и добавляем несколько подзадач.

В корень нашего расширения мы добавляем файл конфигурации для webpack, «webpack.config.js». Здесь нет никаких сложностей, мы объявляем использование нашего другого загрузчика, мы определяем точку входа React-приложение, и мы снова настроили выходную папку нашего реактивного приложения как папку «configViewer».

Отредактируйте корневой каталог «tsconfig.json», чтобы исключить реагирующее приложение из области: «** / view / app / **»

Отредактируйте .gitignore, чтобы добавить запись для «configViewer / configViewer.js», чтобы игнорировать скомпилированный файл нашего приложения для реагирования, и, наконец, добавьте содержимое в «index.tsx», чтобы получить базовое приложение для реагирования.

Используйте приложение React в веб-просмотре

Поскольку я использую Typescript, вы можете догадаться, что мне нравится все печатать. Это верно и для файла конфигурации, который мы пытаемся редактировать.

Мы представим файл model.ts, который будет содержать интерфейсы для наших типов конфигурации, и поместим его в папку view / app.

Поскольку мы будем использовать этот файл внутри приложения React, но также и внутри нашего расширения, мы должны указать компилятору машинописного текста включить этот файл. В tsconfig.json для расширения (в корневой папке) мы должны отредактировать часть исключения, чтобы исключить содержимое папки view / app, но не файл model.ts, это позволит нам использовать его в расширении.

Теперь в Viewloader мы можем загрузить наш файл и десериализовать его содержимое в конструкторе класса:

Теперь, когда у нас есть контент для отображения, мы можем указать нашему веб-просмотру загрузить приложение React. Поскольку webpack компилирует наше приложение как файл js, все, что нам нужно сделать, это разрешить выполнение javascript в нашем веб-просмотре и указать файл, который будет загружен.

Сначала нам нужно указать веб-просмотру, где находится загружаемый файл js, для этого нам нужно иметь текущий путь к расширению и передать его функции getWebviewContent (мы получаем его из контекста нашего расширения).

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

Нам также необходимо объявить авторизацию типов файлов внутри шаблона веб-просмотра, указав в заголовке веб-просмотра Content-Security-Policy.

Теперь, когда мы авторизовали выполнение javascript, мы можем загрузить файл configViewer.js в веб-просмотр и передать содержимое файла конфигурации также как переменную javascript window.initialData

Обратите внимание, что мы также определили переменную window.acquireVsCodeApi, которая представляет собой функцию, предоставляемую VS Code для обеспечения связи между VS Code и веб-просмотром. Действительно, мы должны управлять жизненным циклом веб-просмотра, поскольку каждый раз, когда вкладка теряет фокус в VS Code, веб-просмотр будет уничтожен и воссоздан, когда фокус вернется.

«VscodeApi» в нашем небольшом приложении позволит нам управлять состоянием веб-просмотра, что позволяет нам сохранять данные, когда веб-просмотр уничтожается и воссоздается.

Чтобы управлять этим жизненным циклом, мы должны передать эти переменные нашему приложению.

В index.tsx мы добавляем интерфейс для объявления этих переменных и выполняем функцию acquVsCodeApi.

Эти переменные будут переданы в компонент, который мы сейчас создадим для отображения содержимого конфигурации, назовем его config.tsx.

Первое, что мы хотим, чтобы этот компонент делал, - это управлять состоянием и отображать некоторый базовый контент, поэтому в конструкторе нашего компонента мы смотрим на исходные данные из props или на состояние API VS Code для использования данных и устанавливаем его в состояние компонента.

И, наконец, мы можем поместить что-нибудь в нашу функцию рендеринга для отображения списка пользователей и других данных из нашего файла конфигурации и использовать компонент в нашем файле index.tsx.

Чтобы сделать вещи немного красивее, давайте добавим некоторый CSS в наш файл index.css.

Как заставить приложение React взаимодействовать

VS Code api предоставляет способ отправки «команд» в веб-просмотр и из него. Также можно вызвать конкретное действие VS Code с помощью URI, но мы не будем здесь говорить об этой части.

Действие, которое мы хотели бы, чтобы VS Code выполнял за нас, - это, очевидно, сохранить конфигурацию после того, как мы закончим ее редактирование, но пока мы можем только отображать конфигурацию, а не редактировать ее, давайте решим эту проблему.

Мы сосредоточимся только на управлении пользователями и добавим к поведению в нашем приложении React: управление ролями и пользователями.

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

Мы добавляем функцию onChangeUserActiveState для обработки… изменения флажка isActive и двух текстовых полей ввода и их соответствующей функции для добавления пользователя или роли.

Как мы уже говорили ранее, для управления жизненным циклом веб-просмотров нам нужно обновить второе «состояние», поэтому давайте создадим для этого функцию:

Теперь, когда мы можем редактировать нашу конфигурацию, сохранить это довольно просто: нам нужно определить тип сообщений, которыми мы будем обмениваться, отправить сообщение, когда мы нажмем кнопку «сохранить», а затем перехватить сообщение в нашем ViewLoader, чтобы выполнить команду.

В нашей общей модели мы добавляем интерфейс ICommand, который будет сообщать нам, какой тип команды мы хотим выполнить (сохранить файл), а также содержать соответствующие данные. Чтобы узнать тип выполняемой команды, мы также объявляем перечисление CommandAction, что довольно просто.

В приложении React мы добавляем кнопку «сохранить» и соответствующий обработчик событий saveConfig, которые создают команду и просто вызывают VS Code Api с функцией postMessage, что довольно просто.

И последняя часть, конечно же, - это обработка команды. В ViewLoader мы «подписываемся» на сообщение из веб-просмотра, вызывая функцию onDidReceiveMessage в классе веб-просмотра.

При вызове команды «сохранить» мы запишем новое содержимое файла и отобразим информационное сообщение для подтверждения действия.

Заключение

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

Но как я предупреждал в начале этого короткого путешествия и как сказал профессор Ян Малкольм в «Парке юрского периода»: «Вы были так озабочены тем, сможете ли вы, что не остановились, чтобы подумать, стоит ли вам».

И это основная проблема, веб-просмотр потребует много ресурсов внутри VS Code, поэтому мы должны быть очень осторожны при его использовании, особенно если мы внедряем в него приложение React. Всегда спрашивайте, нельзя ли сделать то, что вы делаете, в VS Code с помощью API.

В любом случае, здесь у вас есть только пример того, что можно сделать с VS Code и веб-представлениями, но возможны многие другие идеи, такие как отображение единого представления для редактирования локализации i18n в приложении Angular, которое могло бы расширить расширение, созданное Александром Резниченко (https: / /medium.com/younited-tech-blog/my-way-to-vs-code-extension-cdf84cdb36ba ).

Исходный код каждого шага можно найти здесь https://github.com/Ciaanh/reactception