智能 IDE 系列 -- SQL编辑器

豆皮粉儿们，咱们又见面啦！明天咱们来自字节跳动的“虫二”和“「锕」”二位同学带来了智能IDE系列文章的第一篇 —— SQL编辑器。豆皮粉儿们，连忙来丰盛本人的常识吧！

作者们：虫二 &「锕」
起源：原创

前言

IDE 自身是个集很多简单性能在一起的利用，当你想开发一个IDE的时候，你至多须要关注

代码编辑器层（这部分在本文中我称为Editor层）：语法高亮、智能提醒&补全、语法诊断、文档悬浮、格式化...
工作目录（Workspace）
扩大层（Extension）
运行调试层（Debug）
环境配置（Environment）
上线部署层（Publish），如果你正在做一个Cloud IDE, 这一层就是一个必备的能力，如何让用户在Web端即可实现“编辑-调试-部署”一条线，并且保障调试阶段的环境配置和部署阶段雷同。
版本治理（Version）

本文次要介绍的只是以上冰山一角中的Editor层的内容，通过本文心愿给正在进行相干学习的同学有些许启发，本文中每个过程不会具体解释背地技术实现原理，背地原理将在后续文章进行介绍。
如果你正好在做一个SQL Editor, 本文能够作为一个不错的参考。

本文的实用对象：

你正在实现一个本人独有的Editor, 须要让Editor能实现上述1的能力，这个Editor 我认为能够是传统意义上的输出模式的Editor, 也能够是针对很多表单项填写or下拉抉择的Editor，甚至于还能够是GUI 页面编辑器，其实咱们只须要将语法高亮、智能提醒这些在概念上做一个转换。
在你的利用（未必是IDE）中须要为用户提供代码编辑的能力
你正在应用一门DSL(畛域专用语言)语言来简化开发的语言, 须要高亮、提醒特有的语法
自研一个IDE or Cloud IDE

从零开始

抛开目前已有的Editor组件，用原生html来实现高亮
例如，以Monaco 的一个例子开展看原生如何实现
这是一段日志内容高亮规定是日期：绿色、notice: 黄色、error: 红色、info: 灰色

