Chinaunix首页 | 论坛 | 博客
  • 博客访问: 468111
  • 博文数量: 95
  • 博客积分: 2117
  • 博客等级: 大尉
  • 技术积分: 2301
  • 用 户 组: 普通用户
  • 注册时间: 2008-06-16 21:10
个人简介

辽宁铁岭人,现居大连。1970年生。 先后供职于 中国国际海运网、大连学堂科技、大连华仁视线网络科技有限公司、大连中科海云科技有限公司,任职技术总监。 精通PHP、JAVA、Javascript、HTML、CSS等网络编程技术及Linux操作系统。 精通面向对象编程、设计模式、重构及互联网产品设计。

文章分类

全部博文(95)

文章存档

2013年(31)

2012年(2)

2011年(34)

2010年(25)

2008年(3)

分类: Html/Css

2013-04-09 16:11:48

Sublime text 2 是获得了盛赞的编辑器,而其中的 zen coding 插件也为人所津津乐道!

如今,这两款软件都有了新的版本,Sublime text 3 beta 版已经发布了,zen coding 也改名为 Emmet,其安装方法也与之前有所不同。

下面就来介绍一下【如何在 Sublime Text 3 中安装 Emmet 插件】:

首先,安装 sublime text 3:

sublime text 3 的官方下载地址为:,截止本篇博文发布的日期,最新版本为 3021。关于汉化和注册,请自行百度、谷歌。

我下载的是  便携版。直接解压到文件夹中就可以用了,我解压在 D:\Program Files\Sublime Text 3文件夹中,下面的示例均以此为准,请根据自己的情况修改示例中的指令。对于下载了  的朋友,也请将示例中的文件夹修改为具体的安装位置。

其次,安装 sublime text 3 的 Package Control:

由于升级为 sublime text 3,原来 sublime text 2 中直接用指令安装 Package Control 的方式已经不能使用了,报如下错误:

解决方式是使用 git 直接下载安装,windows 下 git 可以使用 msysgit,下载地址为 ,或者使用 TortoiseGit,下载地址为 。

对于使用 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中输入:,在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,如:


  1. table.MyTable>tr.MyTableTr*3>td.MyTableTr*5
按下 Ctrl+E,生成如下表格:

  1. <table class="MyTable">
  2.     <tr class="MyTableTr">
  3.         <td class="MyTableTrTd"></td>
  4.         <td class="MyTableTrTd"></td>
  5.         <td class="MyTableTrTd"></td>
  6.         <td class="MyTableTrTd"></td>
  7.         <td class="MyTableTrTd"></td>
  8.     </tr>
  9.     <tr class="MyTableTr">
  10.         <td class="MyTableTrTd"></td>
  11.         <td class="MyTableTrTd"></td>
  12.         <td class="MyTableTrTd"></td>
  13.         <td class="MyTableTrTd"></td>
  14.         <td class="MyTableTrTd"></td>
  15.     </tr>
  16.     <tr class="MyTableTr">
  17.         <td class="MyTableTrTd"></td>
  18.         <td class="MyTableTrTd"></td>
  19.         <td class="MyTableTrTd"></td>
  20.         <td class="MyTableTrTd"></td>
  21.         <td class="MyTableTrTd"></td>
  22.     </tr>
  23. </table>

阅读(2822) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~