在应用中集成 Monaco 编辑器与 Kusto 查询语言支持

可以在应用中集成Monaco 编辑器与 Kusto 查询语言支持 (monaco-kusto)。 将 monaco-kusto 集成到应用中可以提供编辑体验,例如完成、着色、重构、重命名和“转到定义”。 它要求你针对身份验证、查询执行、结果显示和架构探索来构建解决方案。 它为你提供了充分的灵活性,以打造适合你的需求的用户体验。

本文介绍如何将 monaco-kusto 添加到 Monaco 编辑器并将其集成到应用中。 该包已在 GitHub 和 npm 上提供。

按照以下步骤使用 npm 将 monaco-kusto 集成到应用中。

第 1 步:安装 monaco-kusto ​​包

第 2 步:将应用设置为使用 monaco-kusto 包

第 3 步:将数据库架构添加到编辑器

尝试与我们的示例项目集成!

先决条件

  • Node.js(v6.10.3 或更高版本)

安装 monaco-kusto ​​包

  1. 安装 Monaco 编辑器 npm ​​包:

    npm i monaco-editor
    

    注意

    若要自定义本机 Monaco 编辑器,请参阅 Monaco 编辑器 GitHub 存储库

  2. 安装 monaco-kusto npm ​​包:

    npm i @kusto/monaco-kusto
    

将应用设置为使用 monaco-kusto 包

可以使用以下方法之一将应用设置为使用 monaco-kusto:

  1. 将以下 HTML 添加到使用 Monaco 编辑器的页面,例如 index.html 文件。 它们是必需的,因为该包对 kusto-language-service 存在依赖关系。

    <script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/bridge.min.js"></script>
    <script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/kusto.javascript.client.min.js"></script>
    <script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/newtonsoft.json.min.js"></script>
    <script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/Kusto.Language.Bridge.min.js"></script>
    
  2. 将 monaco 和 monaco-kusto 包中的静态文件复制到 Web 服务器上的 monaco-editor 文件夹中。 你的应用将需要访问这些静态文件。

  3. 使用 monaco 来加载它们。 有关示例,请参阅示例

将数据库架构添加到编辑器

monaco-kusto 包提供了一种将数据库架构添加到编辑器的方法。 该架构使编辑器能够提供自动完成建议和其他功能。

使用以下结构可定义架构:

const schema = {... <YOUR_DATABASE_SCHEMA> ...};

export function setSchema(editor) {
  window.monaco.languages.kusto.getKustoWorker().then((workerAccessor) => {
    const model = editor.getModel();
    workerAccessor(model.uri).then((worker) => {
      //EITHER: Set schema from a show schema command
      // worker.setSchemaFromShowSchema(
      //     schema,
      //     clusterURI,
      //     database
      // );
      //OR: Set schema from a manually created schema
      // worker.setSchema(schema);
    });
  });
}

可以使用以下方法之一获取数据库架构:

  1. 在 Azure 数据资源管理器 Web UI 的左侧菜单中,选择“查询”。

  2. 选择要为其创建架构的数据库。

  3. 在查询窗口中,运行以下查询:

    .show schema as json
    
  4. 复制查询结果并将其粘贴为 schema 常量。 查询的结果是数据库列表(请参阅 schema.ts 文件中的接口 Result)。

  5. 使用 setSchemaFromShowSchema() 方法在编辑器中设置架构。 还必须指定要在编辑器中使用的群集 URI 和数据库的名称。

示例项目

可以找到使用 monaco-kusto 包的示例项目。 若要使用示例,请克隆 monaco-kusto GitHub 存储库。 示例位于 samples/react 文件夹中。

设置并测试示例项目

从克隆的存储库的根目录运行以下命令:

  1. 安装依赖项并生成项目:

    npm install
    
  2. 验证项目是否正常工作。 如果成功,index.html 将打开。

    npm run watch