安裝IDE

首先你需要安裝一款IDE。

個人推薦Node.js環(huán)境下的Sublime 3

首先阅束，讓我們打開Sublime呼胚，新建一個demo.html文件愉快的在代碼區(qū)域中輸入 ！

在Sublime中輸入`息裸！`

對蝇更，你沒看錯沪编！趕快輸入 ！吧~

然后按下快捷鍵 Ctrl + E

按下快捷鍵 `Ctrl + E`

奇跡發(fā)生了年扩！
sublime竟然自動生成了html的骨架蚁廓！
與此同時，我們愉快的前端程序猿之路也正式開始了厨幻！

安裝插件

接下來相嵌，我要給你強烈安利幾款sublime功能強大的插件。
但是况脆，在這之前我們先來學習一下如何在sublime中安裝插件饭宾。

首先，按下快捷鍵 Ctrl + Shift + P

輸入`Ctrl + Shift + P`

你會發(fā)現(xiàn)屏幕上彈出了一個下拉搜索框格了。

接著看铆，輸入INSTALL，并點擊回車

輸入`INSTALL`

輸入回車

最后重啟sublime宵荒，然后你就能正常使用該插件了。是不是非常簡單呢净嘀？沒錯报咳，這就是我向你們強烈安利sublime的原因。

重磅插件推薦

Emmet插件（官方文檔）

Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow.

Emmet的前身為 Zen Coding挖藏，如果你從事過前端相關工作暑刃，那么你對它一定不會陌生。其采用了仿CSS選擇器的語法將你輸入的代碼片段生成為完整的HTML或CSS代碼膜眠，極大的提高了代碼的編寫速度岩臣。

Emmet

一、安裝

• 輸入INSTALL宵膨，并點擊回車

輸入`INSTALL`

• 輸入Emmet架谎，并點擊Emmet Css Snippets進行安裝

點擊Emmet Css Snippets

• 點擊菜單欄>首選項>插件設置>Emmet>Settings-Default可進行相關設置

Emmet設置文檔

二、使用

Emmet的快捷鍵是Tab捎琐，有點類似于sublime自帶的智能感知会涎，但是需要在你輸入代碼片段后按下Tab來觸發(fā)裹匙。

下面我來舉一些HTML中例子：

• 首先我們還是用 ! 來舉例子，和之前沒有安裝Emmet會有什么不同嗎末秃？

輸入 `!` 概页，并按下Tab

和之前完全一樣，有木有蛔溃！不同的是我們現(xiàn)在只需要按一下Tab鍵绰沥，不需要費力地用手去夠快捷鍵了篱蝇。

• 輸入ul>li*6贺待，按下Tab

`ul>li*6`

Boom！Ａ憬亍麸塞！一個原本需要費勁的敲很久的列表標簽就生成了！

• 輸入div.foo>h1涧衙，按下Tab

`div.foo>h1`

一個class為foo哪工，并且嵌套著一個h1標簽的div標簽就這樣瞬間生成了！

• 輸入(div.foo>h1)+(div#foo>img)弧哎，按下Tab

`(div.foo>h1)+(div#foo>img)`

想想我們可以為此節(jié)省了多少時間雁比？是不是有點小激動呢？

然而Emmet的強大絕不僅限于HTML撤嫩，下面我再來舉一些CSS中的例子：

-輸入w100偎捎，按下Tab

`w100`

-輸入h75p，按下Tab

`h75p`

-輸入ov-h序攘，按下Tab

`ov-h`

是不是感覺酷斃了茴她！

由于篇幅關系，筆者在這里僅僅舉出了一些簡單的例子程奠，目的是讓讀者能對Emmet插件有個大概的認識丈牢。這個插件的優(yōu)點就是上手極快，可以充分發(fā)揮自己的想象力瞄沙，大大提高碼代碼的速度己沛。你還在等什么，快去試試吧距境！

CSSComb插件（官方文檔）

Makes your code beautiful

這款插件可以使用指定的排序方式對CSS的屬性進行排序申尼，使你的CSS代碼更加規(guī)范

一、安裝

• 輸入INSTALL肮疗，并點擊回車

輸入`INSTALL`

• 輸入CSScomb晶姊，點擊安裝

輸入`CSScomb`

• 點擊菜單欄>首選項>插件設置>CSScomb>Settings-Default，將里面的"node-path"屬性設置為你電腦上node.js的安裝路徑即可

修改路徑

• 最后一步伪货，重啟sublime

二们衙、使用

右鍵 run CSScomb 即可

使用前

使用后

效果還是很明顯的~

CSS Format插件

強大的CSS格式工具钾怔，有多種格式可供選擇

一、安裝

與上面的插件安裝步驟完全一致蒙挑，后面不再放圖

• 輸入INSTALL宗侦，并點擊回車

• 輸入CSS Format，點擊安裝

• 不需要配置路徑忆蚀，重啟sublime即可

二矾利、使用

• 右鍵 CSS Format >Expanded （注意，與CSScomb不同馋袜，不會改變CSS屬性的順序）

Expanded

• 右鍵 CSS Format >Compact

Compact

• 右鍵 CSS Format >Compressed (一行CSS代碼）

Paste_Image.png

HTML-CSS-JS Prettify插件

最后來講一講前端通吃的格式優(yōu)化插件 HTML-CSS-JS Prettify

一男旗、安裝

與上面的插件安裝步驟完全一致，后面不再放圖

• 輸入INSTALL欣鳖，并點擊回車

• 輸入CSS Format察皇，點擊安裝

• 需要配置路徑，將你電腦對應系統(tǒng)的路徑改為node.js的安裝目錄保存即可（對了泽台，在sublime中保存的快捷鍵為Ctrl + S）

路徑配置

• 最后重啟sublime即可

二什荣、使用

使用方法和前面的類似，也是右鍵選擇即可怀酷。這款插件除了能夠修改CSS的格式外稻爬，還能修改HTML與JS的格式。但需要注意蜕依，這款插件也不能改變CSS屬性的順序桅锄。

小結：筆者一口氣給大家安利了4款比較常用的插件，部分插件的功能可能存在重復笔横，但是我們可以各取所長竞滓。比如，對于CSS文件一般可以先用CSScomb調整CSS屬性的順序吹缔，然后再用CSS Format轉化為自己想要的格式商佑。對于HTML和JS文件，我們則選用HTML-CSS-JS Prettify插件厢塘。

結語

工欲善其事茶没，必先利其器。

掌握了上述IDE以及插件晚碾，那么你的前端之路想必已經有了很好的開端抓半。筆者想要告訴你的是，雖然已經有了一把得心應手的武器格嘁，但是前端學習之路才剛剛開始笛求，多動手多打怪才是提高編程能力的不二法門。加油吧！騷年探入！