How to add custom HTML tags in Sublime Text 3

Question

In ST3 if you type <st in an HTML field it shows known tags for autocompletion:

For my templating engine TYPO3 Fluid i need to add custom tags (like <f:for each="" as=""></f:for>).

How can i do this?

Regular snippets are not enough here as long as they don't show up in the nice typeahead.

Answer 1

Contrary to what was posted in the comments, there is a very straightforward way of doing this using a custom .sublime-completions file for HTML. These files are great because not only can you just have a simple list of custom tags, but you can also use snippet syntax for more complex tasks.

Create Packages/User/HTML.sublime-completions with JSON syntax, and use the following as a starting point:

{
    "scope": "text.html - source - meta.tag, punctuation.definition.tag.begin",

    "completions":
    [
        { "trigger": "ffor", "contents": "<f:for each=\"$1\" as=\"$2\">$0</f:for>" },
        { "trigger": "foobar", "contents": "<foobar>$0</foobar>" },

        "baz",
        "quux",
        "thneed"            
    ]
}

When you type ffor and hit Tab, <f:for each="" as=""></f:for> will be inserted, with the cursor between the each quotes. Hitting Tab again puts the cursor between the as quotes, and hitting it once more puts it between the opening and closing tag. The foobar trigger just creates a regular <foobar></foobar> tag with the cursor between them. baz, quux, and thneed just populate the completions list with those words.