Sublime Text2安装emmet(原名Zen Coding)总结

最新推荐文章于 2023-06-09 09:21:44 发布

小酷

最新推荐文章于 2023-06-09 09:21:44 发布

阅读量1.8k

点赞数 1

分类专栏：工具文章标签： Emmet Sublime Text

本文链接：https://blog.csdn.net/Love_5209/article/details/24233763

版权

工具专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先，安装好Sublime（我用的是版本2），之后注册好，Sublime Text2.0.2注册码：http://xionggang163.blog.163.com/blog/static/376538322013930104310297/

在网上看了一篇文章，有关前端开发工具的，得知原来还有这样的一款强大的工具。网址如下：http://bbs.csdn.net/topics/390758377 里面的第4点开发工具http://www.cnblogs.com/jikey/p/3607133.html 有介绍emmet这个插件。

于是，开始想着安装这个插件。首先找到了这2篇文章，http://www.ituring.com.cn/article/47310 http://blog.csdn.net/del1214/article/details/8092266

发现了自己的Sublime 2不能正确地打开Ctrl+~ （控制面板），于是，找了http://ifalone.me/636.html 发觉还是解决不了后来又找了http://www.codeif.com/topic/1167 ，原来是与QQ拼音冲突了。解决冲突后自然就使用上面文章中的方法咯：复制下面代码到控制台，回车，重启即可。（主要参考：http://www.tuicool.com/articles/2ua2aa）

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

安装后重启，即可开始我们的快速开发了。

如：输入：body>div>.top>.center>p+h1>#bottom

然后按“tab”键或者 Ctrl+E 即可补全如下（确实强大）

<body>
	<div>
		<div class="top">
			<div class="center">
				<p></p>
				<h1>
					<div id="bottom"></div>
				</h1>
			</div>
		</div>
	</div>
</body>

这位仁兄也是遇到这样的问题：http://caibaojian.com/sublime-text2-tutorial.html

分享7个超实用的Emmet（zen coding）HTML代码使用技巧：http://bbs.html5cn.org/thread-10963-1-1.html

> 子节点：在DOM树下一层添加创建一个元素
+ 同级别：在DOM树同一层添加创建一个元素
^ 向上层：向上一层添加创建创建一个元素。

http://www.cnblogs.com/leecanz/archive/2012/03/04/2379446.html

sublime text2的快捷键：

自动完成：自动完成的快捷键是Tab，如果在html文件中，输入cl按下tab，即可自动补全为class=””；加上zencoding后，更是如虎添翼，后面再讲到

l 多列编辑：按住ctrl点击鼠标，会出现多个闪烁的光标，这时可同时修改多处

或者按住鼠标中键拖拽，

代码注释功能：ctrl+/、ctrl+shift+/分别未行注释和块注释，再按一下就能去掉注释，ST2能够自动识别是html、css还是js文件，给出不同类型的注释。

l 行操作：ctrl+alt+↑、ctrl+alt+↓向上或者向下交换两行，ctrl+enter，光标后插入空行，ctrl+d选择相似，可以参考后面的快捷键列表。

l 右键功能：

前3个，大家都知道，第4个，show unsaved changes，显示未保存的修改，红色减号表示删去的内容，绿色加号表示新增的内容

主要快捷键列表

Ctrl+X 剪切整行

Ctrl+L 选择整行（按住-继续选择下行）

Ctrl+KK 从光标处删除至行尾

Ctrl+Shift+K 删除整行

Ctrl+Shift+D 复制光标所在整行，插入在该行之前

Ctrl+J 合并行（已选择需要合并的多行时）

Ctrl+KU 改为大写

Ctrl+KL 改为小写

Ctrl+D 选词（按住-继续选择下个相同的字符串）

Ctrl+M 光标移动至括号内开始或结束的位置

Ctrl+Shift+M 选择括号内的内容（按住-继续选择父括号）

Ctrl+/ 注释整行（如已选择内容，同“Ctrl+Shift+/”效果）

Ctrl+Shift+/ 注释已选择内容

Ctrl+Z 撤销

Ctrl+Y 恢复撤销

Ctrl+M 光标跳至对应的括号

Alt+. 闭合当前标签

Ctrl+Shift+A 选择光标位置父标签对儿

Ctrl+Shift+[ 折叠代码

Ctrl+Shift+] 展开代码

Ctrl+KT 折叠属性

Ctrl+K0 展开所有

Ctrl+U 软撤销

Ctrl+T 词互换

Tab 缩进自动完成

Shift+Tab 去除缩进

Ctrl+Shift+↑ 与上行互换

Ctrl+Shift+↓ 与下行互换

Ctrl+K Backspace 从光标处删除至行首

Ctrl+Enter 光标后插入行

Ctrl+Shift+Enter 光标前插入行

Ctrl+F2 设置书签

F2 下一个书签

Shift+F2 上一个书签

小酷

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Sublime Text2安装emmet(原名Zen Coding)总结

首先，安装好Sublime（我用的是版本2），之后注册好，Sublime Text2.0.2注册码：http://xionggang163.blog.163.com/blog/static/376538322013930104310297/在网上看了一篇文章，有关前端开发工具的，得知原来还有这样的一款强大的工具。网址如下：http://bbs.csdn.net/topics/39075837
复制链接

扫一扫