赋能精简：CodeMirror 自定义关键词增强智能编码体验

2023-11-19 14:41:20

深入剖析 CodeMirror 源码

为了实现自定义关键词，我们需要深入 CodeMirror 的源码，找到关键词提示相关的代码。在源码中，最开始定义了三个变量：tables、defaultTable 和 keywords。其中，tables 是可以直接在 options 配置的 hintOptions 属性设置的。如果我们需要自动提示表名和列名，只需要在 tables 变量中添加相应的字符串即可。

var tables = options.hintOptions.tables || [];

defaultTable 变量用于指定默认的表名，如果在 SQL 查询语句中没有显式指定表名，则会使用 defaultTable 作为表名。

var defaultTable = options.hintOptions.defaultTable || null;

keywords 变量则用于指定自动提示的关键词列表。我们可以通过修改 keywords 变量来实现自定义关键词。

var keywords = options.hintOptions.keywords || {};

自定义关键词的具体实现

现在，我们已经知道了如何找到关键词提示相关的代码，接下来就可以着手自定义关键词了。首先，我们需要在 keywords 变量中添加自定义的关键词。我们可以通过以下方式来实现：

CodeMirror.defineOption("hintOptions", function(cm, val, old) {
  if (val && val.keywords) {
    cm.state.completionActive = keywords = val.keywords;
  }
});

在上面的代码中，我们首先定义了一个 hintOptions 选项，然后在该选项中添加了一个 keywords 属性。keywords 属性的值是一个对象，里面可以包含自定义的关键词。

添加了自定义关键词之后，我们还需要修改自动提示的逻辑，以支持自定义关键词。我们可以通过以下方式来实现：

CodeMirror.defineExtension("hint", function(cm, options) {
  // ...
  for (var i = 0; i < keywords.length; ++i) {
    var word = keywords[i];
    if (word.match(re)) {
      matches.push({
        text: word,
        displayText: word,
        className: "completionItem"
      });
    }
  }
  // ...
});