将光标添加到结束 HTML 标签快捷方式

Question

我想要一个键绑定，它会自动将光标添加到 vscode 中 HTML 的结束标记。

这样 <h3> 标签以 </h3> 结束，如果我想将 <h3> 更改为 <h4>，我也想通过任何方式更改结束标签以添加光标也位于结束标记处。

请帮助我，我是 vscode 中的代码新手。

Answer 1

您可以使用简单的脚本来完成此操作。并且 css

//select all h3 elements
document.querySelectorAll('h3').forEach( element => {
  //create new h4 element
  const newElement = document.createElement('h4');

  //set the inner html to the original h3 element 
  newElement.innerHTML = element.innerHTML;

  //take all attributes from original element and assign them to the new one
  Array.from(element.attributes).forEach( attr => {
    newElement.setAttribute(attr.nodeName, attr.nodeValue)
  })

  //replace the node in the dom
  element.parentNode.replaceChild(newElement, element);
})

h4 {cursor: not-allowed;}

<!DOCTYPE html>
<html>
<head>
<style>



</style>
</head>
<body>


<h2>this is h2 heading</h2>
<h3 >this is h3 heading</h3>
<h4>this is h4 heading</h4>





</body>
</html> 

<script>

</script>

Answer 2

您不需要特殊的键绑定，您可以启用一个设置：

Editor: Linked Editing

这样当您在一个标签内单击时，光标会添加到匹配的标签中。

（与 settings.json 中的 "editor.linkedEditing": true, 相同）

将光标添加到结束 HTML 标签快捷方式

Add cursor to ending HTML tag shortcut

html

vscode-settings

key-bindings