DAYU DLF应用SQL编辑器插件与业界主流SQL编辑器的对比

DAYU DLF应用SQL编辑器插件（CodeMirror ）与业界主流SQL编辑器（Ace/VSCode）的对比

一、三款编辑器简介

1.CodeMirror - 基于内嵌框架（ iframe ）的可编辑代码编辑器

CodeMirror是一个基于iframe的可编辑源代码编辑器组件 ，它允许你创建类似相对舒适的源代码编辑器接口(代码内容包括HTML、XHTML、XML、CSS、Python、PHP、c#、Java标记以及其它类似的语言）。

CodeMirror的特性 ：

1.      自动完成

2.      模式覆盖

3.      搜索/替换

4.      预览HTML编辑器

5.      自动调整编辑器大小

6.      设置断点

7.      法高亮显示

8.      主题化

9.      强调独立

10.  支持全屏幕编辑

11.  模式自动改变

Dayu DLF 应用中的CodeMirror ，如下图所示：

2.Ace - JavaScript编辑器

Ace是一个独立的JavaScript代码编辑器，拥有基于浏览器的代码编辑器相匹配的特性和扩展特性，还拥有目前常见的本地编辑器（如TextMate，Vim或Eclipse）的功能。 用户可以很容易把Ace编辑器嵌入进任何网页或JavaScript应用程序。

Ace JavaScript编辑器的特性：

1.      语法高亮显示

2.      自动缩进和凸排

3.      可选命令行

4.      大文档处理

5.      包含VI和Emacs模式的完全自定义关键字绑定

6.      主题化

3.VSCode编辑器

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux，运行流畅。

二、三款编辑器的主要思路

1. CodeMirror的主要思路

CodeMirror的主要思路是提供字节流，通过对给定字节流的读取返回token，提供的读取方法非常方便好用，状态数据可以自定义，在全局中使用。

2. Ace editor的主要思路

Ace editor的主要思路是生成状态机，从一个startstate开始，使用正则表达式匹配，返回token，然后next,next...这样返回token，其中用到push和pop这样的概念，以便于匹配多行注释。

基于以上思路，当我们在项目应用中要实现代码缩排处理，希望##开头的行及紧随此行并且缩进级别较高的行形成的段落辨认为注释时，这种情况下，CodeMirror 比Ace 更适合处理这方面的差议。

3. VSCode的主要思路

VSC 的编辑器界面依然是微软经典的 VS 风格，对于常接触的人来说会很亲切。在编程语言和语法上支持 C++, jade, PHP, Python, XML, Batch, F#, DockerFile, Coffee Script, Java, HandleBars, R, Objective-C, PowerShell, Luna, Visual Basic, Markdown, JavaScript, JSON, HTML, CSS, LESS, SASS, C#, TypeScript。

三、三款编辑器的引用方式

1. CodeMirror的引用

首先在页面中载入插件CSS及JS文件，同时加载你所需要使用的脚本JS及风格样式CSS文件。

2. Ace editor的引用

在整合了RequireJS的基础上，只需要引入一条JS即可搞的定。

CodeMirror需要引入大量的CSS和JS文件； Ace的引用就很简洁了，在这点上Ace做的比较好，

3. VSCode的引用

    1. 在页面中载入插件主CSS及JS文件。

    2. 根据项目需要加载所需要使用的脚本JS及风格样式CSS文件

四、三款编辑器的现状与用户

1. CodeMirror的现状与用户

1.1 CodeMirror是一款十分强大的代码编辑插件，提供了十分丰富的API，无论是调试还是文档方面CodeMirror 表现很非友好，目前Github就使用CodeMirror用于构建它的在线编辑器。
1.2 Github上CodeMirror/CodeMirror 14.5k 虽然在数量比Ace要差一些，但近期用户增长速度比Ace快。

2. Ace editor的现状与用户

2.1 Ace算是一个久经考验的老牌编辑器插件了，曾经有很多大公司都在用这个东西，现在有也很多公司要沿用， 比如：Github就使用 Ace用于构建它的在线编辑器（但现在改用CodeMirror）。
2.2 Github上ajaxorg/Ace 17.4k 主要是老牌编辑器，前期积累很了很多用户群。

CodeMirror 和 Ace两个功能都十分强大，基本上主流的编辑器功能都可以实现，并都可以很容易的扩展，增加功能或者增加支持的语言类型。
相对来说，CodeMirror的用户会多一些，生态环境相对健全，所以插件也相对完备，能想到的基本都有，同时也被很多线上应用在用， 另外Ace不支持autocomplete。

3. VSCode的现状与用户

1. Microsoft维护团队强大，VS Code每月更新一次，包含新功能和错误修复。
2.  43,462 提交量； 197个 代码分支； 117个 版本； 791个 贡献者。

五、目前DAYU项目中的CodeMirror

目前DPS项目已经应用了CodeMirror代码编辑器， CodeMirror调用非常方便和支持语法高亮的效果非常好，已经实现了大量作业脚本的代码编辑和保存工作， 基于CodeMirror和Ace编译标准和格式规范存在差异化。 已通过CodeMirror代码编辑器处理保存的作业脚本，无法高度兼容到Ace代码编辑器应用中。 若在DPS项目更换成Ace代码编辑器，将无法兼容原作业脚本代码。

六、个人分析的总结

CodeMirror 和 Ace/VSCode 都是开源在线编辑器中的佼佼者，在 Github上的星数也都不相上下，不过据我至今的观测来看，无论是调试还是文档方面，CodeMirror都比 Ace更加友好得多。个人认为Ace功能很强大，但其文档真是不太好看，而且这个编辑器调式也不太好使用。相对而言，CodeMirror做得就很好，遇到问题，也容易调试； 估计基于这些方面，就会大概明白目前 Github为何会选用 CodeMirror而不是 Ace来用于构建其在线编辑器了。vscode在支持语言和语法上更丰富更友好，vscode更是一款很好的IDE工具，适合码农们的开发习惯。