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

相关文章