Sublime Text 2 安装emmet插件和常用快捷键

时间:2024-01-09 14:28:02

一、先安装package control
1、按Ctrl+`调出console,输入以下命令然后回车

import urllib2,os; 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())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

2、安装成功后显示:Please restart Sublime Text to finish installation 重启

二、使用package control 安装emmet
1、按ctrl+shift+p,调出控制台
2、输入install,选择install package
3、弹出列表之后,在输入框中输入emmet,然后选择emmet插件进行安装。
    安装过程中会有介绍文件打开,安装结束后会有成功提醒。

三、测试安装是否成功,输入以下命令

<html>
div#cc>div.css>ul>li*4>a:link
</html>

按tab键,如果安装成功的话会出现以下代码,其中div可以省略,如果id或者class前面没有标签,默认就是div

<html>
<div id="cc">
<div class="css">
<ul>
<li><a href="http://"></a></li>
<li><a href="http://"></a></li>
<li><a href="http://"></a></li>
<li><a href="http://"></a></li>
</ul>
</div>
</div>
</html>

其他快捷方式:

  • 输入html:5,按Tab或Ctrl+E键,看看发生了什么;
  • 输入a,同样按Tab或Ctrl+E键,看看发生了什么;
  • 输入div+p+bq

官方参考手册:http://docs.emmet.io/

常用快捷键:
1、多个重复对象,用*,如li*3
    如果是重复多个对象,可以用括号,把不同的对照组合成一个整体,比如table下面有多个tr,tr下面又有多个td,输入:tbody>(tr>td*4)*2,按tab,效果如下

<tbody>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</tbody>

2、多个class赋给同一个对象,直接连着写就可以了,如 .class1.class2