如何优化SparkSQL的monaco-editor语言服务

我们是袋鼠云数栈UED团队，致力于打造一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。

本文作者：修能

这是一段平平无奇的 SQL 语法

如果把这段代码放到 monaco-editor(@0.49.0) 中，一切也显得非常普通。

效果如下：

接下来我们通过 monaco-editor 提供的一些 Language Services 来针对 SparkSQL 的语言进行优化。

本文旨在提供相关思路以及 Demo，不可将相关代码用于生产环境

高亮

不知道各位有没有疑惑，为什么 monaco-editor 的高亮和 VSCode 的高亮不太一样？
为什么使用 Monarch 而不是 textmate 的原因？

折叠

通过 registerFoldingRangeProvider 可以自定义实现一些折叠代码块的逻辑

PS：如果不设置的话，monaco-editor 会根据缩进注册默认的折叠块逻辑

补全

通过 registerCompletionItEMProvider 可以实现自定义补全代码

悬浮提示

通过 registerHoverProvider 实现悬浮后提示相关信息

内嵌提示

通过 registerInlayHintsProvider 可以实现插入提示代码

跳转定义/引用

跳转定义/引用是一对相辅相成的API。如果实现了跳转定义而不实现跳转引用，会让用户感到困惑。这里我们分别 registerDefinitionProvider 和 registerReferenceProvider 两个API 实现跳转定义和跳转引用。

CodeAction

可以基于 CodeAction 实现如快速修复等功能。PS：需要配合 Markers 一起才能显示其效果

instance.onDidChangeModelContent(() => {
  setModelMarkers(instance.getModel());
});

超链接

众所周知，在 monaco-editor 中，如果一段文本能匹配 http(s?): 的话，会自动加上超链接的标识。而通过 registerLinkProvider 这个 API，我们可以自定义一些文案进行超链接的跳跃。

格式化

通过 registerDocumentFormattingEditProvider API 可以实现文档格式化的功能。

其他

除了上述提到的这些 Language Services 的功能以外，还有很多其他的语言服务功能可以实现。这里只是抛砖引玉来提到一些 API，还有一些API 可以关注 monaco-editor 的官方文档 API。

最后

欢迎关注【袋鼠云数栈UED团队】~袋鼠云数栈UED团队持续为广大开发者分享技术成果，相继参与开源了欢迎 star

• 大数据分布式任务调度系统——Taier
• 轻量级的 Web IDE UI 框架——Molecule
• 针对大数据领域的 SQL Parser 项目——dt-sql-parser
• 袋鼠云数栈前端团队代码评审工程实践文档——code-review-practices
• 一个速度更快、配置更灵活、使用更简单的模块打包器——ko
• 一个针对 antd 的组件测试工具库——ant-design-testing