Sublime Text3 入门级学习及常用快捷键总结

膜拜各位大神，人家都总结的超级棒，这里只是做一个整理，作为自己的学习记录与总结

1、插件管理Package Control安装

Package Control是Sublime Text3负责插件管理的插件，所以安装Package Control插件时安装其他插件的前提

2、插件Emmet的安装及Tab补全代码问题解决

Emmet是一款Web前端开发工具Sublime非常有用的插件，使用仿CSS选择器的语法来生成代码，大大提高了HTML和CSS代码编写的速度。只需按住Tab键即可把一个简写展开成HTML和CSS的代码块
如下输入html:5按住Tab键即可生成HTML文件完整的结构：

3、使用Emmet语法补全代码

Emmet的插件被称为前端神器，且Emmet插件有非常强大的代码提示功能，该插件可以做到尽量少写代码

4、关于分屏

• 开启分屏：“view”——layout——Columns：2 ；快捷键：Alt+Shift+2。当然可以显示更多的分屏，如下，两屏显示效果，其中这两屏里面的内容可以通过点击文件头部随意拖动：
  
• 关闭分屏：“view”——“layout”——single或者使用快捷键：alt+shift+1

5、tab键失效问题

打开 preferences——>Key Bindings，找到以下代码：

[
  {
    "keys": [
      "tab"
    ],
    "args": {
      "action": "expand_abbreviation"
    },
    "command": "run_emmet_action",
    "context": [
      {
        "key": "emmet_action_enabled.expand_abbreviation"
      }
    ]
  }
]

然后直接删除、保存，即可

6、常用快捷键

• Ctrl+N 新建文件
• Ctrl+S 保存
• Ctrl+滚轮 放大或缩小文字
• Ctrl+Shift+d 复制光标所在整行，插入到下一行。
• Ctrl+Shift+k 删除光标所在整行
• Ctrl+Shift+↑ 将光标所在行上移
• Ctrl+Shift+↓ 将光标所在行下移
• Ctrl+Shift+[ 折叠选中代码
• Ctrl+Shift+] 展开选中代码
• Tab 向右缩进。
• Shift+Tab 向左缩进。
• Ctrl+J 合并选中的多行代码为一行。如：将多行格式的CSS属性合并为一行
• Ctrl+D 选中光标所占的单词，继续按D则会选中下一个相同的单词，若想跳过某一个不选择，则按K，然后继续按D选择下一个单词，该快捷键可以同时修改多个相同的单词
• Ctrl+K+K 从光标处开始删除代码至行尾。
• Ctrl+/ 注释单行或多行
• Ctrl+Shift+/ 注释选中的多行，不选中则不被注释
• Ctrl+Z 撤销
• Ctrl+Y 恢复撤销
• Tab 向右缩进
• Shift+Tab 向左缩进
• F6（有的是Fn+F6） 单词检测拼写
• Ctrl+`(英文输入法时左上角~那个键) 打开控制台
• Ctrl+鼠标左键点击多行 多行同时操作
• End 回到当前行尾端
• Home 回到当前行首端

CSS中的：

• 1 padding-top: 30px;
  2 padding-right: 20px;
  3 padding-bottom: 40px;
  4 padding-left: 100px;
  快捷键就是pdt、pdr、pdb、pdl 然后按tab （webstrom也是这样）
• border-top、border-right、border-bottom、border-left
  快捷键就是bdt、bdr、bdb、bdl 然后按tab （webstrom也是这样）

webstrom：

代码编辑
复制整行: Ctrl + D
删除整行: Ctrl + Y
折叠当前块: Ctrl + “-”，折叠当前块以及子块: Ctrl + Alt + “-”，折叠全部块: Ctrl + Shift + “-”
展开, 把折叠的快捷键换成”+”
选择: Ctrl + W，会从小到大逐渐扩大。比如按一次,选中word，按两次，选择表达式, 三次, 整个函数

ctrl + x: 剪切(删除)行，不选中，直接剪切整个行，如果选中部分内容则剪切选中的内容

代码跳转: Ctrl + 左键 或者 Ctrl + B，可以跳转到函数或者变量的声明位置
调用位置: Alt + F7，查找调用者
自动补全: 最好是修改一下响应时间，Settings->Editors->General->Code Completing: Autopopup in 0.
打开文件: Ctrl + Shift + N
打开类: Ctrl + N
打开函数: Ctrl + F12
“超级”打开: 双击 shift，可以 search anywhere.
重构
改名: Shift + F6，修改函数名，变量名，文件名，同时修改所有引用的位置.
移动文件: F6, 并修改文件的引用位置, 包括 html 和 js文件
抽取函数: Ctrl + Alt + M，整块代码抽取成函数
抽取变量: Ctrl + Alt + V，当前选中抽取为变量
移动整块代码: Ctrl + Shift + ↑↓
包裹: Ctrl + Alt + T，外层包裹，比如 if、try catch等

1. ctrl + shift + n: 打开工程中的文件，目的是打开当前工程下任意目录的文件。
2. ctrl + j: 输出模板
3. ctrl + b: 跳到变量申明处
4. ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation)
5. ctrl + []: 匹配 {}[]
6. ctrl + F12: 可以显示当前文件的结构
7. ctrl + x: 剪切(删除)行，不选中，直接剪切整个行，如果选中部分内容则剪切选中的内容
8. alt + left/right:标签切换
9. ctrl + r: 替换
10. ctrl + shift + up: 行移动
11. shift + alt + up: 块移动(if(){},while(){}语句块的移动)
12. ctrl + d: 行复制
13. ctrl + shift + ]/[: 选中块代码
14. ctrl + / : 单行注释
15. ctrl + shift + / : 块注释
16. ctrl + shift + i : 显示当前CSS选择器或者JS函数的详细信息
17. ctrl + ‘-/+’: 可以折叠项目中的任何代码块，它不是选中折叠，而是自动识别折叠。
18. ctrl + ‘.’: 折叠选中的代码的代码。
19. shift + esc: 当前激活的任意小窗口最小化，也可以是alt+数字键，数字在小窗口有显示。
20. alt + ‘7’: 显示当前的函数结构。
    ctrl+G 到指定行的代码

基础设置：
ctrl+alt+s打开Settings界面，Editor > Colors&Fonts > Font，Default scheme是亮色调，可选Monokai，可以设置字体（我一般选择Consolas），字体大小，行间距。
WebStorm 改变字体大小 Ctrl+鼠标滚轮1.点击左上角的File，再点击setting；2.Editor->General，选择Change font size (Zoom) with Ctrl+Mouse Wheel；3.点击OK即可。
ctrl+alt+s打开Settings界面，Editor >Color Scheme>Color Scheme Font,设置字体及行间距