1-10 使用Sublime Text来编写JavaScript代码
Chrome浏览器提供的开发者工具虽然强大，但是只适用于已完成项目的检查与调试，无法用来进行完整项目的开发。可以编写JavaScript代码的编辑器十分多，例如专门开发大型Web项目的WebStorm、小巧的用于开发移动端网页的HBuilder、通用编辑器Sublime Text等工具。对于JavaScript语法部分的学习，强烈建议使用Sublime Text工具。首先，其拥有轻量级、占内存极小、运行极快的特点。其次，Sublime Text有大量插件支持，能够很好地提供代码高亮、智能补全、代码格式化等高级开发工具所提供的功能。最重要的是，Sublime Text可以配置编译系统，有了它，我们就不再需要依赖浏览器来进行JavaScript代码的运行与调试了。
笔者推荐使用Sublime Text 3.0版本，本书的示例操作和命令都是以3.0为准的。
下载Sublime Text最新版本的网址：http://www.sublimetext.com/。
下载安装完成Sublime Text后，其已经自带了代码高亮的功能，可以进行JavaScript代码的编写，但是并没有自动补全、代码格式化与运行JavaScript代码的功能，这里会为大家一一解决，现在我们将把Sublime Text武装成一款强大的JavaScript编辑器。
1．安装Sublime Text插件管理器PackageControl
Sublime Text的插件十分丰富，但是快速找到并安装所需要的插件很不容易，如果你有开发iOS软件的经验，一定知道CocoaPods第三方库管理工具。对应Sublime Text, PackageControl就是一款很好的插件管理器。
在Sublime Text中有两种方式可以进行PackageControl插件的安装：第一种方式是直接在Sublime Text的控制台键入如下代码，之后按Enter键来进行PackageControl工具的安装：
在Sublime Text中使用Control+`的方式可以直接打开控制台，将上面的代码粘贴进去并按Enter键进行安装，如图1-4所示。
图1-4 使用代码的方式进行PackageControl工具的安装
第二种安装方式是直接下载，手动安装。由于网络与Sublime Text版本更新不可控，使用代码进行PackageControl工具的安装不一定会成功，可以直接下载PackageControl进行安装，PackageControl工具下载地址：http://sublime.wbond.net/Package%20Control.sublime-package。
下载完成后，如图1-5所示，打开Sublime Text工具的插件目录：Preferences→Browse Packages。
图1-5 Sublime Text的插件目录
将下载到的PackageControl安装文件放入Installed Packages文件夹中，如图1-6所示。
图1-6 将PackageControl安装文件放入Installed Packages文件夹中
之后将Sublime Text完全关掉，重启Sublime Text，如果在Preferences中可以看到Package Control项目，说明已经成功安装，如图1-7所示。
图1-7 成功安装PackageControl工具
上面所提供的PackageControl安装包下载地址服务器在国外，在国内访问时常会出现波动，如果你无法从上面的地址下载PackageControl安装包，可以尝试如下地址：
http://zyhshao.github.io/file/Package%20Control.sublime-package
2．使用PackageControl安装JavaScript代码智能提示插件SublimeCodeIntel
对代码的智能提示是高级编辑工具必备的一项功能。SublimeCodeIntel是一个全功能的代码自动提示插件，支持众多流行的程序语言，例如JavaScript、HTML、CSS、Python、PHP等。
使用PackageControl可以十分方便地进行SublimeCodeIntel插件的安装。首先打开Sublime Text编辑工具，在Mac电脑中使用Command+Shift+P来打开PackageControl命令行，在其中输入package control便会自动检索出PackageControl工具所提供的所有命令，PackageControl工具中提供了许多易用的命令，如安装插件、查看已安装的插件列表、删除插件等，如图1-8所示。
图1-8 PackageControl工具提供的命令
也可以通过如图1-9所示的方式打开PackageControl命令行：Sublime Text→Preference→Package Control。
在PackageControl命令行中输入Install Package并按Enter键就会进入安装插件的命令行，此时会自动显示插件列表，如图1-10所示。
在其中输入SublimeCodeIntel后按Enter键进行安装即可，如图1-11所示（安装需要数分钟时间）。如果安装成功，在Sublime Text→Preference→Package Setting中会看到SublimeCodeIntel项。
图1-9 打开PackageControl命令行
图1-10 插件列表
图1-11 安装SublimeCodeIntel插件
在执行Install Package命令时，Sublime Text会从PackageControl官方网站拉取一个JSON文件，这个文件中包含所有Sublime Text的插件信息，大小在数兆左右。不幸的是，由于国内网络的限制，这个文件的下载依然困难重重。笔者个人维护着一个此JSON文件的下载地址，无法成功拉取到文件的朋友可以尝试通过路径Sublime Text→Preferences→Package Settings→Package Control→Settings-User打开用户配置文件，如图1-12所示。
图1-12 打开Package Control用户配置文件
在其中添加如下配置信息：
添加完成后，配置文件看上去如图1-13所示。
图1-13 进行用户配置文件设置
上面已经将插件列表JSON文件的拉取地址修改为http://zyhshao.github.io/file/channel_v3.json。
成功安装SublimeCodeIntel插件后，你可以尝试编写一些JavaScript代码，可以看到SublimeCodeIntel插件的智能提示十分强大，如图1-14所示。
图1-14 SublimeCodeIntel的代码智能提示
3．安装JavaScript代码格式化插件
缩进规范的代码会使我们在编写程序时赏心悦目，在PackageControl的插件列表中输入JsFormat，按Enter键进行此插件的安装，如图1-15所示。
安装成功后，同样可以在Sublime Text→Preferences→Package Settings中看到JsFormat项。
JsFormat插件的使用十分简单，选中要进行格式化的JavaScript代码，使用Control+Option（Alt）+F即可对其进行格式化。
图1-15 安装JsFormat插件
4．在Sublime Text中运行JavaScript代码
前边我们做了很多工作，安装了一些易用的Sublime Text插件，这些工具可以帮助我们更加愉悦地进行JavaScript代码的编写。代码的编写是为了运行，以学习而言，能够实时地看到代码运行的结果也会大大提高学习效率，Sublime Text自带对Lua、Python、Ruby等语言的编译运行功能，但是并不支持JavaScript语言，我们做一些额外的配置，来使Sublime Text支持运行JavaScript代码。
Node.js是一款JavaScript运行时编译环境，首先需要在系统中安装Node.js环境，下载安装包地址：https://nodejs.org/en/。
安装完Node.js后，打开终端工具，在其中输入如下命令来查看Node.js的路径：
$ which node
打开Sublime Text工具，选择其中的Tools→Build System→New Build System，如图1-16所示。在新建的文件中写入如下信息：
图1-16 新建编译工具
需要注意，上面的/user/local/bin/node部分需要替换成你在终端中使用which node命令查找到的路径。之后将文件进行保存，命名为JavaScript.sublime-build即可。
新建一个Sublime Text文件，将其命名为text.js。将Tools→Build System中的编译工具选择新创建的JavaScript，编写一段JavaScript测试代码，使用Command+B进行代码的编译运行，可以看到，在Sublime Text控制台打印出了代码的执行结果与所耗时间，如图1-17所示。
到此，已经配置完成了一款十分快速且强大的JavaScript代码学习工具，后面我们将使用Sublime Text来一步步进入JavaScript的编程世界，一起玩起来吧！
图1-17 在Sublime Text编辑器中进行JavaScript代码的执行