CODEWITHSUNDEEP
htmlsublimetext2indentationauto-indent
LanceLafontaine
LanceLafontaine

Reputation: 6010

Sublime Text isn't indenting properly with HTML

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).

autoindenting problem in sublime text 2. The following list describes the exact problem.

  1. Press tab after writing tag to autocomplete the closing tag.
  2. Press enter, which brings the closing tag one line.
  3. Press enter again, which brings the closing tag onto the third line.
  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.
  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.
  8. 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.

autoindent function working perfectly fine in css. hitting tab once creates three lines, with the cursor properly indented on the second line.

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?

Upvotes: 1

Views: 1346

Answers (1)

MattDMo
MattDMo

Reputation: 102842

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 bodyTab gives you

<body>
    |
</body>

just like you were looking for. See the Emmet docs for all the details.

Upvotes: 1

Related Questions