添加到 ace-editor 明智的自动完成功能：列出用户定义的函数和变量（javascript 语言）

Posted 2023-05-07

【中文标题】添加到 ace-editor 明智的自动完成功能：列出用户定义的函数和变量（javascript 语言）

【英文标题】：Adding to ace-editor wise autocomplete: List user-defined functions and variables (javascript language)

【发布时间】：2015-09-09 18:43:05

【问题描述】：

我想将用户定义的函数和变量列表添加到 ace 编辑器的自动完成功能。 为此，我想检查用户插入到文档中的所有代码，查找已定义的函数（及其参数）、已定义的变量及其作用域等。

主要问题

这些数据是否已经在 ace 源代码（或语言插件）的某个地方计算出来了，我可以通过某种方式获取它吗？`

我想要什么

例如，如果用户插入这样的代码：

var var0 = 'abcd';

function foo(var1, var2)
  var var3 = 'efg';

我想在自动完成框中添加一个名为“foo”的函数，它有两个参数 - var1 和 var2。我还想将 var0 添加到变量列表中，并在用户写入它定义的范围（在函数中）时添加 var3。

我已经知道的：

我知道如何启用自动完成和实时自动完成。 我知道怎么add new completer 我知道内置的 Basic 自动补全会不加选择地添加文档中的所有单词 我知道ace-tern plugin，但我想我不想使用它。现在它仍然是 hackish，没有文档，我不知道如何启用它。 我知道

Ace 已经拥有一些我需要的数据

。例如，当已经在同一范围内定义的变量被重新定义时，它会发出警告。所以它有变量列表及其范围。我猜它正在使用 jshint - 但是有没有办法从那里获取它？ 我阅读了ace documation 并找到了很多有用的方法来提取数据，如果必须的话。问题是我是否真的需要自己做。

【问题讨论】：

您读到了吗：github.com/ajaxorg/ace/wiki/… 我还建议您查看问题并拉取请求（打开/关闭）

github.com/ajaxorg/ace/pulls 例如：github.com/ajaxorg/ace/pull/2213

是的，我阅读了 wiki 页面，并在 github issues/PR 中搜索。谢谢。

【参考方案1】：

更新：我在回答中暗示了这一点，但要澄清一下 - Tern 将完全按照您在 我想要什么 中的要求做。下面的片段解决了另一个问题，即提供一些您甚至不希望用户在编辑器中看到的上下文。在Ace.Tern live demo查看您使用的代码的屏幕截图

这是自选的，但在 ace 中添加自动完成的最佳选择是 Tern。

Tern 接受 typedef 配置选项（此处描述：http://ternjs.net/doc/manual.html#typedef），但更有趣的是，它将接受您自定义的 js 对象作为子对象，即：

var myContext = 
   name: 'myContext',
   obj: obj

obj 是你的 js 对象。然后在 Tern 配置中，您将其用作：

defs: ['underscore', myContext]

这将使用您的自定义对象和下划线模块进行自动完成。

与 Tern 相关的 ace.js 配置：（有关配置选项的 cmets，请参阅 https://github.com/sevin7676/Ace.Tern/blob/master/demo.html）

  var myContext =  ... 

  var editor = ace.edit("editor");
    editor.getSession().setUseWorker(true);

    ace.config.loadModule('ace/ext/tern', function () 
        editor.setOptions(
            enableTern: 
                defs: ['browser', 'ecma5', myContext],
                plugins: 
                    doc_comment: 
                        fullDocs: true
                    
                ,                    
                useWorker: true,                    
                startedCb: function () 
                    console.log('editor.ternServer:', editor.ternServer);
                ,
            ,
            enableSnippets: true,
            enableBasicAutocompletion: true,
        );
    );

【讨论】：

非常感谢。看起来很有希望。