在Eclipse中在线安装Emmet和图文使用教程

Emmet是一个强大的代码快速编写工具,使用emmet可以提高代码输入效率,特别是前端工程师在编写HTML和CSS代码时,是一个前端开发的利器!

废话少说,直接上图!

在前端开发所用的编辑器,比如sublime text,editplus,webstorm中,使用emmet很方便,但是在eclipse中怎样使用这个插件来提高开发效率呢?

各位看官往下看!

ZenCoding 升级为 Emmet 之后,基于 Eclipse 的插件安装地址也发生了变化,下面是在基于 Eclipse 的 IDE 中安装和使用 Emmet 的图文示例。

一、打开 Eclipse 的插件安装界面

启动 Eclipse,选择 Help>Install New Software ...

二、输入插件安装地址:

单击弹出的对话框中的 Add... 按钮,弹出输入插件安装地址及插件名称的对话框:

在弹出的对话框的 Location 一栏输入 http://emmet.io/eclipse/updates/ ,在 Name 一栏随便输入一个名字,比如 Emmet,单击 OK:

三、下载 Emmet:

当 Install 对话框中显示出了 Emmet 选择项后,选择 Emmet,一路 Next,到最后一步,选择 I accept the terms of th license agreements,单击 Finish,弹出下载对话框,开始下载必要的组件:

四、安装 Emmet:

下载完毕后,会弹出要求确认安装的对话框,点击 OK,安装过程很快就完成了。

五、使用 Emmet:

单击上一步中的 Yes,重启 Eclipse,就可以使用 Emmet 了。

输入 Emmet 指令(例如“table>tr*3>td*5”),再按下 Tab 键,就可以了。但是在默认配置下, HTML, XML, HAML, CSS, SASS/SCSS, LESS, JavaScript, Python, Ruby 文件可以直接使用“Tab”键,而在其他类型文件中使用“ctrl+e”作为快捷键。所以,在JSP页面中,可以输入Emmet 指令(例如“table>tr*3>td*5”),再按下ctrl+e,就可以了

时间: 2024-10-26 12:57:52

在Eclipse中在线安装Emmet和图文使用教程的相关文章

eclipse中在线安装gradle插件

eclipse中安装gradle插件,实现用 git 管理项目版本,本案例中使用的是eclipse4.5也就是 MARS版本的eclipse. 1.点击help 2.点击eclipse  Marketplace 3.进入eclipse Marketplace组件超市之后,操作入下图所示. 操作完成后,重启eclipse就好了. 11:58:04

[Eclipse插件] Eclipse中如何安装和使用GrepCode插件

Java是开源的世界,如何快速的搜索到你需要的Java源码呢? 2009年7月17日,GrepCode团队发布了一个有趣的 Java源码搜索引擎-GrepCode .与现有的各种搜索引擎相比,Java源码搜索引擎-GrepCode把Java源码搜索带到了一个新的高度.Java源码搜索引擎-GrepCode 不但提供了语法的高亮显示和JavaDoc的现实,还提供了一种界面非常友好的的Java类型集成视图,便于人们搜索.用户可以很容易的找到某个特定版本代码依赖的工程代码.Java源码搜索引擎-Gre

【转】在eclipse中如何安装插件?

eclipse插件的安装方法大体有以下三种:  第一种:直接复制法:假设你的Eclipse的在(C:\eclipse), 解压你下载的 eclipse 插件或者安装eclipse 插件到指定目录AA(c:\AA)文件夹,打开AA 文件夹,在AA文件夹里分别包含两个文件夹features和plugins ,然后把两个文件夹里的文件分别复制到eclipse下所对应的文件夹下的features 和plugins 下,一般的把插件文件直接复制 到eclipse目录里是最直接也是最愚蠢的一种方法!因为日后

Eclipse中手动安装PyDev----在Eclipse中不显示PyDev的两种原因

第一次写这种公开博客,主要因为自己安装PyDev花了很多时间,所以记录下来 不知道有没有人和我一样在Eclipse中自动安装PyDev不成功,因为网络原因,所以需要手动安装PyDev. 本文将分别介绍手动和自动安装PyDev的两种方法,但重点依然集中在手动安装:) 注意:没有安装Eclipse的同学请先安装JDK和Eclipse(JDK需要配置环境变量,在命令行输入java -version验证,这里就不多介绍啦!) 1.第一步当然是下载PyDev了,官方下载地址:http://pydev.or

Eclipse中如何安装和使用GrepCode插件

GrepCode(GC)Eclipse插件允许Eclipse用户在Eclipse IDE中搜索由GrepCode提供的工厂类.本教程介绍如何安装和使用插件.使用Eclipse3.5(Galileo)的screeshots.类似的步骤可以遵循与Eclipse 3.4.x 版本(Ganymede). 系统需求 更新网站位置 安装 用法 另见:GrepCode IntelliJ IDEA Plugin 系统需求 GC 插件兼容以下版本的Eclipse 3.5.x (Galileo) 3.4.x (Ga

Eclipse中如何安装和使用GrepCode插件 (转)

GrepCode(GC)Eclipse插件允许Eclipse用户在Eclipse IDE中搜索由GrepCode提供的工厂类.本教程介绍如何安装和使用插件.使用Eclipse3.5(Galileo)的screeshots.类似的步骤可以遵循与Eclipse 3.4.x 版本(Ganymede). 系统需求 更新网站位置 安装 用法 另见:GrepCode IntelliJ IDEA Plugin 系统需求 GC 插件兼容以下版本的Eclipse 3.5.x (Galileo) 3.4.x (Ga

eclipse 中离线安装activiti插件,报错“An error occurred while collecting items to be installed session context was:(...”

eclipse 中离线安装activiti插件,报错“An error occurred while collecting items to be installed session context was:(...” 按照文章:eclipse离线安装Activiti Designer插件,下载插件的两个离线安装文件,并按照步骤安装后,一直next后报错,如下: An error occurred while collecting items to be installed session co

eclipse怎样在线安装hibernate tools插件并使用

不知不觉,小Alan已经将近3个月没有上班了,最近在复习一些知识,随时准备回到代码世界的战场,今天复习到了Hibernate,记录一下一点点小知识,那就是eclipse下hibernate Tools的在线安装,离线安装的话速度应该会快那么一些,但是个人感觉没有在线安装简单方便,所以小Alan是宁愿挂在电脑上等等,干点别的事情.有兴趣的可以去网上看看别人的离线安装的文章,反正这种基础的知识网上到处都是,小Alan也是闲着无聊就当是巩固记忆了.那么,我们回到正题. 第一步:启动eclipse(卧槽

Android - 源码阅读 - Eclipse中在线阅读

在线阅读Android源码:grepcode 安装Eclipse GrepCode 插件:GrepCode Eclipse Plugin Help->Install New Software... Add: GrepCode http://repository.grepcode.com/java/ext-eclipse 使用 将鼠标置于需要查看的类名或者包上,然后按"F3",弹出 Class File Editor 显示对应class文件. 在Eclipse IDE 环境中在线查