语法高亮要害的步骤是词法剖析, 分词的目标是将用户输出字符串宰割成一个个的词 (token), token 就是不可再进一步宰割的一串字符，剖析过程须要扫描源代码, 扫描的办法有间接扫描和正则表达式扫描[1];
用于做剖析的函数称为词法分析器
下面的案例，用正则简略粗犷实现如下，不具备任何参考意义，如果想实现简单的分词，你应该寻找相似 flex or ANTLR这样的工具:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Highlight</title>  <style>    .custom-info { color: #808080 }    .custom-error { color: #ff0000; font-style: bold; }    .custom-notice { color: #FFA500; }    .custom-date { color: #008800; }  </style></head><body>  <div id="log-editor">  </div>  <script>    const tokenizer = {      root: [        [/\[error.*/, "custom-error"],        [/\[notice.*/, "custom-notice"],        [/\[info.*/, "custom-info"],        [/\[[a-zA-Z 0-9:]+\]/, "custom-date"],      ]    }    const highlight = (str) => {      return tokenizer.root.reduce((pre, current) => {        return pre.replace(current[0], (m) => {          return `<span class="${current[1]}">${m}</span>`        });      }, str);    };    const log = `[Sun Mar 7 16:02:00 2004] [notice] Apache/1.3.29 (Unix) configured -- resuming normal operations[Sun Mar 7 16:02:00 2004] [info] Server built: Feb 27 2004 13:56:37[Sun Mar 7 16:02:00 2004] [notice] Accept mutex: sysvsem (Default: sysvsem)[Sun Mar 7 16:05:49 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed[Sun Mar 7 21:16:17 2004] [error] [client xx.xx.xx.xx] File does not exist: /home/httpd/twiki/view/Main/WebHome[Sun Mar 7 21:20:14 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed`    const innerHtml = log.split('\n').reduce((pre, current) => {      return pre + `<div class="line">${highlight(current)}</div>`;    }, '')    window.addEventListener('DOMContentLoaded', () => {      const wrapper = document.querySelector('#log-editor')      wrapper.innerHTML = innerHtml;    })  </script></body></html>

粗犷的用一个textarea 伪代码实现简略的智能提醒
例如，还是以Monaco 的一个例子开展

  <script>    const suggestion = [      {        label: '"lodash"',        documentation: "The Lodash library exported as Node.js modules.",        insertText: '"lodash": "*"',        range: range      },      {        label: '"express"',        documentation: "Fast, unopinionated, minimalist web framework",        insertText: '"express": "*"',        range: range      }    ];    const getSuggestion = (value) => {      // TODO 这里 这个具体过程详见文章底部 SQL Language Server 智能提醒的过程解析      const result = parser(value)      return result;    }      window.addEventListener('DOMContentLoaded', () => {      const wrapper = document.querySelector('#editor texteara')      wrapper.addEventListener('change', (event) => {        // 依据以后鼠标所在的地位计算出        const position = {lineNumbers: 1, columns};        const value = event.target.value;        const suggestion = getSuggestion(value, position);        // 创立DOM List框到输出的地位      })    })  </script>

开源Editor是如何做的

Editor反对高亮须要两个过程

依据语法将文本解析成符号和作用域
依据生成的作用域映射到对应的色彩和款式

Editor容许你本人register一个语言id, 你须要依据token格局，编写本人的rules最终实现高亮。

然而，少数的Javascript Editor在反对智能提醒上却不尽人意。

CodeMirror & Ace 须要监听change 事件来解决

  editor.on('change', changeListener);

Monaco Editor在这方面做的比拟前沿，容许你应用应用register provider 来注册语言个性，并且解决好了返回值的UI显示，对于使用者，不须要再独自定义UI。
例如
setMonarchTokensProvider 注册一个语言，详情
registerCompletionItemProvider 注册智能提醒、
registerHoverProvider注册悬浮文档，当你解决语法解析时候，如果你不必上面的形式则须要用js 来实现一套语言的解析

LSP的诞生

从下面能够看出即便是应用同一种语言(这里我都用的javascript), 只是Editor不同而已, 实现智能提醒也是须要针对独自的Editor去实现, 实际上不同语言的IDE更是须要为每个IDE都实现一遍 JavaScript 语言的智能提醒。

如何为不同的IDE，提供一套通用的语言服务?
例如: Javascript 语言的server只须要有一套即可让多个IDE去应用, 这里就必须要举荐下VScode 的LSP协定(想快读的能够浏览之前写的一篇学习文章)[2], 这个协定规定了IDE和语言server之间应用标准中定义的参数格局进行通信, 协定底层交互是JSON-PRC(无状态的近程过程调用协定)，在 IDE 的Client端和Server端通信的模式能够是socket, 也能够是HTTP，甚至能够是stdio。

Editor 如何与LS交互

上面以SQL 语言为案例，阐明编辑器和 SQL Language Server之间如何交互
这里我在Client和Server端建设了一个Web Socket 连贯

初始化: Editor关上之前 Client 会向 Server发送initialize初始化音讯, 音讯中params.capabilities 规定了Client端反对的能力, 比方补全

此时Server 端在承受到初始化申请后，须要发送以后语言反对的能力, 例如语言反对 documentFormattingProvider(格式化)、hoverProvider(文档悬浮)、definitionProvider(跳转定义)、completionProvider(补全) 、codeActionProvider;
如果语言不反对格式化, 就不在capabilities中返回documentFormattingProvider，client就不会显示格式化的菜单。

关上事件: Editor关上后 Client 会向Server发送textDocument/didOpen音讯, 音讯体如下, 会标记以后语言、源代码、uri(能够是个文件地址，也能够是个虚构的地址，具体视Server的实现而定)
change事件: 用户输出代码时，Client 会向Server发送textDocument/didChange音讯, 服务端决定是否解决这个音讯, 同样相似open的动作，这个案例中服务端会在输出过程中诊断语法错误，response和open 返回雷同
Server 也能够被动向 Client 推送事件，我这里的案例是服务端会被动发送diagnostics事件，在关上或change后发送语法诊断的后果, 诊断返回的内容是谬误的文字所在位置，和谬误提醒，如下range 是起始和完结地位, message是音讯内容
补全事件: 在输出的过程中Client 也会向Server发送textDocument/completion音讯

Server承受音讯后会发送须要补全的内容，Server在外部做一系列的剖析后给出须要补全内容
比方针对用户输出的 select * from a Server须要补全库名, 当用户输出select * from aaa. 时须要补全aaa库上面的表
这里看到 Server 响应的内容中有的会 id 字段, 该id就是Client 发送的id, Server通过此来标记响应哪个事件，Client会依据此解决对应申请的事件起因是有些行为会多很短时间内屡次触发, Client能够独自勾销某次事件
也会有写申请体和响应体中没有id的状况, 那会通过method 决定事件类型
Hover文档: 鼠标悬浮单词时Client会向Server发送textDocument/hover事件, Server 依据Client发送的以后鼠标的地位计算出以后单词在形象语法树的地位，返回对应文档

Language Server 智能提醒

Language Server 须要做的，是实现 LSP 定义的性能的一个子集。这里以最为外围的智能提醒为例，其须要做的事件有两步

第一步当你和Editor正在交互的时候，这个时候对于Editor就是内容在change 的过程，Server 须要保护这个正在change的代码“文件”，以便在须要智能提醒的时候应用。这里的实现，如果 LS 和 Editor 在同一台电脑上，大可肆意应用文件系统；如果他们拆散，就须要依据change事件中的 uri 和内容来更新，并刷新到 LS 的存储中；依据 LS 申明的 capacity，每次change事件能够传递全量或增量的内容。
第二步当Editor意识到此处须要一个智能提醒（LS 会申明一个 triggerCharacter 使 Editor 通晓在哪些字符后须要智能提醒），会发送 completion 事件到 LS，其中蕴含以后光标所在的地位（比方VScode 提供的地位就是lineNumbers 行, column 列都是从1开始）。由这个地位和第一步所存储代码的内容LS会进行一系列的语法分析，返回所有能够提醒进去的内容，给用户展示进去，正如在下面GIF图中你看到的下拉列表的内容框。

这个过程最要害的点在第二步，如何依据一段代码和其中的一个地位给出一系列智能提醒。当然很多语言有现成的主动补全轮子，比方 Python 的 jedi。这里以 SQL 为例：简略来说，咱们须要对一串 SQL 做词法剖析和语法分析，以了解接下来能够写的代码是什么。这里的词法剖析和语法分析，其实正是编译原理里编译器的“前端”的前半部分：词法剖析是将代码切分成一个个词(Token)，语法分析是对 Token 序列进行一系列定义的计算，以构建特定的数据结构。个别编译器进行语法分析后失去的产物是一颗形象语法树(AST)，并基于此持续进行语义剖析并优化。一个规范SQL的AST树如下构造:

不过要实现一个智能提醒，光有 AST 是不够的。首先咱们须要可能反对解析正在编辑中的 SQL 代码，其次咱们要将解析 SQL 的后果转换为智能提醒后果。也就是说，咱们须要定义具体到编辑时的语法规定，并定义语法解析时的行为使其产物携带更多对补全有用的信息。例如，咱们用|代表光标，并有如下的 SQL 期待补全

SELECT | FROM some_table;

咱们晓得，失常来说这里须要补全*或者是some_table表下的字段，当然也可能是函数，或者是DISTINCT。所以在解析下面这段 SQL(留神这里是带着光标去解析的)后咱们想要一个这样的数据结构

{    "AST": {...},    "keywords": ["*", "DISTINCT"],    "columns": true,    "functions": true,    "source": {        "table": "some_table"    }}

这样咱们能够通过其中的属性来得出咱们提醒的列表，具体的操作如下

keywords列表中的内容全副进入提醒的列表中
functions字段为true，咱们将已知的函数列表全都塞进提醒的列表中
columns字段为true，联合source字段得悉咱们须要拉取some_table表的所有字段，并放入提醒的列表

当然这只是一个示例，能够按需减少解析后果中的内容，比拟典型的有提醒的优先级等。而具体如何将这些规定们变成一个可用的词法+语法分析器，其实因为编译器前端的倒退曾经很成熟了，有很多工具(parser generator)能够实现这项工作，而不须要咱们对着规定手写代码逻辑，例如antlr、bison/yacc & lex 等。

对于这部分举荐浏览参考文档[1]

总结

实现一套语言的智能化，Server层你须要实现一个Language Server，这个Server能够用任何编程语言来写，vscode 提供一个合乎LSP标准的包供开发者应用 vscode-languageserver [3]；
如果你正在为js开发者提供一个语言服务，能够参考typescript-language-server [4]；

Editor层，如果你用的是Monaco Editor 你能够在monaco-languageclient [5]的根底上来革新你想要的语言能力；
如果你用的是CodeMirror或者Ace能够参考lsp-editor-adapter [6];

参考文档

[1]词法剖析
[2]LSP协定
[3]vscode-languageserver
[4]typescript-language-server
[5]monaco-languageclient
[6]lsp-editor-adapter

关于ide:智能-IDE-系列-SQL编辑器