将光标添加到结束 HTML 标签快捷方式
Add cursor to ending HTML tag shortcut
我想要一个键绑定,它会自动将光标添加到 vscode 中 HTML 的结束标记。
这样 <h3>
标签以 </h3>
结束,如果我想将 <h3>
更改为 <h4>
,我也想通过任何方式更改结束标签以添加光标也位于结束标记处。
请帮助我,我是 vscode 中的代码新手。
您可以使用简单的脚本来完成此操作。并且 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>
您不需要特殊的键绑定,您可以启用一个设置:
Editor: Linked Editing
这样当您在一个标签内单击时,光标会添加到匹配的标签中。
(与 settings.json 中的 "editor.linkedEditing": true,
相同)
我想要一个键绑定,它会自动将光标添加到 vscode 中 HTML 的结束标记。
这样 <h3>
标签以 </h3>
结束,如果我想将 <h3>
更改为 <h4>
,我也想通过任何方式更改结束标签以添加光标也位于结束标记处。
请帮助我,我是 vscode 中的代码新手。
您可以使用简单的脚本来完成此操作。并且 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>
您不需要特殊的键绑定,您可以启用一个设置:
Editor: Linked Editing
这样当您在一个标签内单击时,光标会添加到匹配的标签中。
(与 settings.json 中的 "editor.linkedEditing": true,
相同)