前端开发神器sublime text3使用总结

2015-4-19 Jon 前端工具

sublime Text作为一个前端开发神器,有着强大的快捷键和插件功能

一、sublime text3快捷键的文章网上已经多不胜数了,下面粘到这里以便日后查询

0、常用类

ctrl+shift+" 选择与光标关联的开始和结束标签
ctrl+shift+a 选择容器内内容
ctrl+shift+↑ 或 ↓  上移或下移行:
ctrl+shift+d 复制行或选中项:
ctrl+shift+c 调色板
ctrl+[ 或 ]  增加和减少缩进
alt+shift+w 用标签包裹行或选中项
ctrl+shift+y 数学表达式计算:
alt+shift+↑ 或 ↓,ctrl+ ↑ 或 ↓   数值递增和递减:
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 上一个书签


1、选择类

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+↓ 向下添加多行光标,可同时编辑多行。


2、编辑类

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 单词检测拼写


3、搜索类

Ctrl+F 打开底部搜索框,查找关键字。
Ctrl+shift+t  重新打开最近关闭文件
Ctrl+shift+F 在文件夹内查找,与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找,略高端,未研究。
Ctrl+P 打开搜索框。举个栗子:1、输入当前项目中的文件名,快速搜索文件,2、输入@和关键字,查找文件中函数名,3、输入:和数字,跳转到文件中该行代码,4、输入#和关键字,查找变量名。
Ctrl+G 打开搜索框,自动带:,输入数字跳转到该行代码。举个栗子:在页面代码比较长的文件中快速定位。
Ctrl+R 打开搜索框,自动带@,输入关键字,查找文件中的函数名。举个栗子:在函数较多的页面快速查找某个函数。
Ctrl+: 打开搜索框,自动带#,输入关键字,查找文件中的变量名、属性名等。
Ctrl+Shift+P 打开命令框。场景栗子:打开命名框,输入关键字,调用sublime text或插件的功能,例如使用package安装插件。
Esc 退出光标多行选择,退出搜索框,命令框等。


4、显示类

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 免打扰模式


二、sublime text3常用的功能:
1、自动完成:自动完成的快捷键是Tab和Enter,如果在html文件中,输入cl按下tab或Enter,即可自动补全为class=””

2、多列编辑:按住ctrl点击鼠标,会出现多个闪烁的光标,这时可同时修改多处
或者按住鼠标中键拖拽,同时编写多行代码

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

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

5、右键功能:
show unsaved changes,显示未保存的修改,红色减号表示删去的内容,绿色加号表示新增的内容
Open Containing Folder…,打开包含此文件的文件夹,这个很方便找到相关的文件。
Copy File Path,复制文件路径,方便我们复制路径到浏览器中查看。

6、人性化设计:从ST2开始就有很多设计细节还是值得称赞的,比如点击一个标签或者括弧,会在起始处显示下划点线,方便看清代码结构,每一层嵌套代码间都有竖线,起到视觉辅助的作用。选中某个词还会给其他地方相同的词加上方框。另外还有代码折叠功能。

三、设置
ST3的设置只有两个选项,分别是系统设置和快捷键设置。
一般我们修改设置的话,最好复制出来在user里修改,以免以后升级default被覆盖掉。

l、Settings:在此文件里,可以修改很多东西,比如主题,字体,字号,是否显示行号、自动缩进、自动完成。很多都默认选中了,我另外修改了几处地方:
always_show_minimap_viewport——默认显示缩略图
draw_minimap_border——显示缩略图边框
font_size——字号

2、Key Bindings:快捷键设置,ST3的快捷键很多,改的时候注意不要覆盖了。因为快捷键众多,所以有下面这种组合快捷键,先按下ctrl+k,松开k,再按下j就可以展开全部折叠代码了。

四、 插件

1、安装打开浏览器的插件 SideBarEnhancements-st3

  地址:
  google 一下SideBarEnhancements-st3 在https://github.com/titoBouzout/SideBarEnhancements/tree/st3  下载安装包
    下载解压  打开sublime text3 > preferences > browse packages  复制过去  重启软件
    打开 sublime text3 > preferences > package settings > side bar > key bindings user 复制下面代码,设置浏览器路径及打开的快捷键

  //chrome
  { "keys":["f2"], "command":"side_bar_files_open_with",
  "args":{
  "paths":[],
  "application":"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
  "extensions":".*"}},
  //ie
  { "keys":["f3"], "command":"side_bar_files_open_with",
  "args":{
  "paths":[],
  "application":"C:\\Program Files (x86)\\Internet Explorer\\iexplore.exe",
  "extensions":".*"}},


2、解除插件
  解决Sublime Text 3删除插件后在启动时弹出提示框的问题
  按ctrl+shift+p打开command palette
  输入“package control settings”,选择“package control settings – users”

  在打开的配置文件里删除“ZenCoding”那一行(如果是提示其他插件不可用,就删除该插件的相关内容)


五、自定常用代码
  Tools->New Snippet

  Hello, ${1:this} is a ${2:snippet}.//替换成需要使用的代码
  <tabTrigger>hello</tabTrigger>//消除注释,hello可以修改为想要的快键单词名
  <scope>source.python</scope>//消除注释,指定是什么类型的文件
  <!-- 下面是sublime支持语言的类型 -->
  Here is a list of scopes to use in Sublime Text 2 snippets -
  ActionScript: source.actionscript.2
  AppleScript: source.applescript
  ASP: source.asp
  Batch FIle: source.dosbatch
  C#: source.cs
  C++: source.c++
  Clojure: source.clojure
  CoffeeScript: source.coffee
  CSS: source.css
  D: source.d
  Diff: source.diff
  Erlang: source.erlang
  Go: source.go
  GraphViz: source.dot
  Groovy: source.groovy
  Haskell: source.haskell
  HTML: text.html(.basic)
  JSP: text.html.jsp
  Java: source.java
  Java Properties: source.java-props
  Java Doc: text.html.javadoc
  JSON: source.json
  Javascript: source.js
  BibTex: source.bibtex
  Latex Log: text.log.latex
  Latex Memoir: text.tex.latex.memoir
  Latex: text.tex.latex
  LESS: source.css.less
  TeX: text.tex
  Lisp: source.lisp
  Lua: source.lua
  MakeFile: source.makefile
  Markdown: text.html.markdown
  Multi Markdown: text.html.markdown.multimarkdown
  Matlab: source.matlab
  Objective-C: source.objc
  Objective-C++: source.objc++
  OCaml campl4: source.camlp4.ocaml
  OCaml: source.ocaml
  OCamllex: source.ocamllex
  Perl: source.perl
  PHP: source.php
  Regular Expression(python): source.regexp.python
  Python: source.python
  R Console: source.r-console
  R: source.r
  Ruby on Rails: source.ruby.rails
  Ruby HAML: text.haml
  SQL(Ruby): source.sql.ruby
  Regular Expression: source.regexp
  RestructuredText: text.restructuredtext
  Ruby: source.ruby
  SASS: source.sass
  Scala: source.scala
  Shell Script: source.shell
  SQL: source.sql
  Stylus: source.stylus
  TCL: source.tcl
  HTML(TCL): text.html.tcl
  Plain text: text.plain
  Textile: text.html.textile
  XML: text.xml
  XSL: text.xml.xsl
  YAML: source.yaml


标签: sublime

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 ©2015-2022 知向前端
qq:1614245331 邮箱:13515678147@163.com Powered by emlog sitemap