CODEWITHSUNDEEP
htmlvisual-studio-codeeditor
cazepeda
cazepeda

Reputation: 60

Visual Studio Code: shortcut for moving the cursor to empty HTML tag, value?

In Sublime Text 3 exists a key binding for moving the cursor ctrl+alt+left(arrow key)/right(arrow key) directly to an empty value <input name="" />, or an empty tag <p></p>. I've not been able to figure out how to do that in Visual Studio Code. Any one know how to do this or add it to the Visual Studio Code key bindings?

Scenarios:

<p></p>
<img src="" alt="">
<a href="" title=""></a>
<address></address>
<textarea name="" id="" cols="30" rows="10"></textarea>
<h1></h1>

Upvotes: 1

Views: 2099

Answers (1)

Mark
Mark

Reputation: 181050

I don't think there is a built-in way to do that, perhaps there is an extension. You can set it up yourself with the Select By extension, which also allows you to move forward or back to anything you can define with a regex.

In your settings.json:

"selectby.regexes": {

  "goToEmpty": {
    // "moveby": "<(.*?)>(?=</\\s?\\1)|\"(?=\")",
    "moveby": "<([^\\s]+).*?>(?=<\/\\s?\\1)|\"(?=\")",
  }
}

The regex: <(.*?)>(?=</\\1)|\"(?=\")

The positive lookaheads are there so that your cursor ends up where you want it. <(.*?)>(?=</\\1) uses a backreference so that you only go to >< that are matching tags.

It will work if you have end tags with a space (</ div>).

and in your keybindings.json:

{
  "key": "ctrl+alt+right",            // go to next, whatever keybinding you want
  "command": "moveby.regex",
  "args": ["goToEmpty", "moveby", "next", "end", "wrap"],
  "when": "editorTextFocus && editorLangId == html"   // if html only
},

{
  "key": "ctrl+alt+left",            // go to previous
  "command": "moveby.regex",
  "args": ["goToPreviousEmpty", "moveby", "prev", "end", "wrap"],
  "when": "editorTextFocus && editorLangId == html"       // if html only
},

go to empty html demo

[the gif doesn't always show where the cursor is - but they are in the right places]

Upvotes: 5

Related Questions