Ace.jsにスニペットを追加する

6889 ワード
Electron Ace JavaScript JavaScript テキストリンク

実行環境

・Electron
・Ace.js

2019/05/26 完全に書き換えました。

前回書いていたものはそれっぽく作ったもので、今回はちゃんと動くようになっています。

Ace.jsはHTML上で動作するエディターを追加するものです
ちょっと独特な感じだけど

前回の記事のコードをもとに構築してます

スニペット(Snippet)は

fun

と入力すると

function name() {
  // function
}

みたいになんか簡単に生成してくれるやつです(語彙力皆無)
その解説が何一つなかったので実際にそれらしく作ってみました
探しまくってありました

ace.config.loadModule('ace/ext/language_tools', function() {
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    });
    const snippetManager = ace.require("ace/snippets").snippetManager;
    const config = ace.require("ace/config");
    ace.config.loadModule("ace/snippets/javascript", function(m) {
        if (m) {
            snippetManager.files.javascript = m;
            m.snippets = snippetManager.parseSnippetFile(m.snippetText);
            m.snippets.push(
                {
                    "content": "const ${1:variable} = new Animation.base(x, y, z);",
                    "name": "Animation",
                    "tabTrigger": "Animation"
                }
            );
            snippetManager.register(m.snippets, m.scope);
        }
    });
});

解説

m.snippets.push(
    {
        "content": "const ${1:variable} = new Animation.base(x, y, z);",
        "name": "Animation",
        "tabTrigger": "Animation"
    }
);

${番号:名前}
これは変数名や引数等に付ける物で、
ユーザー側がTABを押したときに自動的に${番号:名前}の場所へ移動します。
説明難しいけどとにかく使ったらわかる(適当)