sublime text之效率超高的Emmet

原来一直经常使用webstrom，后来电脑配置跟不上了开始捣鼓sublime text3，整理下笔记。

装了Sublime text3肯定是要安装插件的，插件的配置都是用config文件配置的，不像其他软件是设置选项，本文介绍的是Emmet，以前叫zen coding，这伙非常强大，大大提升了写html的效率。

安装方法

• 首先安装package control
• 按Ctrl+`调出sublime text的console
• 粘贴以下代码到底部命令行并回车：

Sublime Text 2:

import urllib2,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

Sublime Text 3:

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

• 重启Sublime Text
• 在Perferences->package settings中看到package control，则表示安装成功

二、手动安装

• 可能由于各种原因，无法使用代码安装，那可以通过以下步骤手动安装Package Control：
• 1.点击Preferences > Browse Packages菜单
• 2.进入打开的目录的上层目录，然后再进入Installed Packages/目录
• 3.下载Package Control.sublime-package并复制到Installed Packages/目录
• 4.重启Sublime Text。
• 安装emmet
• 按Ctrl+Shift+P命令板
• 输入install然后选择install Package，然后输入emmet找到 Emmet Css
  Snippets，点击就可以自动完成安装。

使用方法

emmet的热键是Tab，直接在编辑器中输入HTML或CSS的代码的缩写，然后按tab键就可以拓展为完整的代码片段。如果有冲突的话也可以在设置中调整~

temmet的语法也很简单，打多说都是标签么，我们需要熟悉的也就是几个嵌套方法

后代：>

缩写：nav>ul>li

<nav>
    <ul>
        <li></li>
    </ul>
</nav>

兄弟：+

缩写：div+p+bq

<div></div>
<p></p>
<blockquote></blockquote>

上级：^

缩写：div+div>p>span+em^bq

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

分组：()

缩写：div>(header>ul>li*2>a)+footer>p

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

乘法：*

缩写：ul>li*5

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

自增符号：$

缩写：ul>li.item$*5

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>