總所周知,在開發過程中html介面最煩的就是'<>'與'<></>',有時候稍微不小心少打了個'>'專案就開始罷工,開始不跑;為了提高效率也為了減少不必要的錯誤影響開發心情,所以jade應運而生,jade在github上開源(https://github.com/pugjs/pug)受到了一眾web開發者的喜愛,後來因為版權問題,jade更名為pug;

pug編碼風格簡單,可複用性高,加快了程式設計師寫程式碼的速度,但對於初學者來說,pug的程式碼可能不如html來的易讀,下面進入正題,pug是為了簡化html而生,當然首要前提就是相容html,在webstorm中提供了相關的轉化方法.

首先開啟webStorm,在webStorm中進行設定,

 安裝pug外掛,然後同樣在設定介面,選擇TOOl功能下的file watch,配置屬性,

按下圖所示進行屬性配置:

完成後點選ok,回到專案主介面,在Views資料夾下新建jade檔案,可以看到新建的資料夾下有一個html檔案

開啟新建的jade檔案與html檔案右鍵任一檔案的右鍵,選擇分屏(左右上下隨意),可以看到如圖所示,pug與html是實時編譯的,既提高了效率又不影響閱讀.

至此,就可以愉快的寫程式碼了