Automatically close HTML tags in Sublime Text 3

Question

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

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

A type

<strong

then when entering>

Sublime then immediately prints

<strong></strong>

And then your cursor will be placed inside the tag.

I am trying to do what was mentioned above in Sublime Text 3. A similar question was asked here , but there wasn’t enough answer. Given the past, I ask again. Basically I want to imitate how tags end in Codecademy automatically, i.e. without labels (NO TAB) .

Codeacademy example.gif

Answer 1

There is a plugin that I use that will automatically close tags, as described above, with the name Auto Close. This works as for Sublime 2 and 3.

You can install it through package management by searching for "Auto Close".

Answer 2

Not the answer you want, but if you type </ , ST3 will automatically end the closest unclosed tag. Otherwise, your full Nick answer will be your best bet.

Answer 3

I had the same problem on Windows, and people on several forums suggested I uninstall and reinstall Sublime 3. But the problem has not been resolved. I do not know the cause of the problem. There was a problem with the installed packages or settings. I solved the problem this way by removing installed packages and settings.

On windows 10

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

Remove folders and contents from this folder to resolve this issue.

On linux

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

There is some problem that all installed packages will be removed. You need to reinstall the necessary packages again.

Therefore, please check and reinstall all necessary plugins.

Answer 4

Ok, the best work for Sublime 3 I found is to continue installing SublimeCodeIntel . I'm not sure if this is a problem with pop-up generation because the key bindings as indicated in the package do not work, but what definitely works is multi lang auto suggest after entering <_ (where _ is a space), and also when you use the automatic tooltip generated automatically.

Answer 5

This works for me. It closes with a backslash, i.e. Your closing tag.

For example, you have <div>my div< and after entering / you 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 6

Here is the official documentation
https://www.sublimetext.com/docs/3/auto_complete.html
This is the same in most IDEs. If you have included options (as shown in the document) then this:
CTRL + Space - show offers
Log in to apply. (you can change this in the settings)

Answer 7

In Sublime Text 3, save any file as an .html file.

Then type something like:

and then the TAB key automatically expands to:

with full heading, body and head tags.

Answer 8

There is another plugin called SublimeCodeIntel , which not only provides an automatic close function, but also offers code.

Here is the full documentation.

The plugin provides the following functions:

• Go to character definition - go to the file and the character definition line.
• Import autocomplete - shows autocomplete with available modules / symbols in real time.
• Function tooltips - displays information in the status bar about the working function.

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

Answer 9

In Sublime Text 3, save the empty new file as an .html file.

Then type something like:

<strong>

and then the TAB key automatically expands to:

<strong> </strong>

with active cursor inside tag