生活必備咖啡因程式碼-店長Yui大小事

身為一個前端工程師，一定要裝一個「省時神器」 Emmet 外掛，可以大大節省前端工程師在編寫 HTML 及 CSS 的時間。省下的時間可以讓你去體驗人生各種美好的事物，如玩玩喵星人、上上健身房運動等等。 Emmet 支援的網頁編輯器如下圖： 安裝的方式因個網頁編輯器而異，且在網路上皆可以查到，故此省略。以下小編先介紹基本的使用方式：

快速產生標籤名稱 （Tag Name）

前端工程師在寫網頁的第一步，就是在網頁編輯器中開出新的頁面，並產生標準的 HTML5 樣板。透過 Emmet，我們可以先在編輯器中輸入「!」或是「html:5」後，再按下 Ctrl+E 鍵即可。 假設我們要產生一個 p 元素，那麼我們只要直接輸入 p 後，再按下 Ctrl+E 鍵，就能自動產生起始元素及結束元素。如下所示： 只要是 HTML 所定義的元素，如 h1-h6、center、title 等等，都能使用上述方示，快速產生出相對應的語法如下 有些元素還會帶入跟該元素有關的屬性，例如：iframe、a 或是 img 等

快速產生 className 與 id

我們也可以在產生元素時，直接加上指定的 Class Name。寫法是元素名稱與 Class Name 名稱中間用英文句點隔開。例如今天我們要產生 Class Name 為「title」的 h1 標籤，則輸入「h1.title」後按 Ctrl+E 如果是要針對單一元素要加上多個 class name 的話，只要把它們用半形的句號隔開，接在一起就可以了。例如今天我們要產生 Class Name 是「news_p c1」的 div 標籤，則輸入「div.news_p.c1」後按 Ctrl+E 前端工程師省時神器 Emmet 一般預設的元素是 div，所以如果直接輸入英文句號後，寫 class name 的話，就會自己產生一個 div 元素加上指定的 class name。承上例，輸入「.news_p.c1」後按 Ctrl+E 除了 class name，我們也可以幫元素加上指定的 id。只要先打 # 號再輸入 id name 就可以。例如今天我們要產生 id 為「news_p」的 div 標籤，則輸入「#news_p」後按 Ctrl+E class name 和 id 可以同時使用，比如說今天我們要產生 class name 為「news_p c1」、id 為「paragraph-1」的 div 標籤，則輸入「.news_p.c1#paragraph-1」後按 Ctrl+E

以上介紹過個常用的 Emmet 標籤快捷縮寫方式，更多的元素縮寫方式都可在 Emmet 官方文件中找到：Emmet cheat sheet  

 

推薦閱讀:

前端工程師不藏私大公開(一):怎麼運用Media Query?

前端工程師不藏私大公開(二):關於Media Queries

前端工程師不藏私大公開(三):怎麼運用or.and.only?

神奇的Java課程-竟可讓人從零經驗到成為工程師不用一年!!?

達內教育評價-故事背後事實的真相甚麼是這樣?!

暑假快到了！與其讓兒子盲目拚學測，我寧可讓他先選擇人生方向~

擠進高薪科技大門-Java課程等你來瞭解!