Visual Studio代码：将光标移动到空HTML标签的快捷方式，值？

Question

在 Sublime Text 3 中存在一个键绑定，用于将光标 ctrl+alt+left(arrow key)/right(arrow key) 直接移动到空值 <input name="" /> 或空标签 <p></p>。我无法在 Visual Studio 代码中弄清楚如何做到这一点。任何人都知道如何做到这一点或将其添加到 Visual Studio 代码键绑定？

场景：

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

Answer 1

我认为没有内置的方法可以做到这一点，也许有一个扩展。您可以使用 Select By 扩展自行设置它，它还允许您向前或向后移动到您可以使用正则表达式定义的任何内容。

在你的settings.json中：

"selectby.regexes": {

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

正则表达式：<(.*?)>(?=</\1)|\"(?=\")

那里有积极的前瞻，因此您的光标最终会到达您想要的位置。 <(.*?)>(?=</\1) 使用反向引用，因此您只能转到 >< 匹配标签。

如果您有带 space (</ div>) 的结束标记，它将起作用。

在你的 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
},

[gif 并不总是显示光标所在的位置 - 但它们在正确的位置]

Visual Studio代码：将光标移动到空HTML标签的快捷方式，值？

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

html

editor

visual-studio-code