前端學習【工具篇】——工欲善其事，必先利其器

時間 2019-11-16

標籤前端學習工具篇工欲善其事必先利其器简体版

原文原文鏈接

安裝IDE

首先你須要安裝一款IDE。css

我的推薦Node.js環境下的Sublime 3html

首先，讓咱們打開Sublime，新建一個demo.html文件愉快的在代碼區域中輸入 ！前端

對，你沒看錯！趕快輸入 ！吧~ vue

而後按下快捷鍵 Ctrl + E
node

奇蹟發生了！
sublime居然自動生成了html的骨架！
與此同時，咱們愉快的前端程序猿之路也正式開始了！git

安裝插件

接下來，我要給你強烈安利幾款sublime功能強大的插件。
可是，在這以前咱們先來學習一下如何在sublime中安裝插件。github

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

你會發現屏幕上彈出了一個下拉搜索框。

接着，輸入INSTALL，並點擊回車編程

這樣就會彈出可安裝插件的搜索框，而後你就能夠愉快地在搜索框裏輸入你想要安裝的插件並敲下回車進行安裝了。（插件安裝時間很是短，能夠在sublime的左下角看到短暫的安裝信息。等插件安裝完成以後通常就會彈出插件的說明文本。注：部分插件須要 配置node.js的路徑。下面會就具體插件進行舉例。）

最後重啓sublime，而後你就能正常使用該插件了。是否是很是簡單呢？沒錯，這就是我向大家強烈安利sublime的緣由。webstorm

重磅插件推薦

Emmet插件（官方文檔）

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

Emmet的前身爲 Zen Coding，若是你從事過前端相關工做，那麼你對它必定不會陌生。其採用了仿CSS選擇器的語法將你輸入的代碼片斷生成爲完整的HTML或CSS代碼，極大的提升了代碼的編寫速度。

1、安裝

輸入INSTALL，並點擊回車

輸入Emmet，並點擊Emmet Css Snippets進行安裝

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

正常狀況下，該插件不須要配置路徑，只需 重啓sublime便可使用。

2、使用

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代碼更加規範

1、安裝

輸入INSTALL，並點擊回車

輸入CSScomb，點擊安裝

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

最後一步，重啓sublime

2、使用

右鍵 run CSScomb 便可

效果仍是很明顯的~

CSS Format插件

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

1、安裝

與上面的插件安裝步驟徹底一致，後面再也不放圖

輸入INSTALL，並點擊回車
輸入CSS Format，點擊安裝
不須要配置路徑，重啓sublime便可

2、使用

右鍵 CSS Format >Expanded （注意，與CSScomb不一樣，不會改變CSS屬性的順序）

右鍵 CSS Format >Compact

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

HTML-CSS-JS Prettify插件

最後來說一講前端通吃的格式優化插件 HTML-CSS-JS Prettify

1、安裝

與上面的插件安裝步驟徹底一致，後面再也不放圖

輸入INSTALL，並點擊回車
輸入CSS Format，點擊安裝
須要配置路徑，將你電腦對應系統的路徑改成node.js的安裝目錄保存便可（對了，在sublime中保存的快捷鍵爲Ctrl + S）

最後重啓sublime便可

2、使用

使用方法和前面的相似，也是右鍵選擇便可。這款插件除了可以修改CSS的格式外，還能修改HTML與JS的格式。但須要注意，這款插件也不能改變CSS屬性的順序。

小結：筆者一口氣給你們安利了4款比較經常使用的插件，部分插件的功能可能存在重複，可是咱們能夠各取所長。好比，對於CSS文件通常能夠先用CSScomb調整CSS屬性的順序，而後再用CSS Format轉化爲本身想要的格式。對於HTML和JS文件，咱們則選用HTML-CSS-JS Prettify插件。