javascript - 王牌编辑|自动代码块完成

Question

使用 ace 编辑器，除了代码片段补全之外，我还希望在用户键入时提供自动补全功能。举个例子，我有以下代码片段

\begin{${1:something}}

\end{${1:something}}

现在，这可以作为通用片段使用。现在当用户输入时

\begin{equation}

并按 ENTER 我想插入一个匹配的结束 block ，如第一个片段中所示。除了添加键盘处理程序并检查前面的文本之外，还有什么更好的方法吗？可能是一种显示自定义“片段”的方法，其中还包括 ${1} 的值作为自动补全？

Answer 1

我现在已经通过当光标前面有命令时触发自动完成来解决这个问题。这解决了这两个问题，因为 ENTER 键会插入当前选定的代码片段。我使用以下代码触发了自动完成:

editor.commands.on("afterExec", function(e) {
        if (e.command.name === "insertstring") {
            if (getCommand(editor)) {
                editor.execCommand("startAutocomplete");
            }
        }
});

getCommand 基本上确定光标后面是否有命令。现在，当存在命令时，自动完成功能就会被触发，因此需要自定义完成程序才能从包含\end 标记的输入命令动态构建片段。

identifierRegexps: [/[\\a-zA-Z0-9{}\[\]]/],
getCompletions: function(editor, session, pos, prefix, callback) {
    const command = getCommand(editor);
    if (!command) { callback(null, []); return }
    const completions = [];

    let caption = command.cmd;
    if (command.mods.length > 0) caption += `[${command.mods}]`;
    if (command.args.length > 0) caption += `{${command.args}}`;

    let snippet = command.cmd;
    if (command.mods.length > 0) snippet += `[${command.mods}]`;
    if (command.args.length > 0) snippet += `{${command.args}}`;

    if (command.cmd === '\\begin') {
        snippet += '\n\t${1}';
        snippet += `\n\\end{${command.args}}`
    }

    completions.push({
        caption: caption,
        snippet: snippet,
        meta: command.cmd === '\\begin' ? 'env' : 'cmd',
    });

    callback(null, completions);
}

注意标识符Regexps，它是防止编辑器保留用户在触发自动完成之前输入的旧命令所必需的。它基本上匹配所有字母数字字符以及括号和反斜杠。然后，我通过执行以下命令将此代码添加到编辑器中:

langTools.addCompleter(customCompleter);

其中customCompleter是上面显示的对象。