Sublime Forum

Autoclose html tags (sublime 2)

#1

is there any plugin to autoclose html elements? for example: as i type this tag need to be closed as automatically.

thank you.

0 Likes

New to Sublime - A few questions
#2

In a recent build:
Menu: Edit -> Tag -> Close Tag (Alt+.)

0 Likes

#3

[quote=“bizoo”]In a recent build:
Menu: Edit -> Tag -> Close Tag (Alt+.)[/quote]

yes, but i need this to be closed automatically. pressing alt+. is the manual way i think?

0 Likes

#4

You can try to bind the close tag command to > or </ shortcut.

0 Likes

#5

Actually typing something like:

div

followed by TAB key automatically expand to:

<div></div>
0 Likes

#6

There is plugin
github.com/kihlstrom/Close-Tag- … blime-Text
That automatically calls to “Edit -> Tag -> Close Tag (Alt+.)” when hitting “</” there is a pull request waiting to add support for multiples regions.

0 Likes

#7

Here’s what I have in User:

keys:

	// Auto close tags
 	{ "keys": ">"], "command": "auto_close_tag", "args": { "prefix": ">"}, "context":
		
			{ "key": "selector", "operator": "equal", "operand": "text.html meta.tag -string -punctuation.definition.tag.begin.html -meta.scope.between-tag-pair.html, text.xml meta.tag -string -punctuation.definition.tag.begin.xml -meta.scope.between-tag-pair.xml", "match_all": true },
			{ "key": "preceding_text", "operator": "not_regex_contains", "operand": "(?:\\<(?:img|br|hr|meta|link|base|input)\\>^<]*)|/$" }
		]
	},
	// Line and Tab when hitting enter between tags	
	{ "keys": "enter"], "command": "insert_snippet", "args": {"contents": "\n\t$0\n"}, "context":
		
			{ "key": "setting.auto_indent", "operator": "equal", "operand": true},
			{ "key": "selector", "operator": "equal", "operand": "meta.scope.between-tag-pair"}
		]
	},

autoclose_tags.py:

import sublime, sublime_plugin

class AutoCloseTagCommand(sublime_plugin.TextCommand):
    def run(self, edit, prefix=""):
        self.view.run_command('insert', {'characters': prefix})
        cursorPosition = self.view.sel()[0].begin() 
        self.view.run_command('close_tag')
        self.view.sel().clear()
        self.view.sel().add(cursorPosition)
1 Like

#8

[quote=“grayrest”]Here’s what I have in User:
…
autoclose_tags.py:
[/quote]

Great stuff, man. Many thanks

0 Likes

#9

[quote=“grayrest”]Here’s what I have in User:

keys:…
autoclose_tags.py:

import sublime, sublime_plugin ... [/quote]

Dude, you’re awesome. Thanks!

0 Likes

#10

Is it possible to alter this to remove the closing tag if backspace is pressed on the >?
So example would be

would produce | single backspace would return to: <option|

Another example:
<a|
|
<a|
<abbr|
|

Make sense?

0 Likes

#11

Please excuse my noobness, but where would I put the python script?

I managed to place the keys in my user settings (I had other settings, so I just added them to the bottom of the JSON), but have no idea where to place the python script or how to start the shortcuts (if I even have to).

Thanks

0 Likes

#12

[quote=“yoaquim”]Please excuse my noobness, but where would I put the python script?
I managed to place the keys in my user settings (I had other settings, so I just added them to the bottom of the JSON), but have no idea where to place the python script or how to start the shortcuts (if I even have to).
Thanks[/quote]

Apologies for my noobness as well! I don’t know where to put the second code block either/where to find autoclose_tags.py

0 Likes

#13

@alexvineyard:

First you need to add some key bindings. On a MAC you can open the Users key bindings file by going to “Sublime Text 2 > Preferences > Key Bindings - User” (from the menu). A file will be opened, if that file doesn’t contain any keybindings yet, it probably contains just an empty array, like this:

[]

In that array you’ll need to add the keybindings, so your file will look like this after you’re done:

[
        // Auto close tags
 	{ "keys": [">"], "command": "auto_close_tag", "args": { "prefix": ">"}, "context":
 	[
			{ "key": "selector", "operator": "equal", "operand": "text.html meta.tag -string -punctuation.definition.tag.begin.html -meta.scope.between-tag-pair.html, text.xml meta.tag -string -punctuation.definition.tag.begin.xml -meta.scope.between-tag-pair.xml", "match_all": true },
			{ "key": "preceding_text", "operator": "not_regex_contains", "operand": "(?:\\<(?:img|br|hr|meta|link|base|input)\\>^<]*)|/$" }
		]
	},
	// Line and Tab when hitting enter between tags	
	{ "keys": ["enter"], "command": "insert_snippet", "args": {"contents": "\n\t$0\n"}, "context":
	[
			{ "key": "setting.auto_indent", "operator": "equal", "operand": true},
			{ "key": "selector", "operator": "equal", "operand": "meta.scope.between-tag-pair"}
		]
	}
]

Next you have to add the plugin, which handles the autocomplete. You can do this by creating a new plugin by going to (again from the menu) : “Tools > New Plugin”. A new file will be opened, and the content will probably look something like this:

import sublime, sublime_plugin

class ExampleCommand(sublime_plugin.TextCommand):
	def run(self, edit):
		self.view.insert(edit, 0, "Hello, World!")

You need to replace all of that code with this:

import sublime, sublime_plugin
class AutoCloseTagCommand(sublime_plugin.TextCommand):
    def run(self, edit, prefix=""):
        self.view.run_command('insert', {'characters': prefix})
        cursorPosition = self.view.sel()[0].begin() 
        self.view.run_command('close_tag')
        self.view.sel().clear()
        self.view.sel().add(cursorPosition)

The last step is saving the file. If you hit CMD + S, it will probably already open the right folder for you and you just need to save it as autoclose_tags.py. If not, navigate to /Users/<YourUserName>/Library/Application Support/Sublime Text 2/Packages/User and save the plugin in that folder under the name autoclose_tags.py.

And you’re done. Now if you create a new HTML file and try to add some tags like <head> it will automatically add a closing tag for you. If it doesn’t, try restarting Sublime Text first.

2 Likes

#14

Sublime Text 3 auto-closes tags when you type </, by the way.

1 Like

#15

Good to know! Well I’ll keep working with Sublime Text 2 as long as Sublime Text 3 is still in beta though :slightly_smiling:

0 Likes

#16

Sublime Text betas have traditionally always been more on the stable side. Dev builds are the builds potentially breaking stuff.

I recommend everyone to use Sublime Text 3 any time of the day.

1 Like

#17

@erikvdven thanks for the instructions setting that up. Works great with html and xml files, but not jsx. Anybody know how I could modify it to work with .jsx files?

0 Likes

#18

Hey, you are the freakin’ man you know that? I was using another editor that just kept crashing my computer for some reason, but it had this feature, which I really liked. I tried a bunch of alternatives but really like sublime, the only thing missing was this feature. Now with your clear and easy to follow instructions I got it to work. Amazing man, thanks.

0 Likes