上週為了正式開發 HTML5 時能有一個很爽的感覺，所以搗鼓了一通機器。先是從“世界上做好的編輯器”——Vim 開始搗鼓起來，本來想通過 Vim 來開發的，不過 Vim 外掛折騰了好久都不見結果，一氣之下就改用了 Atom。Atom 果然是“全球最大男性交友社群”——GitHub 創造的產品。外掛確實很齊全，就像 Python 的第三方庫一樣的齊全。Atom 通過外掛的方式倒是聽簡單的，沒有多久就安裝了好幾個外掛。最讓我感到驚訝的當屬： Vim mode和 Emmet。前者讓我可以繼續用 Vim 的操作方式，後者則是書寫 HTML 頁面的利器啊。

Emmet 的使用

緣起

在 Emmet 外掛的

方法

原來的通過 Tab或者Ctrl+e都不管用，但是使用的方法也很簡單，只要將游標移動到要加入 HTML 元素片段處，按下Ctrl+Alt+Enter就可以喚出文字框；

而後輸入相應的語句，就會生成相應的 HTML 程式碼：

如圖中的語句就生成下面的程式碼：

<div class="list">
    <div class="item"><img src="{{item.s1}}" alt="{{item.a1}}"></div>
    <div class="item"><img src="{{item.s2}}" alt="{{item.a2}}"></div>
    <div class="item"><img src="{{item.s3}}" alt="{{item.a3}}"></div>
    <div
 
 class="item"><img src="{{item.s4}}" alt="{{item.a4}}"></div>
    <div class="item"><img src="{{item.s5}}" alt="{{item.a5}}"></div>
</div

很簡單是不是。其實 Emmet 的語法也很簡單，具體可以 Google 或者檢視這一篇部落格

授之與漁

其實這個方法是在胡亂實驗的情況下獲得的，不過實驗還是看了 Atom 中的按鍵，Atom 中的按鍵其實可以看到的，它就在 Settings 頁面裡。如圖：

其按鍵是按照字母排序的，所以還是比較好查詢的。