在 sublime text 3 中添加 Emmet (ZenCoding )

http://www.cnblogs.com/matchless/archive/2013/04/09/3010293.html

 

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，如下图所示：

或者使用git bash : D:\Program Files\Sublime Text 3\Data\Packages>git clone https://github.com/wbond/sublime_package_control.git "Package Control"

 

 

单击 OK。

 

单击 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>

posted on 2013-12-13 11:26  strikebone  阅读(302)  评论(0)  编辑  收藏  举报

导航