之前與學習前端有關的軟件都安裝在了實驗室電腦上，最近由於要放寒假（也許我寒假回去會學習呢
），於是得在筆記本電腦上重新安裝一遍。幾個軟件各種出錯，花了一下午才安裝好，必須記錄下來啊！
這篇文章主要介紹sublime的下載安裝，常用的一些插件的介紹和安裝以及瀏覽器預覽設置。
下載安裝sublime
- 官網地址http://www.sublimetext.com/3，選擇與電腦匹配的版本下載；
- 安裝，這個就不用多說了，按提示來就行
package control安裝
簡介：首先安裝package control，這是安裝其他插件的前提。
步驟如下：
- 進入packagecontrol的官網https://packagecontrol.io/
- 點擊install
- 復制sublime text3下面框中的內容
- 回到sublime編輯器，通過View->Show Console菜單打開命令行，將以上復制內容粘貼
- 重啟sublime，如果順利的話，此時就可以在Preferences菜單下看到Package Settings和Package Control兩個菜單了。
通過Preferences菜單->Package Control或者快捷鍵Ctrl+shift+p->pci就可以打開package control了
emmet插件
簡介：相信很多人都知道emmet插件啦，因為真的很好用啊。舉個例子，輸入ul#list>li*3，再按tab鍵，就會出現如下代碼：
<ul id="list">
<li></li>
<li></li>
<li></li>
</ul>
超級神奇超級有用有木有！其他的一些用法，可以參見官方文檔http://docs.emmet.io/cheat-sheet/。下面介紹emmet的安裝。
- 通過Preferences菜單->Package Control或者快捷鍵Ctrl+shift+p->pci打開package control
- 點擊Install Package
- 等待幾秒后再彈出如下內容，輸入emmet，點擊第一個：
- 等待一會，就安裝完成啦，快去重啟一下試試它的神奇之處吧。
docblockr插件
簡介：docblockr插件用來快速添加注釋。比如：1）輸入/*+回車，補充塊注釋，2）輸入/**按回車，補充多行注釋，3）在寫好的函數上方輸入/**按tab鍵，自動補充函數說明格式等等。docblockr也是很好用的，大家可以自己搜一搜其他用法。
下面介紹docblockr的安裝，步驟就基本與emmet插件安裝過程一樣
- 通過Preferences菜單->Package Control或者快捷鍵Ctrl+shift+p->pci打開package control
- 點擊Install Package
- 等待幾秒后再彈出如下內容，輸入docblockr，點擊第一個就OK了。
jshint和cssLint
簡介：用於語法和代碼規范校驗，並給出相應的提示。
- 首先安裝sublime Linter，這是一個總體框架。
- 要對相應的語法進行校驗，需安裝特定的插件，比如校驗css要安裝cssLint。
由於安裝相應的插件之前要先安裝node.js，我對這部分先不是很了解，就直接按這篇文章來操作的http://www.wiibil.com/website/sublimelinter-jshint-csslint.html，講的很清楚，大家按這個操作就好了。
注：sublime還有一些很實用的功能，我也還在探索中。大家可以參考慕課的這個課程http://www.imooc.com/learn/40，講的挺好的，我初期基本都是從那學的。
瀏覽器預覽設置
步驟如下：
- 通過Preferences菜單->Package Control或者快捷鍵Ctrl+shift+p->pci打開package control
- 點擊Install Package
- 輸入SideBarEnhancements，點擊安裝
- 菜單欄選擇Preferences->Kind Bings，出現如下
- 在上圖中括號中輸入如下代碼，按Ctrl+s保存：
/*chrome*/ { "keys": ["f12"], "command": "side_bar_files_open_with", "args": {"application":"C:/Users/Administrator/AppData/Roaming/360se6/Application/chrome.exe"/*此處為瀏覽器程序的位置*/, "extensions": ".*", "paths": []} }, /*IE*/ { "keys": ["ctrl+f2"], "command": "side_bar_files_open_with", "args": {"application": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe"/*此處為瀏覽器程序的位置*/, "extensions": ".*", "paths": []} },
上圖中/**/中為注釋，“keys”中表示快捷鍵（我這里給chrome瀏覽器設置的f12，可以根據自己的習慣更改），“args”中的application中為瀏覽器的地址（注意：將\要換成\\或者/）。按上圖格式，可為更多的瀏覽器設置快捷鍵。
瀏覽器的地址查看方法：右鍵相應瀏覽器的圖標，點擊“屬性”，復制下圖紅框中的內容即可（粘貼后記得去掉引號，並將\要換成\\或者/）
OK，完成以上設置，基本就可以滿足前端日常的需求了~