Walt You - 知行合一

Spark Sql 在线编辑器


工作中 Spark Sql 占了不小的比重,为了提高开发效率,就想搞个在线编辑器,期待有语法高亮、语法检测、自动提示等功能。技术栈主要包含 CodeMirror 以及 Spark Catalyst。



技术栈

1. JavaScript

没啥好说的,基础知识。入门可以到 这里 学习。

2. Vue

这个也是很火的一个前端框架。可以到官网进行了解。

3. CodeMirror

是一个非常流行的前端编辑器框架。自带了很多有用的功能,也支持自定义语言的拓展。

github上有个现有的项目可以和vue结合起来使用,叫做 vue-codemirror

4. ANTLR4

是个非常有用的工具,可以使用语法文件(g4文件)定义语法,然后将语法文件生成对应的词法、语法解析器,以便其他语言调用。封装了复杂难懂的语法树生成过程,便于使用。详细信息到官网了解。

重点介绍

1. CodeMirror的使用

1)注册新的语言类型

语言类型在 CodeMirror 称为 Mode。

CodeMirror 使用以下代码来定义一个语言类型:

CodeMirror.defineMode(languageModeName, function(config, parserConfig) {.....})

具体例子可以参考 CodeMirror 的source code.

定义了新的mode后,就可以定义语言的子模块(MIME):

CodeMirror.defineMIME(specificLanguageModeName, config)

源码参考这里

2)定义语法高亮

语法高亮(Syntax Highlighting)是在定义语言的时候实现的。可以设置 “keywords” 和 “builtins”的值, CodeMirror 会把它们自动注色。

3)自定补全

自定补全(auto-complete)在 CodeMirror 被叫做 “hint”。

CodeMirror.registerHelper("hint", languageModeName, function(editor, options) {....})

当编辑器具有每个更改事件时,将调用此提示函数。 并且此提示函数接受 “editor” 和 “options” 作为两个参数,并返回带有选择列表和提示位置的对象(默认为光标位置)。

已经有多种语言的实现,我们可以阅读它们以了解如何实现此功能。

4)语法检测和错误显示

语法检查和显示错误功能在CodeMirror中称为“ lint”。

CodeMirror.registerHelper("lint", languageModeName, function(text) {.....})

当编辑器发生更改事件时,将调用该lint函数。这个lint函数接受编辑器的文本作为一个参数,并返回一个错误列表,每个错误都有错误消息,错误消息的位置和严重性。

具体实现可以参考这里

2. ANTLR4 的使用

1)ANTLR4 IDEA plugin

首先需要添加ANTLR4 IDEA插件。 这个插件可以帮助我们更轻松地编写g4。这里直接沿用 Spark Sql 自带的语法文件:Spark-Catalyst

如果要实现自己的语法文件,可以参考这里

2)从 g4 文件中生成 JS parser

因为我们想将ANTLR4与vue一起使用,所以我们需要将covent g4文件转换为JS文件。 我们可以使用npm软件包antlr4-tool代替将ANTLR4安装为软件。

3)与 CodeMirror结合

这个不废话,直接上代码 sparksql-lint.js

总结

项目地址:spark-sql-online-editor 。如有问题,欢迎issue。


Similar Posts

Content