Visual Studio Code：将光标移动到空 HTML 标记的快捷方式，值？答案

【问题标题】：Visual Studio Code: shortcut for moving the cursor to empty HTML tag, value?Visual Studio Code：将光标移动到空 HTML 标记的快捷方式，值？
【发布时间】：2020-07-23 18:24:23
【问题描述】：

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

场景：

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

【问题讨论】：

标签： html visual-studio-code editor

【解决方案1】：

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

在您的 settings.json 中：

"selectby.regexes": {

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

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

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

如果您有带有空格的结束标签 (</ 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 并不总是显示光标所在的位置 - 但它们在正确的位置]

【讨论】：

效果很好@Mark！谢谢！我需要对其进行一些扩展，因为 Emmet 扩展添加了一些属性，例如 <a href=""></a>。这样该元素标签就不会被正则表达式捕获。太好了，非常感谢。
对。这似乎对您在评论中的情况有效"moveby": "<([^\\s]+).*?>(?=<\/\\s?\\1)|\"(?=\")",。唯一的问题是正则表达式替代将首先出现在>< 之间 - 正如预期的那样，考虑到正则表达式替代的顺序，因此永远不会看到“”。当然，它会让您就位，您可以根据哪个对您更重要来更改交替的顺序。我将不得不考虑是否有办法在正则表达式中避免这种情况。
如果正则表达式相同，则无需在 selectby.regexes 中创建 2 个条目，只需创建 "goToEmpty" 并在下一个和上一个键盘快捷键中引用它
([^\\s]+) 可以缩短为(\\S+)
因为它们总是单词字符 (\\w+) 缩小范围更多