sublime3下载安装及常用插件、浏览器预览设置

之前与学习前端有关的软件都安装在了实验室电脑上，最近由于要放寒假（也许我寒假回去会学习呢），于是得在笔记本电脑上重新安装一遍。几个软件各种出错，花了一下午才安装好，必须记录下来啊！

这篇文章主要介绍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，完成以上设置，基本就可以满足前端日常的需求了~