Sublime Text3—常用外掛Emmet

easyblue發表於2017-09-21

摘要

安裝請看上一篇Sublime Text—安裝，和sublime自帶快捷鍵一起用，寫html簡直快的飛起。

下面整理的是常用的，完整的可看emmet官方文件。

一、生成標籤

1.快速生成文件結構

  • !或html:5，快速生成 HTML5 結構(都需要再按tab鍵)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>複製程式碼

  • html:xt 生成 HTML4 過渡型

  • html:4s 生成 HTML4 嚴格型


2.生成帶 id 的元素

標籤 # ID名，如：div#header

<div id="header"></div>複製程式碼


3.生成帶 class 的元素

標籤 . 類名，如：div.title

<div class="title"></div>複製程式碼


4.生成後代元素：>

如：nav>ul>li

<nav>
    <ul>
        <li></li>
    </ul>
</nav>複製程式碼


5.生成兄弟元素：+

如：div+p+div

<div></div>
<p></p>
<div></div>複製程式碼


6.生成上級元素：^

如：p^div

<p></p>
<div></div>複製程式碼


7.重複生成多個元素：*

如：ul>li*5

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>複製程式碼


8.生成帶自定義屬性：[attr]

如：div[value=1]

<div value="1"></div>複製程式碼


9.生成帶文字內容：{}

如：a{Click me}

<a href="">Click me</a>複製程式碼


10.加編號：$

  • 從1開始：加$

如：div.item${$$}*3

<div class="item1">01</div>
<div class="item2">02</div>
<div class="item3">03</div>複製程式碼
  • 倒序： $ 後面增加 @-

如：div.item$@-{$$@-}*3

<div class="item3">03</div>
<div class="item2">02</div>
<div class="item1">01</div>複製程式碼
  • 指定序號：可以使用 @N

如：div.item$@4{$$@4}*3

<div class="item4">04</div>
<div class="item5">05</div>
<div class="item6">06</div>複製程式碼


11.分組：()

如：(ul>ol)*3

<ul>
    <ol></ol>
</ul>
<ul>
    <ol></ol>
</ul>
<ul>
    <ol></ol>
</ul>複製程式碼


12.來個綜合案例

table#tab[value=1].a>tr*3>(td{$$}>span)*3

<table id="tab" value="1" class="a">
    <tr>
        <td>01<span></span></td>
        <td>02<span></span></td>
        <td>03<span></span></td>
    </tr>
    <tr>
        <td>01<span></span></td>
        <td>02<span></span></td>
        <td>03<span></span></td>
    </tr>
    <tr>
        <td>01<span></span></td>
        <td>02<span></span></td>
        <td>03<span></span></td>
    </tr>
</table>複製程式碼


二、生成css

css樣式多，縮寫自然也很多，列舉常用的舉一反三即可。

其中css縮寫是採用模糊搜尋匹配的，比如ov:h == ov-h == ovh == oh。

  • w10 width: 10px; w10p width: 10%; w10e width: 10em; w10x width: 10xe;
  • h10 height: 10px;
  • por position: relative; poa position: absolute;
  • fll float: left; fr float: right;
  • dt display: table; db display: block; dib display: inline-block;
  • ovy overflow-y: hidden;
  • cb clear: both;
  • mt margin-top: ; mb margin-bottom: ;
  • pt padding-top: ; pb padding-bottom: ;
  • tac text-align: center;
  • lh line-height:;
  • tsn text-shadow: none;
  • tja text-justify: auto;
  • c color: #000; cr color: rgb(0, 0, 0); cra color: rgba(0, 0, 0, .5);
  • op opacity: ;
  • cnt content: '';
  • ol outline: ;
  • bd+ border: 1px solid #000; bdb+ border-bottom: 1px solid #000;
  • bd2px#333s border: 2px #333 solid;


三、快捷鍵

如果沒作用請檢查快捷鍵是否衝突

  • 快速生成包裹標籤：Ctrl+Shift+G

只有文字沒有結構時，如下

首頁
簡介
動態複製程式碼

選中文字按快捷鍵Ctrl+Shift+G，再彈出的：Enter Wrap Abbreviation（輸入擴充套件縮寫）中輸入nav>ul>li.item$*>a就會生成

<nav>
    <ul>
        <li class="item1"><a href="">首頁</a></li>
        <li class="item2"><a href="">簡介</a></li>
        <li class="item3"><a href="">動態</a></li>
    </ul>
</nav>複製程式碼

如果原先的文字帶編號，不想要則可以在上面的基礎上加|t,nav>ul>li.item$*>a|t即可生成如上結果。

1首頁
2簡介
3動態複製程式碼
  • 自動新增/更新圖片尺寸：ctrl+U

游標移到標籤上的任意位置，按下快捷鍵ctrl+U即可。

<img src="img/x1.png" />
<img src="img/x1.png" width="100" height="200" />複製程式碼

  • 刪除標籤：shift+ctrl+;

  • 定位到上個編輯點：ctrl+alt+left

  • 定位到下個編輯點：ctrl+alt+right

  • 選中下一項：shift+ctrl+.

  • 加/減1：ctrl+up/ctrl+down

  • 加/減10：shift+alt+up/shift+alt+down

  • 展開縮寫：ctrl+e（和tab鍵作用相同）

  • 重新命名標籤(rename_tag)：ctrl+shift+'

  • 更換標籤(update_as_you_type)：ctrl+Shift+U

  • 匹配標籤對：ctrl+alt+j


四、生成測試文字

輸入lorem再按tab會隨機生成一段英文，預設是生成30個單詞，可以加上數字控制單詞數量，如lorem5。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis incidunt, expedita voluptates ratione praesentium error a accusamus corporis deleniti. Cum, debitis id, in rem exercitationem at voluptatum illum minima corporis!複製程式碼
Lorem ipsum dolor sit amet.複製程式碼


2017.09.18補充內容

如上輸入lorem再按tab擴充套件的程式碼是已經設定好的，sublime還提供自定義程式碼片段的功能，詳細內容請移步Sublime Text3—自定義程式碼片段(Code Snippets)。

參考

emmet官方文件

掘金：Sublime Text3—常用外掛Emmet
簡書：Sublime Text3—常用外掛Emmet
部落格園：Sublime Text3—常用外掛Emmet

相關文章