之前与学习前端有关的软件都安装在了实验室电脑上，最近由于要放寒假（也许我寒假回去会学习呢
），于是得在笔记本电脑上重新安装一遍。几个软件各种出错，花了一下午才安装好，必须记录下来啊！
这篇文章主要介绍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，完成以上设置，基本就可以满足前端日常的需求了~