is there any plugin to autoclose html elements? for example: as i type this tag need to be closed as automatically.
thank you.
is there any plugin to autoclose html elements? for example: as i type this tag need to be closed as automatically.
thank you.
[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?
Actually typing something like:
div
followed by TAB key automatically expand to:
<div></div>
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.
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)
[quote=“grayrest”]Here’s what I have in User:
…
autoclose_tags.py:
[/quote]
Great stuff, man. Many thanks
[quote=“grayrest”]Here’s what I have in User:
keys:…
autoclose_tags.py:
import sublime, sublime_plugin
...
[/quote]
Dude, you’re awesome. Thanks!
Is it possible to alter this to remove the closing tag if backspace is pressed on the >?
So example would be
Another example:
<a|
|
<a|
<abbr|
|
Make sense?
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=“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
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.
Good to know! Well I’ll keep working with Sublime Text 2 as long as Sublime Text 3 is still in beta though
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.
@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?
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.