1.2 Sublime Text 3及常用插件的安装、使用
本书主要讲解使用HTML5相关技术做前端开发，常用的开发工具有Sublime Text、WebStorm、Dreamweaver、Visual Studio等，读者可以选择一款适合自己的开发工具。本书使用Sublime Text 3作为编辑工具，如无特别说明，使用Chrome浏览器作为测试、调试工具，涉及JSON的个别演练使用Windows 10下的Edge浏览器。
Chrome浏览器的安装不再赘述。本节介绍Sublime Text软件的安装及使用。
Sublime Text是一个代码编辑器，非常适合用于HTML5开发时的编辑工作，不注册也可以无限期试用，读者可选择付费注册以支持软件开发者。Sublime Text具有友好的用户界面和强大的功能，它的主要功能包括拼写检查、书签管理、多点选择、多窗口布局等。此外还可以显示代码缩略图、支持各种插件等。Sublime Text是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。
1.2.1 安装Sublime Text
对于Sublime Text中文版的安装，请读者自行在网上搜索“Sublime Text中文版”并下载，安装过程简单，不再赘述。市面上Sublime Text中文版的优点是包含了常用插件，可以说是一键安装，但某些版本自行安装其他插件时可能会出现一些问题。
Sublime Text官方版的安装演练可参照如下步骤。
【演练1.1】下载并安装Sublime Text。
（1）如图1-1所示，在相应网站选择所需版本下载软件。编者这里选择“DOWNLOAD FOR WINDOWS”选项，下载Windows版本。
图1-1 选择程序版本
（2）下载完毕后运行安装程序，显示欢迎向导，单击“Next”按钮，如图1-2所示。
图1-2 欢迎向导
（3）选择安装文件夹，保持默认设置，单击“Next”按钮，如图1-3所示。
（4）勾选“Add to explorer context menu”复选框，单击“Next”按钮，如图1-4所示。
（5）单击“Install”按钮开始安装，如图1-5所示。
图1-3 选择安装文件夹
图1-4 勾选“Add to explorer context menu”复选框
图1-5 单击“Install”按钮开始安装
（6）单击“Finish”按钮完成安装，如图1-6所示。
图1-6 单击“Finish”按钮完成安装
（7）安装完成后，运行Sublime Text，主界面如图1-7所示。这是未注册版本，但不影响功能使用。
图1-7 Sublime Text主界面
1.2.2 安装Package Control组件
Sublime Text本身已经非常强大，但是更棒的是有大量的插件支持它，给它带来更强大的功能。在安装插件之前，首先需要安装Package Control组件。
【注意】安装Package Control和插件时须保持网络畅通。
【演练1.2】安装Package Control组件。
（1）启动Sublime Text，选择“Tools”→“Install Package Control”命令，如图1-8所示。
图1-8 安装Package Control组件
（2）稍等片刻。如果在主菜单“Preferences”中看到了“Package Control”命令，则表示安装成功，如图1-9所示。
图1-9 验证安装成功
1.2.3 安装Emmet插件
Emmet是一款快速编写HTML代码的插件。Emmet的缩写语法极大地提高了编写HTML、CSS、JavaScript代码的速度。
【演练1.3】安装Emmet插件。
（1）选择“Preferences”→“Package Control”命令，输入“install”，选择“Install Package”选项，如图1-10所示。
图1-10 选择“Install Package”选项
（2）输入“emmet”，按“Enter”键，等待安装结束，如图1-11所示。
图1-11 输入“emmet”
【注意】安装Emmet的同时，也会自动安装其依赖的PyV8库，安装PyV8库会用较长时间，可以在Sublime Text主界面左下角看到安装进程，预计几分钟时间，需要耐心等待。
1.2.4 使用Sublime Text
本小节带领读者熟悉Sublime Text的常用编辑技巧，并通过第一个程序熟悉HTML+CSS+JavaScript的基本架构。
【演练1.4】使用Sublime Text编辑一个带HTML+CSS+JavaScript基本架构的HTML文件。
（1）启动Sublime Text。
（2）按“Ctrl+S”组合键保存空白文件，选择路径并输入文件名，编者这里输入的是“1.04.html”，单击“保存”按钮如图1-12所示。
图1-12 保存文件
【注意】文件名扩展名是“.html”。
（3）输入“!”（注意，不要输入全角状态的感叹号）后按“Tab”键，自动生成HTML文件基本框架，如图1-13所示。
图1-13 自动生成HTML文件基本框架
（4）在body块内输入“div#div1.c1”后按“Tab”键，生成图1-14所示的代码。
【说明】“#”后至“。”前为id名称，“.”后为class名称。
图1-14 body块内代码编辑技巧
以下操作读者可自行测试后删除。
在“body”块内如输入“div>div>div*4”后按“Tab”键，则会生成如下代码。
【说明】上述代码为三层div嵌套，最里面一层有4个div。
【乱数假文】如输入“lorem”后按“Tab”键，则会生成如下代码。
乱数假文适合需要大段文本时使用。读者还可以控制单词的数量，如输入“lorem200”后按“Tab”键，则会生成200个单词的文本段。
（5）编写样式。如图1-15所示，在图示选中位置输入“style”后按“Tab”键，生成如下代码。
图1-15 style代码编辑技巧
（6）编写样式。输入图示选中的代码，如图1-16所示。
【说明】指定所有div元素样式为1px的红色实线边框，宽度为100px，高度为20px。其中的“width:100px;”可通过输入“w100”后按“Tab”键生成。类似的，“height:20px;”可通过输入“h20”后按“Tab”键生成。
图1-16 样式属性编辑
（7）编写JavaScript。如图1-17所示，在图示选中位置输入“script”后按“Tab”键，生成如下代码。
【说明】通常将JavaScript写在“</body>”之前。为方便阅读，本书将JavaScript写在“</html>”之后，这对运行没有任何影响。
图1-17 script代码编辑
（8）编写JavaScript，如图1-18所示，输入图示选中的代码并保存文件。运行该代码将在浏览器的控制台输出“Hello World!”。
图1-18 编写JavaScript
（9）测试运行方法一。如图1-19所示，在编辑器中的空白位置右击，选择“Open in Browser”命令，系统默认浏览器将会打开该文件。本书建议将系统默认浏览器设置为Chrome浏览器。
（10）测试运行方法二。如图1-20所示，在编辑器中右击，选择“Open Containing Folder”命令，打开该文件所在文件夹。
（11）右击相应的文件，选择“打开方式”→“Google Chrome”命令，如图1-21所示。
图1-19 选择“Open in Browser”命令
图1-20 选择“Open Containing Folder”命令
图1-21 用Google Chrome打开文件
【注意】确保使用Chrome浏览器打开运行。除非特别说明，本书示例均使用Chrome浏览器进行调试讲解。
1.2.5 Chrome浏览器调试入门
【演练1.5】熟悉Chrome浏览器调试界面。
（1）接上例，在Chrome浏览器中按“F12”键，调出调试界面。
（2）观察结果。将鼠标指针移到或单击图1-22所示的位置，可显示对应元素的详细信息。
V1-1 Chrome浏览器调试入门
图1-22 显示对应元素的详细信息
（3）单击“Console”标签观察控制台输出，可以看到“Hello World!”，如图1-23所示。
图1-23 观察控制台输出
【注意】使用Console是经常用来观察调试结果的方法之一，请牢记。
1.2.6 Sublime Text常用技巧
【演练1.6】改变主题颜色。
如图1-24所示，选择“Preferences”→“Color Scheme”→“Mac Classic”命令可改变主题颜色。读者可以选择自己喜欢的主题。默认主题是黑色背景的“Monokai”。
V1-2 SublimeText常用编辑快捷操作
【演练1.7】显示/隐藏侧边栏。
（1）如图1-25所示，选择“View”→“Side Bar”→“Show Side Bar”命令可显示侧边栏。
图1-24 选择颜色主题
图1-25 显示侧边栏
（2）侧边栏将显示打开的文件夹。如需隐藏侧边栏，可选择“View”→“Side Bar”→“Hide Side Bar”命令，如图1-26所示。
【演练1.8】侧边栏中文出现乱码的解决办法。
（1）如图1-27所示，选择“File”→“Open Folder”命令，然后自行选择一个带中文名的目录。
图1-26 隐藏侧边栏
图1-27 选择“Open Folder”命令
（2）如果读者的侧边栏中文显示为乱码，如图1-28所示，则继续后面的步骤，否则无须操作。
（3）选择“Preferences”→“Settings”命令，如图1-29所示。
（4）在右侧窗格的“Preferences sublime-settings User”中加上图1-30所示选中的代码。
【注意】查看图示选中部分，前一行末有一个英文逗号“,”。
图1-28 侧边栏中文显示为乱码
图1-29 选择“Preferences”→“Settings”命令
图1-30 设置dpi_scale
（5）按“Ctrl+S”组合键保存设置（如果输入语法有错误，则不能完成存盘操作），重启Sublime Text，侧边栏中文显示正常，如图1-31所示。
图1-31 侧边栏中文显示正常
【演练1.9】移除打开的文件夹。
如果要移除打开的文件夹，则右击文件夹，选择“Remove Folder from Project”命令即可，如图1-32所示。
图1-32 移除打开的文件夹