Sublime Forum

[Solved] HTML - Jump outside immediate tag

#1

Just getting me head around using sublime to write html efficiently (particularly navigation through tags), and would appreciate any suggestions. Say I want to write: <p>hello<strong>big</strong>world!</p>, I am currently going:

"<p", tab, "hello", "<st", tab, "big"....

But then I don’t know how to jump out of the strong tag without jumping out of the p tag as well (other than pressing right a bunch of times).

Any help / input would be much appreciated.

1 Like
#2

I believe you will want to create a custom keybinding that functions when:

  • you are in an XML or HTML document
  • there is no selection
  • the text immediately after the caret is a closing tag

which will move the cursor to after the closing tag.

Do you want to be able to press Tab for this? if so, we will want more constraints like

  • autocompletion is not showing etc.
  • you are not in the middle of creating an open tag

I believe we will need to create a small Python plugin to take care of the actual caret repositioning, but don’t worry, it should be simple!

2 Likes
#3

That sounds great Keith, yes Tab does make sense to me in this workflow.

Do imagine a lot of people use sublime for html, scan’t help but wonder if Im actually coming at this the right way / am missing an alternative way of handling this scenario efficiently that already exists…

0 Likes
Help with "Tab" Key
#4

Maybe other people type text first, select it and then use the Edit -> Tag -> Wrap Selection with Tag functionality, whereby what you type next affects both the opening and the closing tag name, though it defaults to <p>...</p>.

Maybe some web devs will comment on their workflow :slight_smile:

To achieve what you want with Tab, you can add this to your user keybindings file (accessible from the Preferences menu):

{ "keys": ["tab"], "command": "move_to_after_closing_tag", "context":
    [
        { "key": "selection_empty", "operator": "equal", "operand": true, "match_all": true },
        { "key": "following_text", "operator": "regex_contains", "operand": "^</\\w+>", "match_all": true },
        { "key": "preceding_text", "operator": "regex_contains", "operand": "(^\\s*|>[^<>]*)$", "match_all": true },
        { "key": "selector", "operator": "equal", "operand": "text.html, text.xml", "match_all": true }, 
        { "key": "auto_complete_visible", "operator": "equal", "operand": false },
    ]
},

and save it. And then:

  1. Tools menu -> Developer -> New Plugin...

  2. Paste in the following:

     import sublime
 import sublime_plugin


 class MoveToAfterClosingTagCommand(sublime_plugin.TextCommand):
     def run(self, edit):
         new_sel = []
         for sel in self.view.sel():
             pos = self.view.find('>', sel.end(), sublime.LITERAL).end()
             new_sel.append(sublime.Region(pos, pos))
         self.view.sel().clear()
         self.view.sel().add_all(new_sel)

  3. Save it, in the folder that Sublime suggests, as something like html_hop_over_close_tag.py - the name itself isn’t important, as long as it ends in the .py extension

Then, try pressing Tab as per the scenario you outlined :slight_smile:

also note that, if you are writing well-formed XML, you can use the XPath plugin to assist with navigation. It doesn’t currently support jumping outside the immediate tag, but I plan to update it so that it will in future. :slight_smile:

2 Likes
Shortkey to jump over closing tag?
#5

Keith that works beautifully! Thanks so much, really appreciate you time and efforts.

0 Likes