前言
说起前端开发工具那就很多了，但大致分为下面两类：
- 编辑器 : 各平台自带的编辑器，如写字板 etc.; Sublime Text; Notepad++; ULtraEdit; Vim/GVim; Hbuilder 等等
- IDE ： webstorm, eclipse, VS, IntelliJ 等。
但是我推荐的是 Sublime Text, 因为作为编辑器，相比较 IDE 而言，它轻量化，界面简洁，快速，最重要的是它具有丰富的插件。可以说是现在前端开发最流行的开发工具了。
下载
我们可以到 Sublime Text 的 官网下载相应版本的 Sublime Text 编辑器。
如图：
注意：Sublime Text 有两个版本，分别是 Sublime Text2 和 Sublime Text3,这两个版本相比较而言，Sublime Text2 更加稳定，Sublime Text3 功能要丰富一些，你可以权衡一下选择自己需要的版本进行下载。
如何安装插件
安装我们就不讨论了，傻瓜式安装就可以了。我们来说说插件的安装。想要安装插件，我们首先需要安装 Package Control。下面是安装步骤：
- 第一步： 安装 Package Control
点击 ctrl + ` 或者 View -> Show Console 菜单来打开控制台。
Sublime Text 2 输入以下命令：
1 | import urllib2,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation') |
Sublime Text 3 输入以下命令：
1 | import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by) |
点击 回车 键，等待安装完成，重启 Sublime Text 你就可以看见 Package Control 了，如下图所示：
- 第二步： 安装插件
打开 Package Control 可能发生的问题：
在命令面板中输入 install package 命令并 回车，会出现下面的面板：
在出现的输入框中搜索自己想要安装的插件，选择安装即可。
注意 ： 输入
install package可能出现的问题：
你可能会出现以下警告：
莫慌！根据 Stack Overflow 上的解决方案，极可能是我们的 Intent 服务提供商（ISP）不支持 IPv6 而引起的。
那么，我么要如何解决这个问题呢？
1：获取 sublime.wbond.net 的 IPv4 的地址，我们可以通过在 CMD 中输入 ping sublime.wbond.net 命令
2.打开 C:\Windows\system32\drivers\etc\hosts 文件，增加如下对应关系 {IPv4 地址} sublime.wbond.net
保存文件，再次打开 Package Control 即可，问题解决。
前端开发中常用的那些插件推荐
1.Emment 插件： 让我们编写 HTML 代码更加简单高效
基本用法： 输入标签简写形式，按 TAB 键自动补全。
2.JsFormat 插件： 这是一款将 JS 格式化的插件
基本用法： 在 JS 文件中通过鼠标 右键 -> JsFormat 或者 快键键 ctrl + alt + F 进行格式化：
3.TrailingSpaces 插件： 对于我们代码中多出的 空格 或 TAB 进行显示
4：Tag 插件： 这时一个对 HTML/XML 标签进行缩进、补全和校验的工具
使用方法：通过 Edit -> Tag -> Auto-Format Tags on Document 来排版：
你也可以通过 ctrl + shift + P 调用命令面板来搜索相关命令，如下：
5:Terminal 插件： 编程过程中，我们经常需要使用命令窗口
使用方法：安装好此插件后，通过快捷键 ctrl + shift + T 来呼出命令行窗口。
Sublime Text 常用快捷键
| 快捷键 | 功能描述 |
|---|---|
| Ctrl + Shift + P | 打开命令面板 |
| Ctrl + P | 搜索项目中的文件 |
| Ctrl + Shift + V | 粘贴并格式化 |
| Ctrl + D | 选择单词，重复可增加选择下一个相同的单词 |
| Ctrl + L | 选择行，重复可依次增加选择下一行 |
| Ctrl + Shift + L | 选择多行 |
| Ctrl + Shift + Enter | 在当前行前插入新行 |
| Ctrl + X | 删除当前行 |
| Ctrl + F | 查找内容 |
| Ctrl + Shift + F | 查找并替换 |
| Ctrl + H | 替换 |
| Ctrl + R | 前往 method |
| Ctrl + N | 新建窗口 |
| Ctrl + / | 注释当前行 |
| Ctrl + Shift + / | 当前位置插入注释 |
| Ctrl + Alt + / | 块注释，并Focus到首行，写注释说明用的 |
| F11 | 全屏 |
| Shift + F11 | 全屏免打扰模式，只编辑当前文件 |
| Alt + . | 闭合标签 |
| Alt + Shift + 数字 | 分屏显示 |
| 按Ctrl，依次点击或选取 | 可编辑的多个位置 |
本文参考文献：
