在 sublime text 3 中添加 Emmet (ZenCoding)

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 的方式已经不能使用了,报如下错误:

在 sublime text 3 中添加 Emmet (ZenCoding)_第1张图片

解决方式是使用 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...,弹出如下对话框:

在 sublime text 3 中添加 Emmet (ZenCoding)_第2张图片

在URL中输入:https://github.com/wbond/sublime_package_control.git,在Directory中将路径修改为 D:\Program Files\Sublime Text 3\Data\Packages\Package Control,如下图所示:

在 sublime text 3 中添加 Emmet (ZenCoding)_第3张图片

单击 OK。

打开 Package Control子文件夹,右击,在弹出的右键菜单中选择 TortoiseGit>Switch/Checkout:

在 sublime text 3 中添加 Emmet (ZenCoding)_第4张图片

在弹出的对话框中,选择 Branch>remotes/origin/python3:

在 sublime text 3 中添加 Emmet (ZenCoding)_第5张图片

单击 OK,Sublime Text 3 的 Package Control 安装成功。

再次,安装 Emmet 插件:

启动 Sublime Text 3,选择 Preferences>Package Control,点选 Package Control:Install Package:

在 sublime text 3 中添加 Emmet (ZenCoding)_第6张图片

输入 Emmet 并回车:

在 sublime text 3 中添加 Emmet (ZenCoding)_第7张图片

界面最下方显示:

表明 Emmet 插件正在安装。

在 Emmet 安装完成后,会显示如下屏幕:

在 sublime text 3 中添加 Emmet (ZenCoding)_第8张图片

请注意红框内的文字,和左下角绿色框内的提示:

红框内的文字是说“这个插件会自动下载和安装 PyV8,请看状态条信息”,而左下角的绿色框内的提示就是正在下载、安装和载入 PyV8。

在PyV8安装完成后,重启 Sublime Text 3。

最后,运行 Emmet:

重启 Sublime Text 3,会看到左下角再次出现 Loading PyV8 的提示,待其载入完毕,打开一个新文档,按下 Control + Alt + Enter,会弹出如下提示框:

在 sublime text 3 中添加 Emmet (ZenCoding)_第9张图片

直接关闭它(我没有发现这个错误对 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>

 

 

你可能感兴趣的:(sublime,text)