将光标添加到结束 HTML 标记快捷方式答案

【问题标题】：Add cursor to ending HTML tag shortcut将光标添加到结束 HTML 标记快捷方式
【发布时间】：2021-09-05 19:09:00
【问题描述】：

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

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

请帮帮我，我是 vscode 的新手。

【问题讨论】：

标签： html vscode-settings key-bindings

【解决方案1】：

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

Editor: Linked Editing

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

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

【讨论】：

【解决方案2】：

你可以用一个简单的脚本来做到这一点。还有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>

【讨论】：