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, ie without shortcuts (NO TAB) .

Codeacademy example.gif

Answer 1

There's a plugin that I use that will auto-close tags like described above named Auto Close . It works for both Sublime 2 and 3.

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.

Answer 5

Ok, the best work around for Sublime 3 that I have found is to go ahead and install the SublimeCodeIntel package. I'm not sure if it's an issue with generating popups because the keybindings as given within the package are not working, but what is definitely working is multi lang auto suggest after typing <_ (where _ is whitespace) as well as when you use the auto-suggest the closing tag auto generates.

Answer 6

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 7

On Sublime Text 3 save any file as .html file.

Then typing something like:

followed by TAB key automatically expand to:

with complete tags of title , body and head.

Answer 8

There is another plugin called SublimeCodeIntel which not only gives auto close functionality but also the code suggestion.

Here is the complete documentation.

The plugin provides the following features:

• Jump to Symbol Definition - Jump to the file and line of the definition of a symbol.
• Imports autocomplete - Shows autocomplete with the available modules/symbols in real time.
• Function Call tooltips - Displays information in the status bar about the working function.

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

Answer 9

Heres the official documentation
https://www.sublimetext.com/docs/3/auto_complete.html
Its the same in most IDE's. Aslong as you have the settings enabled (as shown in the document) it is then:
CTRL+Space - to show suggestions
Enter to apply suggestion. (you can change that in the settings)

Answer 10

On Sublime Text 3 save blank new file as .html file.

Then typing something like:

<strong>

followed by TAB key automatically expand to:

<strong> </strong>

with active cursor inside the tag