Sublime Text 3使用心得

心已赠人 2022-05-26 23:27 248阅读 0赞

## 1.Sublime Text 3介绍 ##

介绍

作为一个前端，有一款好的开发利器是必不可少的，editplus、notepad++都是不错的工具，体积轻巧，启动迅速（dw太浮肿了）。几年前，又有一款新的编辑器诞生，席卷前端界，惹得无数喜爱，不少前端er纷纷抛弃用了数年的“伙伴”，投入了她的怀抱——最新版Sublime Text 3。ST3是一款跨平台的编辑器，再也不用为换平台而找不到合适的、熟悉的编辑器担忧了。

Sublime Text 3 是一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件，不仅具有华丽的界面，还支持插件扩展机制，用她来写代码，绝对是一种享受。

界面

![Center][]

保存贴心提示

如果没有保存会当前编辑文件会有一个小圆点显示

![Center 1][]

编辑区

这是我们主要的工作区域，ST3支持代码自动缩进，代码折叠功能。

介绍几个常见的功能：

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

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

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

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

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

![Center 2][]

## 2.Html ##

### 2.1创建标准页面 ###

创建标准xhtml1.1页面命令：

输入：html:xxs

按下：tab键出现xhtml1.1标准页面

![Center 3][] ![Center 4][]

创建标准html5页面命令：

输入：html:5

按下：tab键出现html5标准页面

![Center 5][]

### 2.2创建html标记 ###

输入任何单标记、双标记名字按下tab出现正常标签对

输入：style

按下：tab键出现<style></style>标签对

![Center 6][] ![Center 7][]

### 2.3创建html标签含Id、多个类名的标记 ###

创建格式如同css选择器命名方式

如：id   \#id      class  .class

### 2.4创建HTML示例 ###

div.box

创建类名为box的div标记

![Center 8][] ![Center 9][]

div\#box

创建ID名为box的div标记

![Center 10][] ![Center 11][]

div\#box+div.box2

同时创建两个div标记 ID为box   类名为box2

![SouthEast][] ![SouthEast 1][]

div\#box>div.box2

同时创建两个div标记    ID为box 包含 类名为box2

![SouthEast 2][] ![SouthEast 3][]

div\#box>div.box2\*2

创建一个id为box标记包含两个类名为box2的标记

![SouthEast 4][]

![SouthEast 5][]

![SouthEast 6][]![SouthEast 7][]

div.aa.bb\*2>div.box2\*2

同时创建2个div并且给它2个类名aa bb 它里面有2个类名为box的div

![SouthEast 8][] ![SouthEast 9][]

div.aa.bb\*2>div.box2+div.box3

同时创建2个div并且给它2个类名aa bb 它里面有2个div第一个类名box2第二个类名box3

![SouthEast 10][] ![SouthEast 11][]

div.box\{$\}\*5

创建5个div类名box内容为1-5

![SouthEast 12][] ![SouthEast 13][]

div.box\{代码I Love You!\}

创建1个div类名box内容为“代码I Love You!”

![SouthEast 14][] ![SouthEast 15][]

div.box\{代码I Love You!\}>div.innerbox\{Hi!\}

创建1个div类名box内容为“代码I Love You!” 它里面有一个div类名innerbox内容为”Hi!”

![SouthEast 16][] ![SouthEast 17][]

## 3.快捷键 ##

主要快捷键列表：  
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 上一个书签

[Center]: /images/20220527/0de16823eb0843faa1fd51026babfb88.png
[Center 1]: /images/20220527/56fcfa3090ca4e3396b1c12f9fc5f17d.png
[Center 2]: /images/20220527/c8d360f6902c4208b9e5e04584103a31.png
[Center 3]: https://img-blog.csdn.net/20160714105206383?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 4]: /images/20220527/713d49cd7d0f477b9ab6cf1e11754bcc.png
[Center 5]: /images/20220527/857394187507493d9f383ab5b1897698.png
[Center 6]: https://img-blog.csdn.net/20160714105332498?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 7]: /images/20220527/501b2c8331af4809b8fe5ce8ca4b7122.png
[Center 8]: https://img-blog.csdn.net/20160714105453046?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 9]: /images/20220527/fc74b74792d94a5093c7c1673be4e8e7.png
[Center 10]: https://img-blog.csdn.net/20160714105528888?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 11]: /images/20220527/404137d5a7ac4cb1821a3bb1022c8bf1.png
[SouthEast]: https://img-blog.csdn.net/20160714105700687?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: /images/20220527/c47b118f2a754dcbb2f343afd476b75b.png
[SouthEast 2]: https://img-blog.csdn.net/20160714105807281?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 3]: /images/20220527/9dbc18e7388c4fc7b7e7d6a13e75488d.png
[SouthEast 4]: /images/20220527/c222d38079dd4f0aa955c185084d0371.png
[SouthEast 5]: /images/20220527/f7945f324b4d4a5aa4dc5a1b9e9bd7be.png
[SouthEast 6]: https://img-blog.csdn.net/20160714105911266?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 7]: /images/20220527/9f951433990541b4bc7767cc313f6dd1.png
[SouthEast 8]: https://img-blog.csdn.net/20160714110041564?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 9]: /images/20220527/d7404e46d0b840cc81e0033a9ed65202.png
[SouthEast 10]: https://img-blog.csdn.net/20160714110142001?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 11]: /images/20220527/3c41739235f6423e86c9a82ac81b6d9a.png
[SouthEast 12]: https://img-blog.csdn.net/20160714110220533?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 13]: /images/20220527/7916beeb84544f5d8dfee4f11713f1ea.png
[SouthEast 14]: https://img-blog.csdn.net/20160714110313228?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 15]: /images/20220527/9041e7d47e6f4bf4bffb1b09a0a6af55.png
[SouthEast 16]: https://img-blog.csdn.net/20160714110350963?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 17]: /images/20220527/d8b08eaba0b54d8ca19b0e4ba3f1f9bf.png