前端工程師外掛神器, 縮短你爆肝的時間! 本篇為教學文第三篇-複製元素與設定流水編號

複製元素
當前端工程師要產生 ol 或是 ul 清單標籤時,都會包含一拖拉庫的 li 元素。如果要一個一個慢慢手動輸入的話,就算是使用 Emmet 的「+」快捷輸入法,還是會花去不少時間。還好 Emmet 有複製的快捷輸入法:「*」。用法是:如果想要一次產生 5 個相同的元素的話,就在原宿後方輸入「*5」。由此類推,產生 7 個就是「*7」。假使我們今天要建立一個 ul 清單標籤,包含 5 個 li 元素,語法就可以這樣寫「ul>li*5」之後再按 ctrl+E 即可。


編號
有時候前端工程師在輸入HTML 的li 標籤時,會給這些 li 一個共用的 .className 以及流水編號。若搭配 Emmet 的「$」時,就可以快速的產生。例如,今天我們要輸入五個 li 標籤,標籤的 class name 分別為 list-1、list-2、list-3、list-4、list-5,則輸入「li.list-$*5」


設定起始編號
$的用法,預設數字是從 1 開始累加。有時前端工程師會需要指定起始數字,這時則在HTML的$ 後面多補上一個 @ 並加上指定的起始數字,承上例,我們要設定起始數字為 5 就輸入「li.list-$$@5*5」


延伸閱讀:
前端工程師省時神器Emmet使用教學(四)顯示文字與自訂屬性
暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~
神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?