javascript - 添加到 ace-editor 明智的自动完成 : List user-defined functions and variables (javascript language)

Question

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

主要问题

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

我想要什么

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

var var0 = 'abcd';

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

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

我已经知道的:

• 我知道如何启用自动完成和实时自动完成。
• 我知道如何add new completer
• 我知道内置的 Basic 自动完成会不加区别地添加文档中的所有单词
• 我知道 ace-tern plugin ，而且我不认为我想使用它。现在它仍然很老套，没有文档，我不知道如何启用它。
• 我知道 Ace 已经有了我要找的一些数据。例如，当已在同一范围内定义的变量被重新定义时，它会发出警告。所以它有变量列表及其范围。我猜它正在使用 jshint - 但有没有办法从那里获取它？
• 我读了ace documation并找到很多有用的方法来提取数据，如果需要的话。问题是我是否真的需要自己做这件事。

Answer 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: ['下划线', myContext]

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

Tern 相关的 ace.js 配置:(有关配置选项的评论，请参阅 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,
        });
    });