Ace Editor manually adding snippets
Use ace.define(...)
for adding your snippet.
The snippets are written in tex-like
language.
- For Snippet defined at
./src/lib/json-snippet.js
:
// eslint-disable-next-line
const snippet = '# AddNode\n\
snippet addn\n\
{\n\
"nodeName": "${1:node_name}",\n\
"algorithmName": "${2:algo_name}",\n\
"input": []\n\
}\n\
';
export default snippet;
// import your snippet
import snippet from "../lib/json-snippet";
// SUPER HACK FOR ADDING SNIPPETS
ace.define("ace/snippets/json", ["require", "exports", "module"], (e, t, n) => {
// eslint-disable-next-line
(t.snippetText = snippet), (t.scope = "json");
});
Use
brace/mode/{filetype}
,brace/snippets/{filetype}
for defining file type and it snippets.Find existing snippets at
node_module/brace/snippets/
for overriding.
import "brace/mode/json";
import "brace/snippets/json";
import "brace/ext/language_tools";
For more information check out:
- Demo
- This repository
If you don't use RequireJS then the following syntax works as well:
ace.config.loadModule('ace/ext/language_tools', function () {
editor.insertSnippet(snippetText);
});
The other answers seem to be kind of old or rather hacky. This worked for me using actual Ace APIs on v1.4.12 (albeit this seems to be totally and frustratingly undocumented).
const snippetManager = ace.require('ace/snippets').snippetManager;
const snippetContent = `
# scope: html
snippet hello
<p>Hello, \${1:name}!</p>
`;
const snippets = snippetManager.parseSnippetFile(snippetContent);
snippetManager.register(snippets, 'html');
Exchange html
for whatever scope you want.
In the editor type "hello" followed by TAB to trigger the snippet.
After hours of hacks and research, I finally came across the insertSnippet
function of snippetManager
in ext-language_tools.js
, it works this way:
var snippetManager = ace.require("ace/snippets").snippetManager;
snippetManager.insertSnippet(editor, snippet);
Pretty easy actually, couldn't find it earlier due to lack of documentation.