如何在VS Code中自动缩进嵌套的HTML标记

Question

我尝试使用VS代码并使用Emmet创建一个带有类的新HTML元素。我需要在原始元素中创建另一个嵌套（子）HTML元素，但默认情况下，当您在原始元素标记内按Enter键时，VS代码将不会缩进新元素。就像你有<div class="main"></div>并且在div标签之间输入一样，你就会得到 -

<div class="main">
</div>

然后你需要手动输入一行，为新的HTML元素添加标签和缩进。

在Webstorm中，点击父标签之间的输入会自动缩进新的子元素。

这是两个显示我的意思的GIF。

VS代码 -

Webstorm -

VS代码中是否有扩展或其他技巧可以实现此功能？

Answer 1

点击 Alt + shift + f ，这会自动缩进代码。

Answer 2

下载 HTML 格式化程序扩展。 1，下载以下扩展程序之一：

• 美化
• JS-CSS-HTML 格式器

或您想要的任何其他 HTML 格式化程序。 2，在 VS Code 中，转到您正在处理的 HTML 文件之一。 3，按ALT + SHIFT + F，然后会出现一个弹出窗口。 第四 选择建议的格式化程序之一。大功告成！

每当您在 HTML 文件中按 ALT + SHIFT + F 时，它都会自动缩进和美化。

Answer 3

"emmet.useNewEmmet": true;

使用此命令启用缩进。 步骤：

1）打开“ settings.json”。

2）将此代码添加到{.....}（大括号）中。

3）如果要在最后一行的最后一行添加此代码，请确保在最后一行添加“，”（逗号）。 例如：

{
...
...
"editor.fontSize": 17,         <--comma
"emmet.useNewEmmet": true
}

4）保存。

从：https://github.com/Microsoft/vscode/issues/30790#issuecomment-317290906

Answer 4

我猜你正在寻找这个设置

console.log(b);