Snippets

Div Tag Snippets for TextMate

Div tags are nasty. I always end up with trying to find which </div> corresponds to which <div>. One thing I try to do is to keep the consistent indention even when the tags are generated automatically by templates of web frameworks. If you don’t like this messy nature of HTML, you might want to try HAML, a drop-in replacement for Ruby(ERB) for Rails.

A convention I try to keep at least for my own projects is to have a HTML comment after the close tag as in </div> <!-- end #id .class -->. I have made the TextMate snippets for them, which I would like to share with you.

There are four snippets. <div id="">, <div class="">, <div id="" class="">, <div class="" id="">. You first tab and fill in id and/or class. After presseing the tab again, the comment part is highlighted, it gives you a chance to delete the whole comment.

# <div id=""> snippet for TextMate
# Activation: Tab Trigger: divi
# Scope Selector: text.html
<div id="$1">
  $0
</div> ${2:<!-- end #$1 -->}


# <div id="" class=""> snippet for TextMate
# Activation: Tab Trigger: divic
# Scope Selector: text.html
<div id="$1" class="$2">
  $0
</div> ${3:<!-- end #$1 .$2-->}


# <div class="" id=""> snippet for TextMate
# Activation: Tab Trigger: divci
# Scope Selector: text.html
<div id="$1" class="$2">
  $0
</div> ${3:<!-- end #$1 .$2 -->}

# <div class=""> snippet for TextMate
# Activation: Tab Trigger: divc
# Scope Selector: text.html
<div class="$1">
  $0
</div> ${2:<!-- end .$1 -->}

Tweak them as you want to, and enjoy coding.

Syndicate content