CODEWITHSUNDEEP
sublimetext2
juuga
juuga

Reputation: 1314

How do I change tab behavior when writing HTML markup?

I have Sublime Text 2. When I begin typing <d a dropdown suggests autocomplete for . Hitting enter will complete the tag and even add the ending tag </div> and place the cursor between the tags. Perfect. If I hit enter again twice, I get this setup:

<div>

|</div>

But now when I go up one row to the blank row in between and hit tab, instead of indenting on the line between the tags, the cursor jumps to the end of </div>.

What I can do is hit enter once when I have <div>|</div> and then hit left to return to the end of <div>and enter again to go to a new auto-indented line.

How do I get this auto-indentation behavior to work when hitting enter in the <div>|</div> situation?

Upvotes: 2

Views: 228

Answers (1)

Pier
Pier

Reputation: 10827

The problem you are having is that when pressing tab your are moving to the next tab stop in the snippet. That is the expected behaviour.

Snippets are tools for helping you write code faster. Those snippets can have multiple cursor positions called tab stops. You move between those positions by hitting tab. So when you hit enter to create those lines, and then tab, you are moving the the next tab stop in that particular snippet.

Sublime Text allows for deep customisation. You could change your auto indent settings, or create your own snippet.

This snippet should do what you are after. Save this as div.sublime-snippet into your User folder (in the packages folder accessed from Preference > Browse Packages) .

<snippet>
    <content><![CDATA[
<div>
    $1
</div>$0
]]></content>
    <tabTrigger>div</tabTrigger>
    <scope>source.html</scope>
    <description>My own div snippet</description>
</snippet>

After doing this, you will have a new option in that dropdown auto complete menu. Usually you will only have to write div then press tab and voila.

Upvotes: 1

Related Questions