添加到ace-editor明智的自动完成:列出用户定义的函数和变量(javascript语言)

时间:2015-06-23 19:24:04

标签: javascript autocomplete ace-editor

我想将用户定义的函数和变量列表添加到ace编辑器的自动完成中。 要做到这一点,我想检查插入到文档中的所有代码用户,查找已定义的函数(及其参数),定义的变量及其范围等。

主要问题

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

我想要什么

for exapmle,如果用户插入如下代码:

var var0 = 'abcd';

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

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

我所知道的

  • 我知道如何启用自动完成和实时自动完成。
  • 我知道如何add new completer
  • 我知道内置的基本自动完成添加文档中的所有单词
  • 我知道ace-tern plugin,我不认为我想使用它。现在它仍然是hackish,无文档,我无法知道如何启用它。
  • 我知道 Ace已经拥有我之后的一些数据。例如,当已在同一范围内定义变量时,它会发出警告。所以它有变量列表及其范围。我的猜测是使用jshint - 但有没有办法从那里抓住它?
  • 我读了ace documation并找到了很多有用的方法,我可以用来提取数据,如果必须的话。问题是我是否真的需要自己这样做。

1 个答案:

答案 0 :(得分:3)

更新:我暗示在我的回答中,但澄清一下--Tenn会完全按照你的要求做出我想要的。下面的代码片段解决了另一个问题,即提供一些您不希望用户甚至在编辑器中看到的上下文。查看Ace.Tern live demo

中使用的代码的屏幕截图

autocomplete for function with two parameters inside function scope you have var0, var1, var2 and local var3

这是有用的,但是在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,
        });
    });