Sublime Text 2 安裝emmet插件和經常使用快捷鍵

時間 2019-11-13

標籤 sublime text 安裝 emmet 插件和經常使快捷鍵欄目 HTML 简体版

原文原文鏈接

1、先安裝package control
一、按Ctrl+`調出console，輸入如下命令而後回車
css

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'

二、安裝成功後顯示：Please restart Sublime Text to finish installation 重啓

2、使用package control 安裝emmet
一、按ctrl+shift+p,調出控制檯
二、輸入install，選擇install package
三、彈出列表以後，在輸入框中輸入emmet，而後選擇emmet插件進行安裝。
安裝過程當中會有介紹文件打開，安裝結束後會有成功提醒。

3、測試安裝是否成功，輸入如下命令
html

<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>

其餘快捷方式：
java

輸入html:5，按Tab或Ctrl+E鍵，看看發生了什麼；
輸入a，一樣按Tab或Ctrl+E鍵，看看發生了什麼；
輸入div+p+bq

官方參考手冊：http://docs.emmet.io/ 測試

經常使用快捷鍵：
一、多個重複對象，用*，如li*3
若是是重複多個對象，能夠用括號，把不一樣的對照組合成一個總體，好比table下面有多個tr，tr下面又有多個td，輸入：tbody>(tr>td*4)*2，按tab，效果以下
ui

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

二、多個class賦給同一個對象，直接連着寫就能夠了,如 .class1.class2