简体   繁体   English

Sublime Text无法正确缩进HTML

[英]Sublime Text isn't indenting properly with HTML

Related but not identical question: Sublime Text indentation behavior . 相关但不相同的问题: Sublime Text缩进行为

I have seen many videos in which after the autocompletion of an HTML tag, pressing enter automatically results in the closing tag appearing two lines, and the cursor being properly indenting on the second line, between the opening and closing tabs. 我看过很多视频,在这些视频中,在自动完成HTML标签之后,按Enter键会自动导致关闭标签显示两行,并且光标在开始和关闭标签之间的第二行正确缩进。

In my situation, the autoindent function in Sublime Text 2 seems to be working poorly. 在我的情况下,Sublime Text 2中的自动缩进功能似乎无法正常工作。 Here is exactly what happens (as can be seen in the below gif). 这正是发生的情况(如下面的gif所示)。

升华文字2中的自动缩进问题。下面的列表描述了确切的问题。

  1. Press tab after writing tag to autocomplete the closing tag. 写入标签后按Tab键可自动完成结束标签。
  2. Press enter, which brings the closing tag one line. 按Enter键,使结束标记一行。
  3. Press enter again, which brings the closing tag onto the third line. 再次按Enter键,将结束标记置于第三行。
  4. Press the up key to get to the second line. 按向上键进入第二行。
  5. Press the tab key again, which I would expect to properly indent, but instead, it brings me to the end of the closing tag on the third line. 再次按Tab键,我希望它可以正确缩进,但是,它带我到了第三行结束标记的结尾。
  6. Press the up key again to get to the second line again. 再次按向上键再次进入第二行。
  7. Press the tab key again, which finally indents the line properly. 再次按Tab键,最终可以使行正确缩进。
  8. Continue writing more HTML. 继续编写更多HTML。

That is 7 keystrokes, which should under normal circumstances be 2 keystrokes. 即7次击键,在正常情况下应为2次击键。 This applies to every tag I use in HTML, and it is getting extremely frustrating. 这适用于我在HTML中使用的每个标记,并且变得非常令人沮丧。

Note how this only happens in HTML. 请注意,这仅在HTML中发生。 Below is a GIF of the autoindent function working properly (with only one keystroke) in CSS. 下面是自动缩进功能的GIF,它在CSS中可以正常工作(只有一次击键)。

自动缩进功能在CSS中工作得很好。点击选项卡一次将创建三行,并在第二行正确缩进光标。

I have very few, unrelated packages installed on ST2. 我在ST2上安装了很少,无关的软件包。 Here are the contents of my Settings - User file. 这是我的设置-用户文件的内容。

{
    "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
}

Why does my autoindent function in Sublime Text 2 do this? 为什么Sublime Text 2中的自动缩进功能可以做到这一点? And how can I fix it? 我该如何解决?

EDIT: @Shomz has indicated that this is how HTML indenting works by default. 编辑: @Shomz表示这是默认情况下HTML缩进的工作方式。 Is there any plugin/workaround I can use to get the desired effect? 我可以使用任何插件/解决方法来达到预期的效果吗?

Try installing the Emmet plugin, previously known as Zen Coding. 尝试安装Emmet插件,以前称为Zen Coding。 It allows you to enter HTML using a CSS selector-like syntax, so for example 它允许您使用类似CSS选择器的语法输入HTML,例如

html>body>div.main

and pressing Tab gives you 然后按Tab键

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

where the | 哪里| is the cursor position. 是光标位置。 More importantly, for your present question, just typing body Tab gives you 更重要的是,对于您当前的问题,只需输入body 选项卡即可

<body>
    |
</body>

just like you were looking for. 就像您在寻找一样。 See the Emmet docs for all the details. 有关所有详细信息,请参见Emmet文档

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM