set auto complete on sublime text 3 for custom html elements

Question

Good day,

how can I set auto complete on sublime text 3 for custom html elements, like for example if I type: dog then press tab it will become <dog></dog>.. thanks for your answer.

Answer 1

You can create a custom .sublime-completions file for this. Create a new file with JSON syntax in Sublime, using the following contents (of course customized to your needs):

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

    "completions":
    [
        { "trigger": "foo", "contents": "<foo>$0</foo>" },
        { "trigger": "bar", "contents": "<bar class=\"$1\">$0</bar>" },
        { "trigger": "baz", "contents": "<baz class=\"${1:myclass}\">$0</baz>" }
    ]
}

In the first example, typing foo and hitting Tab will insert <foo>|</foo> where | is the cursor position.

In the second example, typing bar and hitting Tab will insert <bar class="|"></bar>. The cursor will first be between the quotes following class= so you can enter your own class. Hitting Tab again will place the cursor just before </bar>.

The third example works just like the second, except that the class now has a default value. This value will be highlighted after typing baz and hitting Tab - you can either hit Tab again to keep the default value and move the cursor between the opening and closing tags, or you can enter your own value, hit Tab, and move the cursor to between the opening and closing tags.

Once you have everything set up how you like, save the file as Packages/User/HTML.sublime-completions, where Packages is the folder opened when you select Preferences -> Browse Packages....

For more information, follow the link above. To learn more about placeholders and variables, check out this documentation.

Good luck!