[Web前端工具篇]SubLime 3基础技巧与编程

简介

最近在复习Web前端知识的时候，接触到Sublime这个神器，由于插件多，开启速度快，各种代码快的定义,写WEB前端简直开发神速，这篇文章就是我在使用中需要掌握到的一些基本知识。

1.说明文档README.md。

大家在下载开源项目的时候，通常会看见项目中的READ.md格式的文件,主要是介绍项目的文档，这里我写了一篇文章Sublime 3安装Markdown插件，不会安装插件的也可以看下。

2.快速浏览静态页面

当我们在别写html文件的时候，通常需要拖动文件,或者将网页放入制定的Web服务文件夹刷新界面，我感觉挺麻烦的，就装了下面的这个插件。

2.1下载

• SubLime 3：下载
• Sublime-server ：此插件可以开启html的服务。下载

注意：

打开服务后，不要点击关闭，不然会死掉，我们必须直接退出sublime，再进入。

3.快捷键大全

下面两个都是Web开发的神器了。这里就不多说了，自己百度一下。下面快捷键需要安装一下插件后有些才能升效。

• SublimeTmpl：https://github.com/kairyou/sublimeTmpl
• Emmet ：http://docs.emmet.io/

最常用的
1、新建文件-输入"html:xt"后  按"Ctrl+E键"或 "tab键" ,可快速生成xhtml 1.0的模板
2、新建文件-输入"html:5"后   按"Ctrl+E键"或 "tab键" ,可快速生成HTML5的模板
3、新建文件-输入"!"后		 按"Ctrl+E键"或 "tab键" ,可快速生成HTML5的模板

文本编辑最常用
Ctrl+Shift+ D  		快速复制
Ctrl+L  		    快速选中
Ctrl+鼠标左键 		集体输入
Ctrl+H  		    查找替换
Ctrl+F 		        标签查找
Ctrl+Shift+ ↑  		整体移动
----------------------------------------------

Ctrl+Shift+ [  		折叠代码 (在CSS中表示紧凑格式，在html中为折叠代码)
Ctrl+Shift+ ]  		折叠代码 (在CSS中表示扩张格式，在html中为恢复折叠代码)
Ctrl+Shift+C 		CSS属性排序
Ctrl+Alt+N	   		快速创建文件(填上文件扩展名可生成模板，例如：demo.html)
Ctrl+Alt+K     		刪除不必要的空白
Ctrl+Shift+Alt+F 	格式化JS代码
Ctrl+Shift+Alt+M	压缩CSS/JS代码(生成结果为：文件名.min.css、文件名.min.js)
F1  				Chrome浏览器预览
F2					Firefox浏览器预览
F3					IE浏览器预览
F4					打开调色盘
F11					全屏
F12					默认浏览器预览
按住鼠标滚轮下拉可多行编辑
------------------------------------------------------------------------
Ctrl+D 选词 （反复按快捷键，即可继续向下同时选中下一个相同的文本进行同时编辑）
Ctrl+G 跳转到相应的行
Ctrl+J 合并行（已选择需要合并的多行时）
Ctrl+L 选择整行（按住-继续选择下行）
Ctrl+M 光标移动至括号内开始或结束的位置
Ctrl+T 词互换
Ctrl+U 软撤销
Ctrl+P 查找当前项目中的文件和快速搜索；输入 @ 查找文件主标题/函数；或者输入 : 跳转到文件某行；
Ctrl+R 快速列出/跳转到某个函数
Ctrl+K Backspace 从光标处删除至行首
Ctrl+K+B 开启/关闭侧边栏
Ctrl+KK 从光标处删除至行尾
Ctrl+K+T 折叠属性
Ctrl+K+U 改为大写
Ctrl+K+L 改为小写
Ctrl+K+0 展开所有
Ctrl+Enter 插入行后（快速换行）
Ctrl+Tab 当前窗口中的标签页切换

Ctrl+Shift+A 选择光标位置父标签对儿
Ctrl+Shift+D 复制光标所在整行，插入在该行之前
ctrl+shift+F 在文件夹内查找，与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找
Ctrl+Shift+K 删除整行
Ctrl+Shift+L 鼠标选中多行（按下快捷键），即可同时编辑这些行
Ctrl+Shift+M 选择括号内的内容（按住-继续选择父括号）
Ctrl+Shift+P 打开命令面板
Ctrl+Shift+/ 注释已选择内容
Ctrl+Shift+↑可以移动此行代码，与上行互换
Ctrl+Shift+↓可以移动此行代码，与下行互换
Ctrl+Shift+[ 折叠代码
Ctrl+Shift+] 展开代码
Ctrl+Shift+Enter 光标前插入行

Ctrl+PageDown 、Ctrl+PageUp 文件按开启的前后顺序切换

Ctrl+Z 撤销
Ctrl+Y 恢复撤销
Ctrl+F2 设置/取消书签
Ctrl+/ 注释整行（如已选择内容，同“Ctrl+Shift+/”效果）
Ctrl+鼠标左键 可以同时选择要编辑的多处文本

Shift+鼠标右键（或使用鼠标中键）可以用鼠标进行竖向多行选择
Shift+F2 上一个书签
Shift+Tab 去除缩进
Alt+Shift+1（非小键盘）窗口分屏，恢复默认1屏
Alt+Shift+2 左右分屏-2列
Alt+Shift+3 左右分屏-3列
Alt+Shift+4 左右分屏-4列
Alt+Shift+5 等分4屏
Alt+Shift+8 垂直分屏-2屏
Alt+Shift+9 垂直分屏-3屏

Ctrl+Shift+分屏序号 将当前焦点页分配到分屏序号页

Alt+. 闭合当前标签
Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑

Tab 缩进 自动完成
F2 下一个书签
F6 检测语法错误
F9 行排序(按a-z)

多行游标的技巧：

1.选中要修改的地方ctrl+D，要跳过不需要修改的选中的就用ctrl+k+d
2.选中要修改的地方ctrl+D,选中所有要修改的 alt+f3
3.ctrl+A，然后ctrl+shift+L

4.创建代码段

创建代码块

1. 创建代码块

2. 解放{触发词}，触发词
3. 解放source.{filetype}，表示在什么地方写代码可以提示
4. 文件后缀{fileName}.sublime-snippet
   示例：

	
	
	forin
	
	source.js

5.保存制定文件路径，文件路径:\Sublime Text 3\Data\Packages\User\snippers...，这里的sinppers没有可以自己创建。

注意

1.由于其他插件冲突，作用于为html的时候，可以注释掉，会提示
2.代码片段也可以写到离线包的snippers文件夹下。
D:\tools\Sublime Text 3\Data\Packages\MarkdownEditing\snippets

参考文献

• 快捷键使用
• 前端开发必备！Emmet使用手册