您的位置:首页 > Web前端

前端代码编辑器ace 语法提示 代码提示

2018-01-26 22:40 204 查看

本文主要是介绍ace编辑器的语法提示,自动完成。其实没什么可特别介绍的,有始有终吧,把项目中使用到的ace的功能都介绍下。



{
enableBasicAutocompletion: false, //boolea 或 completer数组,
enableLiveAutocompletion: false, //boolean 或 completer数组,
enableSnippets: false, // boolean
}


  completer,就是拥有一个getCompletions(editor, session, pos, prefix, callback)方法的object

  相关的配置逻辑,可以看下源代码https://github.com/ajaxorg/ace/blob/v1.1.4/lib/ace/ext/language_tools.js

  如果enableBasicAutocompletion, enableLiveAutocompletion的值为数组,就会覆盖编辑器默认的completers,不推荐使用。

  enableBasicAutocompletion

  设置enableBasicAutocompletion = true,就会增加Autocomplete.startCommand命令。但是快捷键默认是如下配置,和现在的输入法存在冲突。

startCommand.bindKey = "Ctrl-Space|Ctrl-Shift-Space|Alt-Space"


  enableLiveAutocompletion

  设置enableLiveAutocompletion = true,就会在输入内容时,弹出语法提示框,但是逻辑代码中忽略了一些情况,如删除。
  所以如果交互要求变动就弹出提示的话,可以editor绑定change事件,触发命令

editor.on("change", function(e){
  editor.execCommand("startAutocomplete");
})


  项目中还有可能,变量在别的地方预设的,也希望能自动完成,需要通过language_tools,增加自定义的completer

var langTools = ace.acequire("ace/ext/language_tools");
langTools.addCompleter({
getCompletions: function(editor, session, pos, prefix, callback) {
console.log(editor, session, pos, prefix, callback);
if (prefix.length === 0) { callback(null, []); return }
callback(null, [{
name: word, //显示的名称,‘奖金’
value: word, //插入的值,‘100’
score: 1000, //分数,越大的排在越上面
meta: type //描述,‘我的常量’
}]);
}
});


  enableSnippets

  设置enableSnippets = true;启用代码块提示的功能。
  如果是给自己新增的mode增加snippets,参照下面的文件配置下。

ace.define("ace/snippets/modeName",["require","exports","module"],function(e,t,n){"use strict";t.snippetText=undefined,t.scope="modeName"})


  snippets配置说明: https://cloud9-sdk.readme.io/docs/snippets
  snippets在线调试:https://ace.c9.io/build/kitchen-sink.html

  通过[TAB]在定义的${1},${2},${3}。。。跳转,最后回到${0},详细的就参照《snippets配置说明》配置,提到的Triggers & Guards,试了几种情况,也没搞明白具体有什么限制。

  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: