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.

Answer 2

I'm unfamiliar with the syntax you're trying to produce, but is there any reason this snippet ( Menubar / Tools / New Snippet… ) won't work for you?

<snippet>
  <content><![CDATA[f:for each="$1" as="$2"></f:for>]]></content>
  <tabTrigger>f:for</tabTrigger>
  <scope>text.html</scope>
</snippet>

The $1 and $2 indicate cursor placement after the autocompletion (pressing tab jumps the cursor from the first cursor location to the second).

As it's written above, the snippet appears upon typing simply <f (or the complete trigger, <f:for ) in an HTML file.

The snippet must be named with a .sublime-snippet file extension, and it must be saved in the ~/Library/Application Support/Sublime Text 3/Packages/User directory. No relaunch of the Sublime app is necessary.

Documentation:

http://docs.sublimetext.info/en/latest/extensibility/snippets.html

Answer 3

I also asked a similar question recently in Stack overflow - How to add custom auto completion in Sublime Text 3? and sublime User Echo .

This question will be easily solved by the below implementation. (But my question is not completely solved by this method.) The method below is specific for my own problem. But you can easily figure it out how to change it.

Easiest way to implement these auto completions is to create HTML.sublime-completions file in Sublime Text Build 3059 x64\\Data\\Packages\\User folder. (Since I use portable version of ST3 in Windows OS, the folder may be different when you installed ST3.) Filling the file with JSON text like

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

    "completions":
    [
        { "trigger": "eq", "contents": "<eq>$1</eq>" },
        { "trigger": "eqq", "contents": "<eqq>\n\t$1\n</eqq>" }
    ]
}

. But tab triggering is not enabled, although my Preferences - Settings - User includes tab related features like

{
    [
        "Vintage",
        "BracketHighlighter",
        "SideBarEnhancements"
    ],
    "tab_completion": true,
    "tab_size": 2,
    "translate_tabs_to_spaces": false,
    "use_tab_stops": false,
}

. Only Ctrl+tab triggering is enabled in this case. What is wrong? I don't know.

To resolve these problems, I tried Snippets, making HTML.sublime-snippet file in Sublime Text Build 3059 x64\\Data\\Packages\\User folder. I put

<snippet>
    <content><![CDATA[<eqq>
    $0$1
</eqq>]]></content>
    <tabTrigger>eqq</tabTrigger>
    <scope>text.html</scope>
</snippet>
<snippet>
    <content><![CDATA[<eq>$1$0</eq>]]></content>
    <tabTrigger>eq</tabTrigger>
    <scope>text.html</scope>
</snippet>

. In this case only the first <snippet> is enabled. So I separately saved multiple snippet files.

<snippet>
    <content><![CDATA[<eq>$0</eq>]]></content>
    <tabTrigger>eq</tabTrigger>
    <scope>text.html</scope>
    <description>eq tag to be rendered by MathJax</description>
</snippet>

in eq.sublime-snippet file, and

<snippet>
    <content><![CDATA[<eq>$1$0</eq>]]></content>
    <tabTrigger>eq{$PARAM1}</tabTrigger>
    <scope>text.html</scope>
    <description>eq{inline TeX equation} tag to be rendered by MathJax</description>
</snippet>

in eqBraces.sublime-snippet file, and

<snippet>
    <content><![CDATA[<eqq>
    $0
</eqq>]]></content>
    <tabTrigger>eqq</tabTrigger>
    <scope>text.html</scope>
    <description>eqq tag to be rendered by MathJax</description>
</snippet>

in eqq.sublime-snippet file, and

<snippet>
    <content><![CDATA[<eqq>
    $1$0
</eqq>]]></content>
    <tabTrigger>eqq{$PARAM1}</tabTrigger>
    <scope>text.html</scope>
    <description>eqq{outline TeX equations} tag to be rendered by MathJax</description>
</snippet>

in eqqBraces.sublime-snippet file. But these don't resolve my problems completely either.

I tried something like ${1/\\\\/\\/} . But this doesn't work either. Uncomfortably using double \\ like eq{\\\\alpha \\\\beta \\\\gamma} , I can fix the unexpected escape \\ problem.