Sublime Text 没有使用 HTML 正确缩进答案

【问题标题】：Sublime Text isn't indenting properly with HTMLSublime Text 没有使用 HTML 正确缩进
【发布时间】：2014-09-09 15:02:17
【问题描述】：

相关但不相同的问题：Sublime Text indentation behavior。

我看过很多视频，其中在自动完成 HTML 标记后，按 Enter 会自动导致结束标记出现两行，并且光标在第二行上正确缩进，在开始和结束选项卡之间。

在我的情况下，Sublime Text 2 中的自动缩进功能似乎运行不佳。这正是发生的事情（如下图所示）。

写完标签后按Tab键自动补全结束标签。
按回车键，结束标记增加一行。
再次按 Enter 键，结束标记将出现在第三行。
按向上键进入第二行。
再次按 Tab 键，我希望它会正确缩进，但相反，它会将我带到第三行结束标记的末尾。
再次按向上键可再次进入第二行。
再次按 Tab 键，该行终于正确缩进了。
继续编写更多 HTML。

也就是7次击键，正常情况下应该是2次击键。这适用于我在 HTML 中使用的每个标签，而且非常令人沮丧。

请注意这仅在 HTML 中发生。下面是 CSS 中自动缩进功能正常工作的 GIF（只需一次按键）。

我在 ST2 上安装了很少的不相关的软件包。这是我的Settings - User文件的内容。

{
    "color_scheme": "Packages/Theme - Spacegray/base16-ocean.dark.tmTheme",
    "ignored_packages":
    [
        "Vintage"
    ],
    "theme": "Spacegray.sublime-theme",
    "margin": 0,
    "fold_buttons": false,
    "draw_minimap_border": true,
    "auto_complete_commit_on_tab": false
}

为什么我在 Sublime Text 2 中的自动缩进功能会这样做？我该如何解决？

编辑： @Shomz 表示这是默认情况下 HTML 缩进的工作方式。我可以使用任何插件/解决方法来获得所需的效果吗？

【问题讨论】：

你启用了 auto_indent 和 smart_indent 吗？
Sublime 的强大之处在于它的可定制性，您可以轻松创建自己的自动补全规则或尝试找到一个好的插件。或者您可以等待有人在这里发布。但是，是的，这就是它在默认情况下对 HTML 的工作方式。
@emzy smart_indent 和 auto_indent 都是默认开启的，我没有在我的用户设置中更改它们。
@Shomz 感谢您的意见。默认情况下看起来有点荒谬......希望得到插件推荐。谢谢。

标签： html sublimetext2 indentation auto-indent

【解决方案1】：

尝试安装 Emmet 插件，以前称为 Zen Coding。它允许您使用类似 CSS 选择器的语法输入 HTML，例如

html>body>div.main

然后按 Tab 给你

<html>
<body>
    <div class="main">|</div>
</body>
</html>

| 是光标位置。更重要的是，对于您当前的问题，只需键入 bodyTab 即可

<body>
    |
</body>

就像您正在寻找的那样。有关所有详细信息，请参阅Emmet docs。

【讨论】：

我之前知道 Emmet，但没有意识到它可以解决我“正常”编写 HTML 时的缩进问题。这很好用，谢谢。
@LanceLafontaine 是的，默认的 HTML 包（如许多默认的 Sublime 包）存在一些问题，并且在 HTML5 方面有点过时。 Emmet 在真正强大的表达式方面有一些学习曲线（例如，尝试#page>div.logo+ul#navigation>li*5>a{Item $}），但是一旦你习惯了它，它就会有很大的帮助。