Создание расширения мастера в Azure Data StudioCreate an Azure Data Studio Wizard extension

В этом учебнике показано, как создать расширение мастера в Azure Data Studio.This tutorial demonstrates how to create a new Azure Data Studio Wizard extension. Это расширение предоставляет мастер для взаимодействия с пользователями в Azure Data Studio.The extension contributes a wizard to interact with users in Azure Data Studio.

В этом руководстве вы узнаете, как выполнять следующие задачи.During this tutorial you learn how to:

  • Установка генератора расширенийInstall the extension generator
  • Создание расширенияCreate your extension
  • Добавление настраиваемого мастера в расширениеAdd a custom wizard to your extension
  • Тестирование расширенияTest your extension
  • Упаковка расширенияPackage your extension
  • Публикация расширения в MarketplacePublish your extension to the marketplace

Предварительные требованияPrerequisites

Средство Azure Data Studio основано на той же платформе, что и Visual Studio Code, поэтому расширения для Azure Data Studio создаются с помощью Visual Studio Code.Azure Data Studio is built on the same framework as Visual Studio Code, so extensions for Azure Data Studio are built using Visual Studio Code. Чтобы приступить к работе, вам потребуются следующие компоненты.To get started, you need the following components:

  • Установленный Node.js, доступный в вашей переменной $PATH.Node.js installed and available in your $PATH. Node.js включает в себя npm, диспетчер пакетов Node.js, который будет использоваться для установки генератора расширений.Node.js includes npm, the Node.js Package Manager, which is used to install the extension generator.
  • Visual Studio Code для отладки расширения.Visual Studio Code to debug the extension.
  • Расширение отладки Azure Data Studio (необязательно).The Azure Data Studio Debug extension (optional). Оно позволяет протестировать расширение без необходимости упаковывать и устанавливать его в Azure Data Studio.This lets you test your extension without needing to package and install it into Azure Data Studio.
  • Убедитесь, что azuredatastudio указан в вашем пути.Ensure azuredatastudio is in your path. Для Windows выберите параметр Add to Path в setup.exe.For Windows, make sure you choose the Add to Path option in setup.exe. Для Mac или Linux выберите параметр Установить путь к команде azuredatastudio в PATH.For Mac or Linux, run the Install 'azuredatastudio' command in PATH option.

Установка генератора расширенийInstall the extension generator

Чтобы упростить процесс создания расширений, мы создали генератор расширений с помощью Yeoman.To simplify the process of creating extensions, we've built an extension generator using Yeoman. Для его установки выполните следующую команду в командной строке.To install it, run the following from the command prompt:

`npm install -g yo generator-azuredatastudio`

Создание расширения мастераCreate your wizard extension

Общие сведения о мастереIntroduction to wizards

Мастер — это тип пользовательского интерфейса, предоставляющий пошаговые страницы, которые пользователь должен заполнить для выполнения задачи.Wizards are a user interface type that present step-by-step pages for users to fill in, in order to accomplish a task. Обычно используются мастеры настройки программного обеспечения и мастеры устранения неполадок.Common examples include software setup wizards and troubleshooting wizards. Пример:For example:

Мастер Dacpac

Поскольку мастеры часто удобно использовать при работе с данными и расширении функциональных возможностей Azure Data Studio, Azure Data Studio предлагает интерфейсы API для создания собственных настраиваемых мастеров.Because wizards are often helpful when working with data and extending the functionality of Azure Data Studio, Azure Data Studio offers APIs to create your own custom wizards. Мы рассмотрим, как создать шаблон мастера и изменить его для создания собственного настраиваемого мастера.We will be walking through how to generate a Wizard template and modify it to create your own custom wizard.

Запуск генератора расширенийRun the extension generator

Для создания расширения сделайте следующее.To create an extension:

  1. Запустите генератор расширений с помощью следующей команды.Launch the extension generator with the following command:

    yo azuredatastudio

  2. Выберите Новый мастер или диалоговое окно в списке типов расширений.Choose New Wizard or Dialog from the list of extension types. Затем выберите Мастер и Шаблон для начало работыThen select Wizard, followed by the Getting Started Template

  3. Выполните инструкции, чтобы указать имя расширения (в этом руководстве используйте My Test Extension) и описание.Follow the steps to fill in the extension name (for this tutorial, use My Test Extension), and add a description.

    Генератор расширений

При выполнении предыдущих шагов создается папка.Completing the previous steps creates a new folder. Откройте ее в Visual Studio Code, после чего вы сможете создать собственное расширение мастера.Open the folder in Visual Studio Code and you're ready to create your own wizard extension!

Запуск расширенияRun the extension

Давайте посмотрим, что делает шаблон мастера, запустив расширение.Let's see what the wizard template gives us by running the extension. Перед запуском убедитесь, что в Visual Studio Code установлено расширение отладки Azure Data Studio.Before running, ensure that the Azure Data Studio Debug extension is installed in Visual Studio Code.

Нажмите клавишу F5 в Visual Studio Code, чтобы запустить Azure Data Studio в режиме отладки с запущенным расширением.Select F5 in VS Code to launch Azure Data Studio in debug mode with the extension running. Затем в Azure Data Studio выполните команду Запуск мастера из палитры команд (CTRL+SHIFT+P) в новом окне.Then, in Azure Data Studio, run the Launch Wizard command from the Command Palette (Ctr+Shift+P) in the new window. Запустится мастер по умолчанию, с которым связан вклад этого расширения:This will launch the default wizard that this extension contributes:

