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

Posted 2020-10-22 点滴人生 legu2009

本文主要是介绍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，试了几种情况，也没搞明白具体有什么限制。