安裝IDE
首先你需要安裝一款IDE。
個人推薦Node.js環境下的Sublime 3
首先，讓我們開啟Sublime，新建一個demo.html檔案愉快的在程式碼區域中輸入 ！
對，你沒看錯！趕快輸入 ！吧~
然後按下快捷鍵 Ctrl + E
奇蹟發生了！
sublime竟然自動生成了html的骨架！
與此同時，我們愉快的前端程式猿之路也正式開始了！
安裝外掛
接下來，我要給你強烈安利幾款sublime功能強大的外掛。
但是，在這之前我們先來學習一下如何在sublime中安裝外掛。
首先，按下快捷鍵 Ctrl + Shift + P
你會發現螢幕上彈出了一個下拉搜尋框。
接著，輸入INSTALL，並點選回車
這樣就會彈出可安裝外掛的搜尋框，然後你就可以愉快地在搜尋框裡輸入你想要安裝的外掛並敲下回車進行安裝了。（外掛安裝時間非常短，可以在sublime的左下角看到短暫的安裝資訊。等外掛安裝完成之後一般就會彈出外掛的說明文字。注：部分外掛需要配置node.js的路徑。下面會就具體外掛進行舉例。）
最後重啟sublime，然後你就能正常使用該外掛了。是不是非常簡單呢？沒錯，這就是我向你們強烈安利sublime的原因。
重磅外掛推薦
Emmet外掛（官方文件）
Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow.
Emmet的前身為 Zen Coding，如果你從事過前端相關工作，那麼你對它一定不會陌生。其採用了仿CSS選擇器的語法將你輸入的程式碼片段生成為完整的HTML或CSS程式碼，極大的提高了程式碼的編寫速度。
一、安裝
- 輸入
INSTALL，並點選回車
- 輸入
Emmet，並點選Emmet Css Snippets進行安裝
- 點選
選單欄>首選項>外掛設定>Emmet>Settings-Default可進行相關設定
正常情況下，該外掛不需要配置路徑，只需重啟sublime即可使用。
二、使用
Emmet的快捷鍵是Tab，有點類似於sublime自帶的智慧感知，但是需要在你輸入程式碼片段後按下Tab來觸發。
下面我來舉一些HTML中例子：
- 首先我們還是用
!來舉例子，和之前沒有安裝Emmet會有什麼不同嗎？
和之前完全一樣，有木有！不同的是我們現在只需要按一下Tab鍵，不需要費力地用手去夠快捷鍵了。
- 輸入
ul>li*6，按下Tab
Boom！！！一個原本需要費勁的敲很久的列表標籤就生成了！
- 輸入
div.foo>h1，按下Tab
一個class為foo，並且巢狀著一個h1標籤的div標籤就這樣瞬間生成了！
- 輸入
(div.foo>h1)+(div#foo>img)，按下Tab
想想我們可以為此節省了多少時間？是不是有點小激動呢？
然而Emmet的強大絕不僅限於HTML，下面我再來舉一些CSS中的例子：
-輸入w100，按下Tab
-輸入h75p，按下Tab
-輸入ov-h，按下Tab
是不是感覺酷斃了！
由於篇幅關係，筆者在這裡僅僅舉出了一些簡單的例子，目的是讓讀者能對Emmet外掛有個大概的認識。這個外掛的優點就是上手極快，可以充分發揮自己的想象力，大大提高碼程式碼的速度。你還在等什麼，快去試試吧！
CSSComb外掛（官方文件）
Makes your code beautiful
這款外掛可以使用指定的排序方式對CSS的屬性進行排序，使你的CSS程式碼更加規範
一、安裝
- 輸入
INSTALL，並點選回車
- 輸入
CSScomb，點選安裝
- 點選
選單欄>首選項>外掛設定>CSScomb>Settings-Default，將裡面的"node-path"屬性設定為你電腦上node.js的安裝路徑即可
- 最後一步，重啟sublime
二、使用
右鍵 run CSScomb 即可
效果還是很明顯的~
CSS Format外掛
強大的CSS格式工具，有多種格式可供選擇
一、安裝
與上面的外掛安裝步驟完全一致，後面不再放圖
輸入
INSTALL，並點選回車輸入
CSS Format，點選安裝不需要配置路徑，重啟sublime即可
二、使用
- 右鍵 CSS Format >Expanded （注意，與CSScomb不同，不會改變CSS屬性的順序）
- 右鍵 CSS Format >Compact
- 右鍵 CSS Format >Compressed (一行CSS程式碼）
HTML-CSS-JS Prettify外掛
最後來講一講前端通吃的格式優化外掛 HTML-CSS-JS Prettify
一、安裝
與上面的外掛安裝步驟完全一致，後面不再放圖
輸入
INSTALL，並點選回車輸入
CSS Format，點選安裝需要配置路徑，將你電腦對應系統的路徑改為node.js的安裝目錄儲存即可（對了，在sublime中儲存的快捷鍵為
Ctrl + S）
- 最後重啟sublime即可
二、使用
使用方法和前面的類似，也是右鍵選擇即可。這款外掛除了能夠修改CSS的格式外，還能修改HTML與JS的格式。但需要注意，這款外掛也不能改變CSS屬性的順序。
小結：筆者一口氣給大家安利了4款比較常用的外掛，部分外掛的功能可能存在重複，但是我們可以各取所長。比如，對於CSS檔案一般可以先用CSScomb調整CSS屬性的順序，然後再用CSS Format轉化為自己想要的格式。對於HTML和JS檔案，我們則選用HTML-CSS-JS Prettify外掛。
結語
工欲善其事，必先利其器。
掌握了上述IDE以及外掛，那麼你的前端之路想必已經有了很好的開端。筆者想要告訴你的是，雖然已經有了一把得心應手的武器，但是前端學習之路才剛剛開始，多動手多打怪才是提高程式設計能力的不二法門。加油吧！騷年！
關於為什麼不用WS
vue專案的建立者尤大,自己寫了個sublime下語法高亮的外掛vue-syntax-highlight，有人問他how about webstorm support?他是這麼回答的。
作為尤大大的忠實粉絲（前端小白）。。。你懂的。。
ps. 好吧我必須承認寫這篇文章的時候我還完全不知道有WS這東西。。。