CODEWITHSUNDEEP
htmlcsssublimetext2shortcut
Paul_S
Paul_S

Reputation: 141

Shortcut for adding id="" and class="" to HTML tags in Sublime Text 2

How do you set up Sublime Text 2 so that typing a . (period) produces class=" " and # (hash) produces id=" " when typing an opening HTML tag?

Upvotes: 7

Views: 18067

Answers (5)

Akron
Akron

Reputation: 1

In ST3 you can use the following:

foo.class[tab]

foo#id[tab]

For example:

div.row[tab]

Result:

<div class="row">|</div>

Upvotes: 0

appu
appu

Reputation: 481

I am using ST3 but "auto_id_class": true, (@Paul_S answer) did not work for me. Instead I created a custom snippet quickly. Check out snippet below. Note: the scope <scope>meta.tag.other.html, meta.tag.block.any.html, meta.tag.inline.any.html</scope> could be better/further refined but since it worked for me so didn't bother researching further.

ID

<snippet>
    <content><![CDATA[
id="${1}"
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>#</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>meta.tag.other.html, meta.tag.block.any.html, meta.tag.inline.any.html</scope>
</snippet>

Class

<snippet>
    <content><![CDATA[
class="${1}"
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>.</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>meta.tag.other.html, meta.tag.block.any.html, meta.tag.inline.any.html</scope>
</snippet>

Thanks

Upvotes: 0

Ir Calif
Ir Calif

Reputation: 478

Type foo.bar, press Tab, and you'll get 

<foo class="bar"></foo>

There's also foo#bar (for id instead of class). Both are implemented in Packages/HTML/html_completions.py

Upvotes: 10

Paul_S
Paul_S

Reputation: 141

I found the answer. Go to: Preferences -> Setting -> User.

add the following text between the curly braces, then save the file:

"auto_id_class": true,

this allows you to add id=" " and class=" " into HTML tags quickly, just by typing a # or .

If you use sublime text it's a nice feature.

Upvotes: 7

Taylor C
Taylor C

Reputation: 368

Check out http://emmet.io/, its a plugin for sublime that helps with html and css.

For example:

.class

becomes

<div class="class"></div>

More examples can be found here,

Upvotes: 5

Related Questions