基礎中的基礎之編輯神器emmet

第 12 屆 iThome 鐵人賽

DAY 4

自我挑戰組

基礎中的基礎系列系列第 4 篇

12th鐵人賽

janlin002

2020-09-13 13:12:03

659 瀏覽

前一篇介紹到了html,也了解html開始寫<body>之前會有一大串東西要寫,實在很麻煩

那有沒有方法可以省去寫<head>的時間呢?其實是有的!下面就由我為大家介紹emmet吧!

Emmet
(前身為 Zen Coding),現在很多編輯器都已設定為預設了,如果沒有的話也沒關係,這邊我會做示範,從安裝到語法都會介紹給大家!

1.安裝:
設定(N)> Package Control> Package Control: Install Package> Emmet
或是打Ctrl + Shift + P >輸入 install>輸入 emmet 安裝即可
2.驗證是否成功:
安裝好後當然是要來看是否成功拉!
最簡單的方式就是打一個!+tab

!+tab

就會顯示以下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  
</body>
</html>

3.語法:
emmet的語法還有很多不只有!+tab,以下是我找的幾個資料,給各位去參考:
https://docs.emmet.io/cheat-sheet/
https://pjchender.blogspot.com/2016/07/emmet.html
https://alrin0000.blogspot.com/2014/05/emmet.html