PHP程序设计最新章节_陈运军著

1.7 代码编辑工具Sublime

编辑网页可以选择很多工具软件，如记事本、EditPlus、Dreamweaver、PHPStorm、HBuilder、Sublime等，本书的编辑环境采用Sublime。使用较多的Sublime版本是Text 2和Text 3，本书使用的是 Text 3英文版，打开 Sublime Text 3安装程序，按照默认方式安装即可。成功安装后打开Sublime，会看到Sublime的使用界面，包括常用的命令菜单和编辑区域，如图1-22所示。

图1-22 Sublime使用界面

1.7.1 Sublime的常用操作

1.快速使用Sublime打开已有文档

安装好Sublime后，右键单击想要打开的各种文件格式（html、js、xml、txt等）都可以快速打开文件，如图1-23所示。

图1-23 使用Sublime打开文档

2.创建新文件并选择文件类型

单击“文件”→“新建文件”菜单可以创建一个新文件，默认文件名为 untitled，注意此时文件是没有扩展名的，即没有指定文件类型，在保存此文件之前，需要给出该文件的扩展名，在Sublime编辑环境的右下角可以对文件类型进行选择，如图1-24所示，默认类型为Plain Text。选择文件类型后就可以将文件保存到指定路径下了。

图1-24 选择文件类型

3.打开整个工程

一个网站即为www目录下的一个文件夹，比如我们的课程项目要求完成一个视频信息管理系统的网站，可以在 www 目录下创建一个目录作为网站的根目录，目录命名为 neuvideo，后面编写的所有页面都将存放于该目录下。建议在编辑网页的过程中打开neuvideo目录，这样就可见该目录下所有子目录及文件列表，编辑和维护都比较方便。单击“文件”→“打开文件夹”→“选择自己的工程”菜单，可以打开整个工程，这样就可以在整个工程里查看所有文件了，如图1-25所示。

图1-25 打开整个工程

4.快速注释

选择需要注释的代码，多行或单行都可以，然后使用＜Ctrl+/＞组合键，或者使用＜Ctrl+Shft+/＞组合键即可快速注释。再次按一下组合键即可取消注释。

5.快速查找

按住＜Ctrl+F＞组合键，即可进行快速搜索，在搜索框下面输入要找的变量名称或方法名等，定位很迅速，如图1-26所示。

图1-26 快速查找

6.快速打开文件

使用＜Ctrl+P＞组合键可以快速打开文件，输入文件名称即可切换文件，我们一次打开的窗口可能比较多，＜Ctrl+P＞组合键可以快速地切换到相应的文件，如图1-27所示。

图1-27 快速打开文件

1.7.2 在Sublime中安装Emmet

Emmet可以快速地编写HTML、CSS，以及实现其他的功能。在前端开发的过程中，一个最烦琐的工作就是写HTML、CSS代码，比如数量繁多的标签、属性、尖括号、标签闭合等。Emmet提供了一套非常简单的语法规则，书写起来非常快，只需要敲一个快捷键就立刻生成对应的HTML或CSS代码，极大提高了代码书写效率。Emmet的前身是Zen coding，它是一个编辑器插件，需要基于指定的编辑器使用，官方网站提供多编辑器支持，本书使用Sublime Text 3，下面就以Sublime Text 3插件为例，讲解Emmet的安装及基础语法。

1.安装Package Control组件

目前，Emmet 已经可以通过 Package Control安装了。如果你的Sublime Text 3还没有安装Package Control组件，请参照以下方法安装，如果已安装请自行跳过本步骤。

