在 Sublime Text 2 中将 id="" 和 class="" 添加到 HTML 标签的快捷方式

Question

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?

Answer 1

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

Answer 2

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.

Answer 3

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 ,

Answer 4

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