Sublime Text isn't indenting properly with HTML
Question
Related but not identical question: Sublime Text indentation behavior .
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.
In my situation, the autoindent function in Sublime Text 2 seems to be working poorly. Here is exactly what happens (as can be seen in the below gif).
- Press tab after writing tag to autocomplete the closing tag.
- Press enter, which brings the closing tag one line.
- Press enter again, which brings the closing tag onto the third line.
- Press the up key to get to the second line.
- 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.
- Press the up key again to get to the second line again.
- Press the tab key again, which finally indents the line properly.
- Continue writing more HTML.
That is 7 keystrokes, which should under normal circumstances be 2 keystrokes. This applies to every tag I use in HTML, and it is getting extremely frustrating.
Note how this only happens in HTML. Below is a GIF of the autoindent function working properly (with only one keystroke) in CSS.
I have very few, unrelated packages installed on 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? And how can I fix it?
EDIT: @Shomz has indicated that this is how HTML indenting works by default. Is there any plugin/workaround I can use to get the desired effect?
1 answers
solution1
1 ACCPTED 2014-09-09 15:11:03
Try installing the Emmet plugin, previously known as Zen Coding. It allows you to enter HTML using a CSS selector-like syntax, so for example
html>body>div.main
and pressing Tab gives you
<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>
just like you were looking for. See the Emmet docs for all the details.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.