使用＜Ctrl+`＞组合键打开控制台或通过“View”→“Show Console”菜单打开命令行，粘贴以下代码到底部命令行并按＜Enter＞键。

import urllib.request,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path（）;
urllib.request.install_opener（urllib.request.build_opener（urllib.request.Proxy Handler（）））; open
（os.path.join（ipp,pf）,'wb'）.write（urllib.request.urlopen（'http://sublime.wbond.net/'+ pf.replace
（' ', '%20'））.read（））

重启Sublime Text 3，如果在“Perferences”→“Package Settings”中看到Package Control，则表示安装成功。

2.使用Package Control安装Emmet插件

在“Package Control”中选择“lnstall package”或按＜Ctrl+Shift+P＞组合键，打开命令板，输入“pci”，然后选择“lnstall Package”，输入Emmet的搜索，找到Emmet Css Snippets，单击即可自动完成安装。

3.快速体验 Emmet

举个例子，如果编写下面这个HTML结构，你需要多长时间？

＜div id=＂page＂＞
    ＜div class=＂logo＂＞＜/div＞
    ＜ul id=＂navigation＂＞
        ＜li＞＜a href=＂＂＞＜/a＞＜/li＞
        ＜li＞＜a href=＂＂＞＜/a＞＜/li＞
        ＜li＞＜a href=＂＂＞＜/a＞＜/li＞
        ＜li＞＜a href=＂＂＞＜/a＞＜/li＞
        ＜li＞＜a href=＂＂＞＜/a＞＜/li＞
    ＜/ul＞
＜/div＞

其实，这一切你只需要编写下面这条按照Emmet语法写出来的语句，然后用Emmet编译一下（按下＜TAB＞键），就可以生成了！

#page＞div.logo+ul#navigation＞li*5＞a

把上述代码复制到Sublime Text 3中已经打开的HTML文件中，这时候紧跟着敲击一下＜TAB＞键，仅仅写一行代码，就可以生成这个复杂的HTML结构，而且还可以生成对应的class、id和有序号的内容。

又如，快速编写HTML代码，HTML文档需要包含一些固定的标签，如doctype、html、head、body及meta等，现在你只需要1 s就可以输入这些标签。比如输入“!”或“html:5”，然后按＜TAB＞键，就可以得到如下代码。

＜!doctype html＞
＜html lang=＂en＂＞
＜head＞
    ＜meta charset=＂UTF-8＂＞
    ＜ title＞Document＜/title＞
＜/head＞
＜body＞
＜/body＞
＜/html＞

这就是一个HTML5的标准结构，也是默认的HTML结构。

4.Emmet的基础语法

（1）生成带有id、class的HTML标签

Emmet默认的标签为div，如果不给出标签名称，则默认生成div标签。如果要生成id为page的div标签，则只需要编写以下指令。

div#page-＞tab键

或者使用默认标签的方式：

#page

如果编写一个class为content的p标签，只需要编写以下指令。

p.content-＞tab键

同时指定标签的id和class，如生成id为navigation、class为nav的ul标签，代码如下。

ul#navigation.nav

指定多个class，如上面还需要给ul指定一个class为dropdown。

ul#navigation.nav.dropdown-＞tab键

生成的HTML结构如下。

＜ul id=＂navigation＂ class=＂nav dropdown＂＞
＜/ul＞

（2）兄弟标签：+

生成标签的兄弟标签，即平级元素，使用指令“+”，如下。

div+ul+bq-＞tab键

生成的HTML结构如下。

＜div＞＜/div＞
＜ul＞＜/ul＞
＜blockquote＞＜/blockquote＞

（3）后代：＞

“＞”表示后面要生成的内容是当前标签的后代。例如，要生成一个无序列表，而且被class为nav的div包裹，那么可以使用以下指令。

div.nav＞ul＞li-＞tab键

生成的HTML结构如下。

＜div class=＂nav＂＞
    ＜ul＞
      ＜li＞＜/li＞
    ＜/ul＞
＜/div＞

（4）上级元素：^

上级（Climb-up）元素是什么意思呢？前面介绍了生成下级元素的符号“＞”，在使用div＞ul＞li指令之后，再继续写下去，那么后续内容都是在li下级的。如果想编写一个与ul平级的span标签，那么需要先用“^”提升层次，如下。

div.nav＞ul＞li^span

生成的结构如下。

＜div  class=＂nav＂＞
    ＜ul＞
      ＜li＞＜/li＞
    ＜/ul＞
    ＜span＞＜/span＞
＜/div＞

如果想相对于div生成一个平级元素，那么再上升一个层次，多用一个“^”符号。

div.nav＞ul＞li^^span

结果如下。

＜div  class=＂nav＂＞
    ＜ul＞
      ＜li＞＜/li＞
    ＜/ul＞
＜/div＞
＜span＞＜/span＞

（5）重复多份：*

针对一个无序列表，ul下面的li必然不只是一份，通常要生成很多个li标签。那么可以直接在li后面的“*”之后加一些数字。

ul＞li*5-＞tab键

这样就直接生成5个项目的无序列表了。如果想要生成多份其他结构，方法类似。

又如，要生成一个1行3列的表格，可以使用如下指令。

table＞tr＞td*3-＞tab键

生成的HTML结构如下。

＜table＞
    ＜tr＞
        ＜td＞＜/td＞
        ＜td＞＜/td＞
        ＜td＞＜/td＞
    ＜/tr＞
＜/table＞

（6）编号：$

例如，无序列表，想为5个li增加一个class属性值item1，然后依次递增从1到5，那么需要使用“$”符号。

ul＞li.item$*5-＞tab键

结构如下。

＜ul＞
    ＜li class=＂item1＂＞＜/li＞
    ＜li class=＂item2＂＞＜/li＞
    ＜li class=＂item3＂＞＜/li＞
    ＜li class=＂item4＂＞＜/li＞
    ＜li class=＂item5＂＞＜/li＞
＜/ul＞

“$”表示一位数字，如果只出现一个，就从1开始；如果出现多个，就从0开始。

如果要想生成3位数的序号，那么要写3个“$”。

ul＞li.item$$$*5-＞tab键

输出如下。

＜ul＞
    ＜li class=＂item001＂＞＜/li＞
    ＜li class=＂item002＂＞＜/li＞
    ＜li class=＂item003＂＞＜/li＞
    ＜li class=＂item004＂＞＜/li＞
    ＜li class=＂item005＂＞＜/li＞
＜/ul＞

1.7.3 设置文档的自动提示与补全

单击菜单栏的首选项菜单“Preferences”，选择“Setting-User”项，然后在大括号内输入以下内容，设置完成后保存，再重启Sublime。

{
    ＂auto_complete＂: true,
    ＂auto_match_enabled＂: true,
    ＂color_scheme＂: ＂Packages/Color Scheme - Default/Monokai.tmTheme＂,
    ＂font_size＂: 21,
    ＂ignored_packages＂:
    [
        ＂Vintage＂
    ]
}

例如，在PHP文件中输入php+Tab键，会自动补全PHP标签，如图1-28所示。在PHP标签中输入if，就可以自动加载if（）{}；在PHP标签中输入foreach，就可以自动加载for循环的结构foreach（）{}，如图1-29所示，可见，这种方式可以加快程序的开发速度。

图1-28 补全php标签

图1-29 补全流程结构