sublime Text2技巧以及emmet(Zen Coding)快速编写HTML/CS

zen coding 一种快速编写HTML/CSS代码的方法,已改名为Emmet,并且搭建了一个新的网站:docs.emmet.io

Sublime Text 2安装插件Emmet后,打开sublime Text2输入代码ul>li*4>a{Links$} ,按Tab键生成下面一段代码:

 

Emmet 插件的安装:

打 开Sublime Text 2,首先,我们需要安装Package Contro,ctrl+`调出命令行工具,输入import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

回车即可。

点击Preferences→Package Control,显示以下弹窗,选择Install Package

 

之后再输入Emmet来找到要安装的包,安装后就可以使用了。

 

使用Emmet编写代码时,需要遵循一定的缩写规则:

  • E
    元素名(div、p);

  • E#id
    带Id的元素(div#content、p#intro、span#error);

  • E.class
    带class的的元素(div.header、p.error),id和class可以连着写,div#content.column

  • E>N
    子元素(div>p、div#footer>p>span)

  • E*N
    多项元素(ul#nav>li*5>a)

  • E+N
    多项元素

  • E$*N
    带序号的元素

 

Sublime Text 中的其他插件:

jQuery Package for sublime Text

如果你离不开jQuery的话,这个必备~~

Sublime Prefixr

Prefixr,CSS3 私有前缀自动补全插件,显然也很有用哇

JS Format

一个JS代码格式化插件。

Placeholders

故名思意,占位用,包括一些占位文字和HTML代码片段,实用。

Sublime Alignment

用于代码格式的自动对齐。传说最新版Sublime 已经集成。

Tag
一些有代码洁癖的程序猿很适合这个插件,HTML代码格式化能使html代码更加漂亮整洁。

JsMinifier

该插件基于Google Closure compiler,自动压缩js文件。

Sublime CodeIntel

代码自动提示

Bracket Highlighter

类似于代码匹配,可以匹配括号,引号等符号内的范围。

GBK to UTF8

将文件编码从GBK转黄成UTF8,快捷键Ctrl+Shift+C

 

主要快捷键

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 上一个书签


转载于:https://my.oschina.net/u/1780920/blog/416302

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值