Auto closing HTML tags in Sublime Text 3

Question

Sublime 2, how to auto close HTML tags and place cursor inside the tag

I'm trying to figure out how to get Sublime 2 to create the following behavior:

Type

<strong

then, upon typing >

Sublime will then immediately print

<strong></strong>

And then your cursor will be placed inside of the tag.

I'm trying to do what's quoted above in Sublime Text 3. A similar question was also asked here but an answer was lacking. Given the time past, I'm asking again. Basically I want to emulate how tags are completed on Codecademy, automatically, i.e. without shortcuts (NO TAB).

Codeacademy example.gif

Answer 1

There's a plugin that will auto-close tags like you describe called Auto Close. It works for both Sublime 2 and 3.

Just be aware that it doesn’t work for JSX, and the package doesn’t appear to be maintained, but it does the job for me so hopefully it might help.

You can install it via Package Control by searching for "Auto Close".

Answer 2

This works for me. It closes on a backslash, ie your close tag.

For example, you have <div>my div< and upon typing /, you will get <div>my div</div>.

To enable, add the following object to the array in the key binding file (Sublime Text > Preferences > Key Bindings).

 {
    "keys": ["/"],
    "command": "close_tag",
    "args": { "insert_slash": true },
    "context": [
        {
            "key": "selector",
            "operator": "equal",
            "operand": "(text.html, text.xml, meta.jsx.js) - string - comment",
            "match_all": true
        },
        {
            "key": "preceding_text",
            "operator": "regex_match",
            "operand": ".*<$",
            "match_all": true
        },
        { "key": "setting.auto_close_tags" }
    ]
}

Answer 3

Not really the answer you want but if you type </ ST3 will auto complete the closest unclosed tag. Otherwise the auto complete answer by Nick is your best bet.

Answer 4

I had the same issue in windows and may people in several forums suggested me to remove and reinstall Sublime 3. But issue not resolved. I don't know the cause of issue. it seems some problem occurred with the packages installed or settings configured. I got resolved the issue in this way by removing installed packages and settings.

In Windows 10

go to C:\Users\ YOUR_USER_NAME \AppData\Roaming\Sublime Text 3

Remove folders and contents from that folder it will resolve this issue.

In Linux

Please reverse the process described in https://packagecontrol.io/installation

There is some issue coursing with this is that all the installed packages will get removed. You need to reinstall needful packages again.

So please make sure to note down and reinstall all the plugins needed.