如何快速的編寫前端程式碼？（高效率編寫前端程式碼的辦法）

如果你是一個web前端高手，那麼可以跳過這篇文章，因為你可能有更好的方法，非要看那就當一個笑話看看就好了。假如你是小白新手，那麼一起來跟我閱讀下面這篇文章吧，它主要講述瞭如何快速的編寫前端程式碼的方法。

高效率編寫前端程式碼的辦法如下

一、選擇一個好的編輯器

這裡我只推薦一個那就是WebStorm，之前我一直用的是sublime_text3，我以為那是最好用的了。用了WebStorm之後我覺得它才是現在世界最好的。如果有條件的小夥伴記得支援正版，雖然很貴。

二、WebStorm配置SASS

配置SASS首先要安裝一個東西名字叫Ruby，下載解壓點選 Next，繼續嚮導，勾選 Add Ruby executables to your PATH即可，不會安裝的百度一下Ruby安裝教程。好了之後開啟WebStorm點選設定->工具->file wather點選加號新增一個SASS配置。如下圖所示即可

sass

SASS的寫法絕對讓你效率提升一大半，如下圖所示，不用再重複寫父命名，不用重複寫括號，最最最重要它支援變數。

三、多屏顯示

一個螢幕顯示前端編輯器，一個螢幕顯示正在編輯的頁面，再配一個小點的筆記本用來搜尋解決前端問題。這種搭配非常完美，但需要大量金錢去支援。但以我多年的經驗告訴大家，這絕對讓你編寫前端的速度快三分之一。

切屏看效果真的太麻煩了，高手都懂的，我這裡就不配圖了。

四、用谷歌瀏覽器配合Emmet LiveStyle,這絕對是編寫pc前端的大殺器。

Emmet LiveStyle是什麼？類似於用webpack的熱重新整理。就是你寫的css或html改變了，頁面就會自動重新整理，這要是配合多屏是多麼的方便啊，真的可以把垃圾的F5鍵扣掉了，遍寫遍看效果，那感覺太棒了。

以上四點便是讓你高效率編寫前端程式碼的辦法，如果你還為如何快速的編寫前端程式碼而煩惱就快來看看吧。