1. 程式人生 > >前端代碼編輯器ace 語法提示 代碼提示

前端代碼編輯器ace 語法提示 代碼提示

function sni 快捷 自定義 就會 defined add edi 提示

本文主要是介紹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,試了幾種情況,也沒搞明白具體有什麽限制。

  

前端代碼編輯器ace 語法提示 代碼提示