前端编辑利器SublimeText的配置与GitHub插件的安装

12月 12 2015

一直在写Java后台和Android的相关东西，很少去钻研网页前端的一些东西。学习的时候做项目大部分做的网页也特别丑。最近暗暗想做一个漂亮一些的项目，于是去了解到了Bootstrap前端框架，然后接触到了Emmet插件。这两样神器，用了之后突然感觉前端并没有那么复杂了（并不会）。哈哈。今天就来写写最近的一些经验。

今天的主题编辑器是Sublime Text，我一开始使用的是notepad++但是去年买了Mac后发现Mac平台下面没有，所以后来接触了sublime，然后发现主题和字体颜色挺酷（装逼）的，就转战sublime了。所以并不是一开始就了解到了sublime的各项便捷处才转战的。哈哈，至于sublime版本2还是3，关系并不太大。只是在插件的兼容方面会有所不同。Windows上面我用的2，Mac下我用的是3.这里我以3为例子来介绍。

Sublime我主要用来写前端的页面，平常编辑一些html、js和CSS，最后用markdown写这个博客。

第一个我们要安装的是Package Control，这是Sublime的一个插件管理器。
打开Sublime，按键盘上的control+·（windows下是：ctrl+·）tab上面的那个键，打开sublime的console。然后百度搜索package control找到打开官网https://packagecontrol.io/，找到左边的安装方法，根据你的版本复制相应的代码粘贴到sublime的控制台中，然后回车稍等片刻就可以自动安装成功了。安装成功之后需要重启一下sublime。

重启完成之后就可以按键盘上的shift+command+p或者在菜单栏Tools里面选择Command Palette选项就会弹出一个搜索框，在搜索框里键入install这个关键字第一个就会出现install package选项，选中然后回车就会进入PackageControl的插件列表。

接下来我们要安装的是前段开发必备的插件Emmet，这个插件最大的好处自然是可以大大节省敲代码的数量，堪称终极代码补全神器！直接搜索Emmet回车安装。

安装完记得重启Sublime，简单介绍一下Emmet的用法。比如我们要写html文件，新建一个html格式的空白文档，然后在开头输入html：5然后按Tab键就可以自动生成一个标准的html格式,再按Tab就可以直接跳到title标签内修改,修改完再按Tab就可以自动跳转到body标签。
html

再比如，要新建一个class名为nav的div就可以这样写 div.nav 然后再按Tab就可以生成这样：
div

还有比如我们要写5个li序列标签内部包含a标签就可以这样：li*5>a 然后按Tab就可以自动生成这样（下图），再按Tab就可以跳转到编辑处。更多的用法可以参考官网哈http://docs.emmet.io/。

然后再来安装一个选色器ColorPicker，我们在Dreamweaver上写CSS代码的时候只要敲#然后就会弹出选色器让我们选择颜色，同样sublime里面这个插件也可以实现类似的功能。和上面一样的流程搜索ColorPicker进行安装。Mac下调用这个插件的快捷键是command+shift+c其他平台下请参考这里：http://weslly.github.io/ColorPicker/

还有自动格式化代码的插件必不可少，这里推荐的是HTML-CSS-JS Prettify这个插件，使用这个插件的前提是你的电脑上必须安装有node.js 先去官网下载安装node.js,然后和上面插件的安装方法一样搜索安装这个插件就可以了。使用也非常简单，你只需要在当前编辑的页面按下键盘上的shift+command+H就可以调用，插件会自动帮你美化好格式，非常的easy。

最后轮到Git，我们常用的当然是GitHub，首页在自己的电脑上将Github安装配置好，然后进入sublime安装插件，安装搜索方式上面的相同，这里推荐安装sublimeGit这个插件兼容SublimeText版本2和3,安装完重启后按键盘上的command+shift+P启动Command Palette在输入框中输入Git然后就会出现Git的相关选项.

第一步我们要初始化工程目录，也就是你要发布到GitHub上的的项目文件夹，输入Git:init回车sublime下面就会弹出一个directory框一般默认就是你当前的文件目录，当然你也可以更改。
init