Sublime text 2 是获得了盛赞的编辑器,而其中的 zen coding 插件也为人所津津乐道!
如今,这两款软件都有了新的版本,Sublime text 3 beta 版已经发布了,zen coding 也改名为 Emmet,其安装方法也与之前有所不同。
下面就来介绍一下【如何在 Sublime Text 3 中安装 Emmet 插件】:
首先,安装 sublime text 3:
sublime text 3 的官方下载地址为:http://www.sublimetext.com/3,截止本篇博文发布的日期,最新版本为 3021。关于汉化和注册,请自行百度、谷歌。
我下载的是 portable version 便携版。直接解压到文件夹中就可以用了,我解压在 D:\Program Files\Sublime Text 3文件夹中,下面的示例均以此为准,请根据自己的情况修改示例中的指令。对于下载了 安装版 的朋友,也请将示例中的文件夹修改为具体的安装位置。
其次,安装 sublime text 3 的 Package Control:
由于升级为 sublime text 3,原来 sublime text 2 中直接用指令安装 Package Control 的方式已经不能使用了,报如下错误:
解决方式是使用 git 直接下载安装,windows 下 git 可以使用 msysgit,下载地址为 Git-1.8.1.2-preview20130201.exe,或者使用 TortoiseGit,下载地址为 http://code.google.com/p/tortoisegit/wiki/Download。
对于使用 git 命令行方式,进入控制台(在“运行”中,输入 cmd 回车),转到 D:\Program Files\Sublime Text 3\Data\Packages,输入如下指令:
D:\Program Files\Sublime Text 3\Data\Packages>git clone https://github.com/wbond/sublime_package_control.git "Package Control" D:\Program Files\Sublime Text 3\Data\Packages>cd Package Control D:\Program Files\Sublime Text 3\Data\Packages>git checkout python3
重新启动 Sublime Text 3,可以在 Preferences 菜单下看到 Package Settings 和 Package Control 菜单项,表明 Package Control 安装成功。
对于安装了 TortoiseGit 的朋友,在“我的电脑”或“计算机”中打开 D:\Program Files\Sublime Text 3\Data\Packages 文件夹,在空白处右击,选择 Git Clone...,弹出如下对话框:
在URL中输入:https://github.com/wbond/sublime_package_control.git,在Directory中将路径修改为 D:\Program Files\Sublime Text 3\Data\Packages\Package Control,如下图所示:
单击 OK。
打开 Package Control子文件夹,右击,在弹出的右键菜单中选择 TortoiseGit>Switch/Checkout:
在弹出的对话框中,选择 Branch>remotes/origin/python3:
单击 OK,Sublime Text 3 的 Package Control 安装成功。
再次,安装 Emmet 插件:
启动 Sublime Text 3,选择 Preferences>Package Control,点选 Package Control:Install Package:
输入 Emmet 并回车:
界面最下方显示:
表明 Emmet 插件正在安装。
在 Emmet 安装完成后,会显示如下屏幕:
请注意红框内的文字,和左下角绿色框内的提示:
红框内的文字是说“这个插件会自动下载和安装 PyV8,请看状态条信息”,而左下角的绿色框内的提示就是正在下载、安装和载入 PyV8。
在PyV8安装完成后,重启 Sublime Text 3。
最后,运行 Emmet:
重启 Sublime Text 3,会看到左下角再次出现 Loading PyV8 的提示,待其载入完毕,打开一个新文档,按下 Control + Alt + Enter,会弹出如下提示框:
直接关闭它(我没有发现这个错误对 Emmet 插件的使用有什么影响)。
在下方的命令窗口输入 ZenCoding 指令就可以了。
或者也可以直接在文本区输入 Emmet (ZenCoding) 指令,再按下 Ctrl + E,如:
table.MyTable>tr.MyTableTr*3>td.MyTableTr*5,按下 Ctrl+E,生成如下表格:
<table class="MyTable"> <tr class="MyTableTr"> <td class="MyTableTrTd"></td> <td class="MyTableTrTd"></td> <td class="MyTableTrTd"></td> <td class="MyTableTrTd"></td> <td class="MyTableTrTd"></td> </tr> <tr class="MyTableTr"> <td class="MyTableTrTd"></td> <td class="MyTableTrTd"></td> <td class="MyTableTrTd"></td> <td class="MyTableTrTd"></td> <td class="MyTableTrTd"></td> </tr> <tr class="MyTableTr"> <td class="MyTableTrTd"></td> <td class="MyTableTrTd"></td> <td class="MyTableTrTd"></td> <td class="MyTableTrTd"></td> <td class="MyTableTrTd"></td> </tr> </table>