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

Question

我正在尝试使用VS Code，我使用Emmet创建了一个带类的新HTML元素。我需要在原始元素内创建另一个嵌套（子）HTML元素，但默认情况下，当您在原始元素标记内按回车键时，VS Code不会为新元素缩进。例如，如果您有<div class="main"></div>并且在div标记之间按回车键，则会得到 -

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

然后您需要手动向上移动一行，添加制表符并缩进新的HTML元素。

在Webstorm中，在父标记之间按Enter键会自动缩进新的子元素。

这里有两个GIF演示了我的意思。

VS Code -

Webstorm -

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

- Manish Giri

Answer 1

我猜你是在寻找这个设置

{
   ...
   "html.format.indentInnerHtml": true,
   ...
}

- Sebastian Chang

Answer 2

下载一个 HTML 格式化扩展。首先，下载以下其中之一的扩展：

• Beautify
• JS-CSS-HTML Formatter

或者你想要的任何其他 HTML 格式化工具。其次，在 VS Code 中打开你正在处理的 HTML 文件。然后，按下 ALT + SHIFT + F 快捷键，然后会弹出一个窗口。接着，选择其中一个建议的格式化工具。完成了！

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

- A Farmanbar

---

如果你必须按alt+shift+f才能完成，你真的可以称之为自动吗？ - spinkus

@spinkus，不是真的，我也不建议使用真正的自动格式化程序，因为它会在VSCode中造成太多的开销，因为它应该不断检查HTML文档的内容。 - A Farmanbar

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

- Saad Saiyed

---

它不工作 - Lisan E

@LisanE，你能否提供更多关于你实现了什么以及你得到了什么结果的信息？ - Saad Saiyed