sublime text 3的一些笔记

u=887087343,967582613&fm=58.jpg记录一下最近使用的sublime编辑器的一些用法



注册码



—– BEGIN LICENSE —–

Michael Barnes

Single User License

EA7E-821385

8A353C41 872A0D5C DF9B2950 AFF6F667

C458EA6D 8EA3C286 98D1D650 131A97AB

AA919AEC EF20E143 B361B1E7 4C8B7F04

B085E65E 2F5F5360 8489D422 FB8FC1AA

93F6323C FD7F7544 3F39C318 D95E6480

FCCC7561 8A4A1741 68FA4223 ADCEDE07

200C25BE DBBC4855 C4CFB774 C5EC138C

0FEC1CEF D9DCECEC D3A5DAD1 01316C36

—— END LICENSE ——

package control安装


调出console运行


import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())


常用插件:


BracketHighlighter

covertToUTF8

Emmet (安装pyv8(被墙)参考http://jingyan.baidu.com/article/afd8f4de64d4cd34e286e9aa.html)


快速注释 
选择需要注释的代码,多行或单行都很随意,然后使用”Ctrl+/”,或者使用“Ctrl+Shft+/”即可快速注释。


tag 格式化插件(选中一段html代码,按Ctrl+Alt+f即可。)

快捷键


Ctrl+L 选择整行(按住-继续选择下行)
Ctrl+D 选择字符串 (按住-继续选择下个相同的字符串)
Alt+. 闭合当前标签
ctrl+shift+v 格式粘贴(保持缩进)


goto anything特效  (ctrl + p) 模糊匹配 @通配函数选择器


扩展选区
我非常喜欢Emacs的expand-region插件,ST2提供有类似的Expand Selection to Scope功能,但是不太好用,我建议安装ExpandRegion插件。
首先把光标移到某个位置:
然后按一次Cmd-Shift-Space (Win: Ctrl-Shift-Space)会选择当前的最小区域:
再按一次会向外扩展区域:
每次按都会不断地向外扩展区域,直到全选为止。

Emmet八个常用


在sublime 中,促发emmet 可以先保存为.html文件。然后输入下面的简写,按tab键就可促发效果了。

1. 生成html格式


输入 html:5

2. 简写Div


分享7个超实用的Emmet(zen coding)HTML代码使用技巧

大家可以看到,不管你是否添加了div,Emmet都会自动生成需要div元素。

含糊标签名称

这个技巧属于implicit tag names特性,你不需要指定div或者li,Emmet会自动帮助你生成,如下:

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

3. 带有DOM导航的链式缩写

如果你使用Emmet来扩展简单的class名称生成div的话。这个方式可以帮助你省去大量的时间。你只需要记住如下语法:

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

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

向上一层

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

如果需要的话你可以向上多层,如下:

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

4. 使用分组来简化你的代码结构

有的时候你可能会发现使用向上符号比较复杂,这时候可能使用分组更加的合理。如下:

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

一个更复杂一些的例子,如下:

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

5. 插入文本和属性

如果你需要生成HTML,内容和属性也是你常常需要添加的。很多开发人员只是使用Emmet来生成框架,然后再添加内容。其实你可以在生成页面框架的过程中同时添加属性和内容。

从下面代码可以看到,你输入的文字和属性都可以分别通过大括号和中括号来生成。

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

6. 添加多个class到一个元素 

这个非常简单,你只需要使用逗号来添加多个class,如下:

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

7.  重复添加

这可能是最让人舒服的操作了,帮助你重复添加元素:

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

如果你整合分组功能,那么你将能够处理更复杂的HTML生成:

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

8. 自动列表记数 

如果你需要按顺序生成HTML元素,这个技巧你一定喜欢,使用$符号可以帮助你生成一系列数字,支持class,id,属性,内容等等。如下:

分享7个超实用的Emmet(zen coding)HTML代码使用技巧

注意如果你需要生成2位的数字,使用两个$符号即可。 


相关推荐

发表评论

路人甲
看不清楚?点图切换

网友评论(1)

ctrl+g 跳转行号
小草 7年前 (2016-07-24) 回复