创建 Azure Data Studio 向导扩展

本教程演示如何创建新的 Azure Data Studio 向导扩展。 该扩展提供了一个向导,用于与 Azure Data Studio 中的用户进行交互。

本文介绍如何执行以下操作:

  • 安装扩展生成器
  • 创建扩展
  • 向扩展添加自定义向导
  • 测试扩展
  • 打包扩展
  • 将扩展发布到市场

先决条件

Azure Data Studio 建立在与 Visual Studio Code 相同的框架上,因此 Azure Data Studio 的扩展是使用 Visual Studio Code 生成的。 要开始操作,需满足以下条件:

  • 已在 $PATH 中安装 Node.js 且可用。 Node.js 包含 npm,它是用于安装扩展生成器的 Node.js 包管理器。
  • 已有 Visual Studio Code,用于调试扩展。
  • 有 Azure Data Studio 调试扩展(可选)。 可使用它测试扩展,且无需将扩展打包并安装到 Azure Data Studio 中。
  • 确保 azuredatastudio 位于你的路径中。 对于 Windows,请确保选择 setup.exe 中的 Add to Path 选项。 对于 Mac 或 Linux,请从 Azure Data Studio 的命令面板运行“在 PATH 中安装 'azuredatastudio' 命令”。

安装扩展生成器

为了简化创建扩展的过程,已使用 Yeoman 构建了一个扩展生成器。 要安装它,请从命令提示符处运行以下命令:

npm install -g yo generator-azuredatastudio

创建向导扩展

向导简介

向导是一种用户界面类型,它提供了用户完成任务需要填写的分步页面。 常见示例包括软件安装向导和故障排除向导。 例如:

Dacpac 向导

由于在处理数据和扩展 Azure Data Studio 的功能时,向导通常非常有用,因此 Azure Data Studio 提供了 API 供你创建自己的自定义向导。 我们将逐步介绍如何生成向导模板,并对其进行修改以创建自己的自定义向导。

运行扩展生成器

创建一个扩展:

  1. 用以下命令启动扩展生成器:

    yo azuredatastudio

  2. 从扩展类型列表中选择“新建向导或对话框”。 然后依次选择“向导”、“入门模板”

  3. 按步骤填写扩展名称(对于本教程,请使用“我的测试扩展”),并添加描述。

    扩展生成器

完成前面的步骤后,系统会创建一个新文件夹。 在 Visual Studio Code 中打开该文件夹,然后便可创建自己的向导扩展了!

运行扩展

让我们通过运行扩展来了解向导模板为我们提供的内容。 在运行之前,请确保 Visual Studio Code 中安装了 Azure Data Studio 调试扩展。

在 VS Code 中选择 F5,在调试模式下启动 Azure Data Studio 并运行扩展。 然后,在 Azure Data Studio 中,通过新窗口中的命令面板 (Ctr+Shift+P) 运行“启动向导”命令。 这将启动此扩展提供的默认向导:

向导模板

接下来,我们将介绍如何修改此默认向导。

开发向导

用于扩展开发入门最重要的文件包括 package.jsonsrc/main.tsvsc-extension-quickstart.md

  • package.json:这是清单文件,其中注册了“启动向导”命令。 此外,还在此文件中将 main.ts 声明为主程序的入口点。
  • main.ts:包含用于将 UI 元素(例如页面、文本和按钮)添加到向导的代码
  • vsc-extension-quickstart.md:包含在开发时可能是有用参考的技术文档

让我们对向导进行更改:我们将添加第四个空白页面。 按如下所示修改 src/main.ts,在启动向导时,你将看到其他页面。

向导主页面 熟悉模板之后,可以尝试以下一些其他建议:

  • 将一个宽度为 300 的按钮添加到新页面
  • 添加一个用于放置按钮的弹性布局组件
  • 向按钮添加一项操作。 例如,单击按钮后,启动“打开文件”对话框或打开查询编辑器。

打包扩展

要与他人共享,需要将扩展集中打包到一个文件中。 这样可发布到 Azure Data Studio 扩展市场,或在团队或社区之间共享。 为此,需要从命令行安装另一个 npm 包:

npm install -g vsce

根据自己喜好编辑 README.md,然后导航到扩展的基目录,并运行 vsce package。 你可以选择将存储库链接到扩展,也可以选择不链接存储库并继续操作。 若要添加存储库,请在 package.json 文件中添加类似的行。

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

添加这些行之后,系统将创建一个 my-test-extension-0.0.1.vsix 文件,你可以直接在 Azure Data Studio 中安装该文件。

安装 VSIX

将扩展发布到市场

Azure Data Studio 扩展市场尚未完全实现,但当前需要在某处托管扩展 VSIX(例如,GitHub 发布页面),然后提交 PR,请求使用扩展信息更新此 JSON 文件

后续步骤

在本教程中,你了解了如何执行以下操作:

  • 安装扩展生成器
  • 创建扩展
  • 向扩展添加自定义向导
  • 测试扩展
  • 打包扩展
  • 将扩展发布到市场

希望本教程能为你提供灵感,构建自己的 Azure Data Studio 扩展。 我们提供仪表板见解支持(针对 SQL Server 运行的很棒的图表)、一些特定于 SQL 的 API,以及从 Visual Studio Code 继承的大量现有扩展点。

如果有想法但不确定如何着手,请在团队 azuredatastudio 处提出问题或发送推文。

可持续参考 Visual Studio Code 扩展指南,因为它涵盖了所有现有 API 和模式。

若要了解如何在 Azure Data Studio 中使用 T-SQL,请完成 T-SQL 编辑器教程: