常用快捷键
选择类
- Ctrl+D 选中光标所占的文本，继续操作则会选中下一个相同的文本。
- Alt+F3 选中文本按下快捷键，即可一次性选择全部的相同文本进行同时编辑。举个栗子：快速选中并更改所有相同的变量名、函数名等。
- Ctrl+L 选中整行，继续操作则继续选择下一行，效果和 Shift+↓ 效果一样。
- Ctrl+Shift+L 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行。
- Ctrl+Shift+M 选择括号内的内容（继续选择父括号）。举个栗子：快速选中删除函数中的代码，重写函数体代码或重写括号内里的内容。
- Ctrl+M 光标移动至括号内结束或开始的位置。
- Ctrl+Enter 在下一行插入新行。举个栗子：即使光标不在行尾，也能快速向下插入一行。
- Ctrl+Shift+Enter 在上一行插入新行。举个栗子：即使光标不在行首，也能快速向上插入一行。
- Ctrl+Shift+[ 选中代码，按下快捷键，折叠代码。
- Ctrl+Shift+] 选中代码，按下快捷键，展开代码。
- Ctrl+K+0 展开所有折叠代码。
- Ctrl+← 向左单位性地移动光标，快速移动光标。
- Ctrl+→ 向右单位性地移动光标，快速移动光标。
- shift+↑ 向上选中多行。
- shift+↓ 向下选中多行。
- Shift+← 向左选中文本。
- Shift+→ 向右选中文本。
- Ctrl+Shift+← 向左单位性地选中文本。
- Ctrl+Shift+→ 向右单位性地选中文本。
- Ctrl+Shift+↑ 将光标所在行和上一行代码互换（将光标所在行插入到上一行之前）。
- Ctrl+Shift+↓ 将光标所在行和下一行代码互换（将光标所在行插入到下一行之后）。
- Ctrl+Alt+↑ 向上添加多行光标，可同时编辑多行。
- Ctrl+Alt+↓ 向下添加多行光标，可同时编辑多行。
编辑类
- Ctrl+J 合并选中的多行代码为一行。举个栗子：将多行格式的CSS属性合并为一行。
- Ctrl+Shift+D 复制光标所在整行，插入到下一行。
- Tab 向右缩进。
- Shift+Tab 向左缩进。
- Ctrl+K+K 从光标处开始删除代码至行尾。
- Ctrl+Shift+K 删除整行。
- Ctrl+/ 注释单行。
- Ctrl+Shift+/ 注释多行。
- Ctrl+K+U 转换大写。
- Ctrl+K+L 转换小写。
- Ctrl+Z 撤销。
- Ctrl+Y 恢复撤销。
- Ctrl+U 软撤销，感觉和 Gtrl+Z 一样。
- Ctrl+F2 设置书签
- Ctrl+T 左右字母互换。
- F6 单词检测拼写
搜索类
- Ctrl+F 打开底部搜索框，查找关键字。
- Ctrl+shift+F 在文件夹内查找，与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找，略高端，未研究。
- Ctrl+P 打开搜索框。举个栗子：1、输入当前项目中的文件名，快速搜索文件，2、输入@和关键字，查找文件中函数名，3、输入：和数字，跳转到文件中该行代码，4、输入#和关键字，查找变量名。
- Ctrl+G 打开搜索框，自动带：，输入数字跳转到该行代码。举个栗子：在页面代码比较长的文件中快速定位。
- Ctrl+R 打开搜索框，自动带@，输入关键字，查找文件中的函数名。举个栗子：在函数较多的页面快速查找某个函数。
- Ctrl+： 打开搜索框，自动带#，输入关键字，查找文件中的变量名、属性名等。
- Ctrl+Shift+P 打开命令框。场景栗子：打开命名框，输入关键字，调用sublime text或插件的功能，例如使用package安装插件。
- Esc 退出光标多行选择，退出搜索框，命令框等。
显示类
- Ctrl+Tab 按文件浏览过的顺序，切换当前窗口的标签页。
- Ctrl+PageDown 向左切换当前窗口的标签页。
- Ctrl+PageUp 向右切换当前窗口的标签页。
- 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+K+B 开启/关闭侧边栏。
- F11 全屏模式
- Shift+F11 免打扰模式
转自https://www.cnblogs.com/rudong/p/7889114.html
插件
Emmet(快速书写CSS/HTML)
在前端开发的过程中，最费时间的工作就是写 HTML、CSS 代码。一堆的标签、属性、括号等，头疼。这里推荐一个Emmet语法规则，让你写的时候爽到飞起，能大大提高代码书写，只需要敲一行代码就能生成你想要的完整HTML结构，下面会介绍如何使用。
Emmet是一款插件，只要能安装他的编辑器都能使用，大部分编辑器都可以使用该语法规则,我们平时开发的Sublime Text、Eclipse、Notepad++、VS code、Atom、Dreamweaver等等编辑器都可以使用。
先来个例子：
这个普通的HTML结构，你需要多久打出来呢？
我只需要几秒钟，写好下面这条语句，按下键盘Tab键即可看到上图中的结构了
div#box>(p.title+ul.list>li.child$*3>{我是第$个})+div#box2
仅仅一行代码就生成了一个复杂的HTML结构，并且id，class，内容都对应的上。
缩写
Emmet使用特殊的表达式Abbreviations，也就是缩写：这种特殊的表达式会被Emmet解析并转义成结构化的代码块。Emmet使用类似CSS选择器的语法来描述元素在DOM树节点的位置和属性。
例如
#page>div.logo+ul#navigation>li*5>a{Item $}
会被转义成
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>
HTML元素
在Emmet中可以使用元素名例如 div 或 p 生成HTML标签。Emmet没有预设任何标签名，所以可以使用任何可用名称来生成HTML标签：div →
或 foo →- 在编辑器中输入元素名称，即可自动补全生成 HTML 标签，即使不是标准的 HTML 标签。
- 输入：! 或者 html:5 或者 html:4s 或者 html:4t 将自动补全html基本结构
!
会被转义成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
嵌套操作符
child：>
使用 > 生成元素子节点
div>ul>li
会被转义成
<div>
<ul>
<li></li>
</ul>
</div>
Sibling: +
使用 + 生成元素兄弟节点
div+p+bq
会被转义成
<div></div>
<p></p>
<blockquote></blockquote>
Climb-up: ^
使用 ^ 在元素父节点生成新的元素节点
操作符 ^ 的作用和 > 刚好相反
用 > 可以在子级生成新的节点
div+div>p>span+em
会被转义成
<div></div>
<div>
<p><span></span><em></em></p>
</div>
用 ^ 可以在父级生成新的节点
div+div>p>span+em^bq
会被转义成
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
用n个 ^ ，就可以在第n父级生成新的节点
div+div>p>span+em^^^bq
会被转义成
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
Multiplication: *
使用 * 生成多个相同元素
ul>li*5
会被转义成
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Grouping: ()
圆括号 () 是Emmet的高级用法，用来实现比较复杂的DOM结构
div>(header>ul>li*2>a)+footer>p
会被转义成
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
还可以嵌套使用圆括号 ()
(div>dl>(dt+dd)*3)+footer>p
会被转义成
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
属性操作符
ID 和 CLASS
Emmet给元素添加ID和CLASS的方法和CSS的语法类似
div#header+div.page+div#footer.class1.class2.class3
会被转义为
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
自定义属性
使用[attr]标记来添加自定义属性
td[title="Hello world!" colspan=3]
会被转义为
<td title="Hello world!" colspan="3"></td>
元素编号
使用 $ 操作符可以对重复元素进行有序编号
ul>li.item$*5
会被转义为
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
还可以用多个 $ 定义编号的格式
ul>li.item$$$*5
会被转义为
<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>
更灵活的编号方式
使用 @ 修饰符可以改变编号的格式
例如：
在 $ 后面添加 @- 可以改变编号顺序
ul>li.item$@-*5
会被转义成
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
在 $ 后面添加 @N 可以改变编号基数
ul>li.item$@3*5
会被转义为
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
还可以组合使用上面的修饰符
ul>li.item$@-3*5
会被转义为
<ul>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
</ul>
文本操作符
Emmet使用 Text:{} 给元素添加文本内容
a{Click me}
会被转义为
<a href="">Click me</a>
注意： {text} 在Emmet中是被当成单独的元素来解析的，但当和其他元素结合使用时会有特殊的含义
例如：
a{click} 和 a>{click
会输出相同的结果，但
a{click}+b{here} 和 a>{click}+b{here}
输出的结果则不一样
<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>
在 a>{click}+b{here} 中， 元素是元素的子节点。这个就是区别：当 {text} 直接写在元素后面时，并不会改变父元素的上下文。
下面是一个更复杂的案例:
p>{Click }+a{here}+{ to continue}
会被转义为
<p>Click <a href="">here</a> to continue</p>
而
p{Click }+a{here}+{ to continue}
则会被转义为
<p>Click </p>
<a href="">here</a> to continue
文本操作符也可以搭配$一起使用，例如 (sublimeText的插件对这个功能支持有点奇怪)
select>.test$*5>{选项$$$}
会被转义为
<select name="" id="">
<option class="test1">选项001</option>
<option class="test2">选项002</option>
<option class="test3">选项003</option>
<option class="test4">选项004</option>
<option class="test5">选项005</option>
</select>
SideBarEnhancements(侧边栏增强)
- 提供“删除”、“打开”和“剪贴板”操作。
- 关闭、移动、打开、恢复受重命名/移动命令的缓冲区。（甚至在文件夹上）
- 基本功能：新建文件/文件夹、编辑、打开/运行、打开文件位置、查找所选/父文件夹/项目、剪切、复制、粘贴、粘贴到父目录、重命名、移动、删除、刷新……
- 高级功能：可选复制URL编码后的路径、复制UTF-8编码的内容、复制base64转码后的内容（适合嵌入css）、复制快速生成img/a/script/style等标签内容
- 当删除操作受影响时，使用“首选项”来控制是否关闭缓冲区
- 允许在状态栏上显示“文件修改日期”和“文件大小”。（可能有点儿麻烦）
https://github.com/52fisher/SideBarEnhancements
JavaScript Enhancements/JavaScript Completions
JS代码提示以及各种前端便利功能。
若有收获，就点个赞吧
0 人点赞