Шаблон мастера

Далее мы рассмотрим, как изменить этот мастер по умолчанию.Next, we will look at how to modify this default wizard.

Разработка мастераDevelop the wizard

Разработку расширения нужно начать с самых важных файлов — package.json, src/main.ts и vsc-extension-quickstart.md:The most important files to get started with extension development are package.json, src/main.ts, and vsc-extension-quickstart.md:

  • package.json: это файл манифеста, в котором зарегистрирована команда Запуск мастера.package.json: This is the manifest file, where the Launch Wizard command is registered. Кроме того, здесь main.ts объявляется основной точкой входа в программу.This is also where main.ts is declared the main program entry point.
  • main.ts: содержит код для добавления элементов пользовательского интерфейса в мастер, например страницы, текст и кнопки.main.ts: Contains the code to add UI elements to the Wizard, like pages, text, and buttons
  • vsc-extension-quickstart.md: содержит техническую документацию, на которую можно опираться при разработке.vsc-extension-quickstart.md: Contains technical documentation that may be a helpful reference when developing

Внесем изменения и добавим четвертую, пустую страницу.Let's make a change to the wizard: we'll add a 4th, blank page. Измените src/main.ts, как показано ниже, и при запуске мастера должна отобразиться дополнительная страница.Modify src/main.ts as shown below, and you should see an additional page show up when you launch the wizard.

Основная страница мастера Познакомившись с шаблоном, попробуйте поэкспериментировать:Once you are familiar with the template, here are some additional ideas to try:

  • Добавьте кнопку шириной 300 на новую страницу.Add a button with a width of 300 to your new page
  • Добавьте гибкий компонент, в котором можно разместить кнопку.Add a flex component to put your button in
  • Добавьте действие для кнопки.Add an action to your button. Например, при нажатии кнопки открывается диалоговое окно открытия файла или редактор запросов.For example, when the button is clicked, launch a file-opening dialog or open a query editor.

Упаковка расширенияPackage your extension

Чтобы предоставить общий доступ другим пользователям, нужно упаковать расширение в один файл.To share with others you need to package the extension into a single file. Его можно опубликовать в магазине расширений Azure Data Studio или предоставить для общего доступа другим участникам команды или сообщества.This can be published to the Azure Data Studio extension marketplace, or shared among your team or community. Для этого нужно установить другой пакет npm из командной строки.To do this, you need to install another npm package from the command line:

npm install -g vsce`

Измените README.md по желанию, перейдите к базовому каталогу расширения и выполните команду vsce package.Edit the README.md to your liking, then navigate to the base directory of the extension, and run vsce package. При необходимости можно связать репозиторий с расширением или продолжить работу без него.You can optionally link a repository with your extension or continue without one. Чтобы добавить его, добавьте аналогичную строку в файл package.json.To add one, add a similar line to your package.json file.

"repository": {
    "type": "git",
    "url": "https://github.com/anjalia/my-test-extension.git"
}

После добавления этих строк создается файл my-test-extension-0.0.1.vsix, готовый для установки в Azure Data Studio.After these lines were added, a my-test-extension-0.0.1.vsix file was created and ready to install in Azure Data Studio.

Установка VSIX

Публикация расширения в MarketplacePublish your extension to the marketplace

Магазин расширений Azure Data Studio пока реализован не полностью, но текущая процедура заключается в размещении VSIX расширения где-либо (например, на странице выпуска GitHub) и последующей отправке запроса на вытягивание для обновления этого JSON-файла с использованием сведений о расширении.The Azure Data Studio extension marketplace is not totally implemented yet, but the current process is to host the extension VSIX somewhere (for example, a GitHub Release page) then submit a PR updating this JSON file with your extension info.

Дальнейшие действияNext steps

В этом руководстве вы узнали, как выполнять следующие задачи:In this tutorial, you learned how to:

  • Установка генератора расширенийInstall the extension generator
  • Создание расширенияCreate your extension
  • Добавление настраиваемого мастера в расширениеAdd a custom wizard to your extension
  • Тестирование расширенияTest your extension
  • Упаковка расширенияPackage your extension
  • Публикация расширения в MarketplacePublish your extension to the marketplace

Мы надеемся, что после ознакомления с этим материалом вы захотите создать собственное расширение для Azure Data Studio.We hope after reading this you'll be inspired to build your own extension for Azure Data Studio. Мы обеспечиваем поддержку Dashboard Insights (симпатичное графическое решение, предназначенное для SQL Server), нескольких SQL-ориентированных API, а также обширного набора точек расширений, унаследованных от Visual Studio Code.We have support for Dashboard Insights (pretty graphs that run against your SQL Server), a number of SQL-specific APIs, and a huge existing set of extension points inherited from Visual Studio Code.

Если у вас появилась идея, но вы не знаете, с чего начать, откройте вопрос или отправьте твит нашей команде: azuredatastudio.If you have an idea but are not sure how to get started, please open an issue or tweet at the team: azuredatastudio.

Вы всегда можете обратиться к руководству по расширениям Visual Studio Code, так как оно охватывает все существующие API и шаблоны.You can always refer to the Visual Studio Code extension guide because it covers all the existing APIs and patterns.

Чтобы узнать, как работать с T-SQL в Azure Data Studio, изучите руководство по редактору T-SQL:To learn how to work with T-SQL in Azure Data Studio, complete the T-SQL Editor tutorial: