添加到 ace-editor 明智的自动完成:列出用户定义的函数和变量(javascript 语言)
Adding to ace-editor wise autocomplete: List user-defined functions and variables (javascript language)
我想将用户定义的函数和变量列表添加到 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 并找到了很多有用的方法,如果需要的话,我可以用它们来提取数据。问题是我是否真的需要自己做这个。
更新:我在我的回答中暗示了这一点,但要澄清一下 - Tern 将完全按照您在我想要的 中的要求进行操作。下面的代码片段解决了另一个问题,即提供一些您甚至不希望用户在编辑器中看到的上下文。查看 Ace.Tern live demo
中使用的代码的屏幕截图
这是有偏见的,但我认为在 ace 中添加 auto-complete 的最佳选择是 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 配置:(有关配置选项的评论,请参阅 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,
});
});
我想将用户定义的函数和变量列表添加到 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 并找到了很多有用的方法,如果需要的话,我可以用它们来提取数据。问题是我是否真的需要自己做这个。
更新:我在我的回答中暗示了这一点,但要澄清一下 - Tern 将完全按照您在我想要的 中的要求进行操作。下面的代码片段解决了另一个问题,即提供一些您甚至不希望用户在编辑器中看到的上下文。查看 Ace.Tern live demo
中使用的代码的屏幕截图这是有偏见的,但我认为在 ace 中添加 auto-complete 的最佳选择是 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 配置:(有关配置选项的评论,请参阅 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,
});
});