如何高效地使用 Sublime Text
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何高效地使用 Sublime Text相关的知识,希望对你有一定的参考价值。
参考技术A 熟练使用Sublime快捷键之MacMac
备注:具体符号对应的按键
⌘Command key
⌃Control key
⌥Option key
⇧Shift Key
为了方便大家记忆,将快捷键分成了8个类型, 分别为
Edit(编辑)
Selection(光标选中)
Find(查找)
View(视图)
Go to(跳转)
Project(工程)
General(通用)
Tabs(标签)
Edit(编辑)
⌘[向左缩进 | Left indent
⌘]向右缩进 | Right Indent
⌘⌃↑与上一行互换(超实用!)| Swap line up
⌘⌃↓与下一行互换(超实用!)| Swap line down
⌘⇧D复制粘贴当前行(减少多余的粘贴)| Duplicate line
⌘J拼接行(css格式化时挺有用) | join lines
⌘←去往行的开头 | Beginning of line
⌘→去往行末尾 | End of line
⌘⌃/块注释 | Toggle comment block
⌃K从光标开始的地方删除到行尾 | Delete to end
⌃⇧K删除一整行 | delete line
⌃T相邻单词互换位置,在','前试用,有惊喜(很有趣)| Transpose
⌘⇧↩向光标前插入一行|insert line before
⌘↩向光标后插入一行|inter line after
⌘⌥T插入特殊字符|Special characters
⌃D向后删除(很怪异的操作,不过感觉很酷炫)
Selection(光标选中)
⌘D选中相同的词 | Expand selection to words
⌃⌘G多重文本光标选中(再也不用⌘ D一个一个的找啦)| Expand all selection to words
⌘L选中一行|Expand selection to line
Esc单选(取消多重选择)|Single selection,Cancel multiple selections
⌃⇧↑一行一行向上选中|Add previous line
⌃⇧↓一行一行向下选中|Add next line
⌘⇧L将选中的区域分割成多行选中状态(多光标操作状态)|Split into lines
⌥+拖动鼠标多重光标选中
⌘⇧J已缩进层级为依据,一层层向外选中|Expand selection to indentation
⌃⇧M将匹配括号中的内容选中|Expand selection to brackets
Find(查找)
⌘F普通查找|Find
⌘G查找下一个|Find next
⌘⇧F在文件夹中查找| Find in files
⌘⇧E缓存用于替换的内容,方便之后的替换|Use selection for replace
⌘E缓存用于查找的内容,方便之后的查找|Use selection for find
⌘⌥E一个接一个往下替换|Replace next
View(视图)
推荐使用Origami插件,可以随意对sublime进行分割
Go to(跳转/定位)
⌘P跳转文件(很方便)| Go to anything
⌘R定位文件中的方法@| Go to symbol
⌘G定位文件中的行号:| Go to line
⌃M定位匹配的括号 | Jump to matching bracket
⌘F2设置/取消定位标记| Toggle bookmark
F2跳转到定位标记处 | Next bookmark
⌘⇧F2清除所有定位标记| Clear all bookmarks
⌘⌥→下一个打开的文件| Next file
Project(工程)
⌘⌃P在保存过的工程中切换,随意变换工程环境|Switch project window
General(通用)
⌘⇧P 打开命令行| Command prompt
⌘K, ⌘B隐藏/打开 侧边栏| Toggle side bar
Tabs(标签栏)
⌘⇧t 打开最后一次关闭的文件|Open last closed tab
^Tab 循环遍历tab|Cycle up through tabs
^⇧Tab 反方向循环遍历tab|Cycle down through tabs
如何优雅地使用 Sublime Text 3
概述
sublime text3 下载地址 :本文所有操作都是基于Sublime Text3,操作系统为mac,本文主要摘取自Sublime Text Unofficial Documentation。熟练掌握各种功能和技巧,能极大提高工作效率。
快捷键
Cmd + shift + d
: 复制并粘贴当前选中内容, 如果没选中,复制粘贴光标所在行
安装
- 官网下载
.dmg
文件 - 打开
.dmg
文件 - 拖拽Sublime Text 3到Applications文件夹
如果想要在命令行中启动Sublime Text,需要在终端执行一下命令:
ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/subl
这样设置之后在终端执行subl
即可打开Sublime Text,执行subl <filepath>
可以打开对应文件。
基本概念
熟悉本节介绍的概念能让你更好地理解本教程。
The Data Directory
几乎所有需要的文件都会保存在data directory下,不同操作系统路径不同:
- Windows:
%APPDATA%\Sublime Text 3
- OS X:
~/Library/Application Support/Sublime Text 3
- Linux:
~/.config/sublime-text-3
可以通过菜单:(Sublime Text -> Preferences -> Browse Packages
…)在findle中打开该目录的子目录。
The Packages Directory
这是data directory下的一个重要目录。关于编程和标记语言的所有支持都保存在这里。可以通过菜单:(Sublime Text -> Preferences -> Browse Packages
…)在findle
中打开该目录。
本文中Packages
, packages path
, packages folder
或者packages directory
都指它。
The User Package
Packages/User
用于保存自定义插件(plugins),snippets,宏(macros)。可以将它看作packages folder下的私人区域。个人程序和插件设置都存放在这里。
Sublime Text更新时不会修改里面的内容。
Sublime Text是可编程的
可以通过API使用Python开发插件。 快捷键Ctrl + `打开控制台,可以在这里执行Python脚本,可以通过这里安装一些插件。
Packages, Plugins, Resources and Other Terms
几乎Sublime Text的所有功能都可以扩展和自定义,可以修改编辑器行为,添加macro和snippets,扩展菜单等等。也可以利用编辑器API创建复杂插件。
Sublime Text的灵活性导致你需要学习很多配置文件。这些配置文件都是JSON活着XML格式。
本文中有时候讲这些配置文件叫做resources。
Sublime Text会查看packages folder下的resources。
package是指包含相关资源的目录。
vi/vim Emlation
可以使用Vintageous让Sublime Text支持vi/vim
编辑
多字段选择修改
Sublime Text支持多处文本的同时修改:
- 选中需要修改的文字,编辑器会自动提示文档内的相同文本。
- 按
Cmd + d
添加下一个文本段到标记列表,如果需要跳过当前文本段,按Cmd + k
然后Cmd + d
- 快捷键
Cmd + u
可以将当前文本段从编辑列表去掉 ESC
键可以退出编辑状态
整行选取
Cmd + l
可以选取光标所在行,活着当前选区所在所有行Cmd + Shift + l
可以将选区的分裂为多选区,可同时编辑
文本选择
alt + shift + <arrow>
在对应放上增加下一个token入选区ctrl + shift + m
选中光标所在括号的所有内容Cmd + shift + j
选中与光标所在行相同缩进的内容
字符交换
ctrl + t
交换相邻的两个字母
搜索替换
Sublime Text支持Perl Compatible Regular Expressions (PCRE) engine的正则表达式搜索,默认搜索为普通搜索,需要在搜索框左边点击对应按钮切换到正则表达式搜索,也可以使用快捷键进行切换。
option + Cmd + r
搜索的正则表达式和普通文本切换
单文件内的搜索和替换
Cmd + f
打开搜索框ESC
关闭搜索框option + Cmd + c
切换区分大小写option + Cmd + w
切换是否完整匹配:time 匹配timeOut或者 time单独单词option + Enter
选中全部匹配结果并可同时编辑Cmd + g
或者Enter
查找下一个Cmd + shift + g
查找前一个Cmd + e
选中文本后按此快捷键可直接搜索
替换
option + Cmd + f
打开替换面板Cmd + g
或者Enter
查找下一个option + Cmd + e
替换并查找下一个option + Enter
当焦点在替换面版时会选中全部匹配项并处于可编辑状态
多文件搜索
Cmd + shift + f
打开多文件搜索面版
设置多文件搜索范围
在多文件搜索面版的Where栏指定搜索范围,支持以下方式的搜索范围指定:
unix
格式的路径- 使用通配符排除特定文件
- symbolic location入:
<open folders>
,<open files>
等
也可以使用逗号结合以上三种格式的范围。
文件导航和文件管理
goto anything文件导航
搜索项目任意文件并导航。可在搜索栏进行过滤,可预览当前选中文件。
Cmd + p
打开文件面版Enter
打开当前项并关闭导航面版->
打开当前项,不关闭导航面版ESC
关闭导航面版
更多操作:
Cmd + r
搜索当前文件内的symbol,如函数,类,或者markdown的标题ctrl + g
跳转到指定行
左侧side bar导航
Cmd + k
然后Cmd + b
可切换导航关闭状态
项目
Sublime Text将当前打开文件,文件夹当作一个project,将文件夹拖拽到side bar可添加到当前项目。菜单中选择(Project -> Save Project As
…)可将相关文件文件夹关联信息保存,下次通过菜单(Project -> open project
)可快速打开所有相关文件。
使用snippet添加常用模板
将常用的代码段保存起来, 使用tab在设置好的文本上扩展出来,能提高效率,设置方法:
- 菜单:
Tools –> New Snippet
… 自动打开模板 - 编辑好之后保存在
Packages/User
目录下即可,文件后缀为.sublime-snippet
<snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<!-- <tabTrigger>hello</tabTrigger> -->
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
- content下CDATA包裹的是扩展后的最终文本
- tabTrigger是snippet的标识, 在标识后面按tab会用content替换标识
- 触发替换的作用域
例子如下:
<snippet>
<content><![CDATA[
@author: 德淸 [email protected]
]]></content>
<tabTrigger>author</tabTrigger>
</snippet>
在author之后按tab键会扩展为@author: 德淸 [email protected]
sublime text3基本使用及常用插件介绍
sublime text3 下载地址:本文所有操作都是基于Sublime Text3
这里是一个非常全面的教程
快捷键列表
Ctrl + g
跳转到相应的行Ctrl + m
在括号起始位置和终止位置之间切换Ctrl + Shift + m
选中括号内内容Ctrl + Shift + k
删除光标所在行Ctrl + x
当光标选中区间时剪切选中区间,否则剪切光标所在行Ctrl + Shift + up
向上选择行,并支持同时编辑多行Ctrl + Shift + down
向下选择行,并支持同时编辑多行Ctrl + l
选择光标所在行
FAQs
1.不支持gbk编码
安装插件ConvertToUTF8,可能需要根据提示安装辅助插件
2.HTML标签中间的大括号如何自动补全
菜单-> preferences -> Key Bindings - User
在json配置文件中添加如下配置
{ "keys": ["{"], "command": "insert_snippet", "args": {"contents": "{$0}"}}
3.中文输入法不跟随输入位置
答:官方修复之前使用:IMESupport插件
4.如何为特定文件类型制定语法高亮,如为.handlebar
文件设置html高亮
答:菜单中选择:View > Syntax > Open all current extension as... > html
这样就可以为自定义后缀名文件使用所需的语法高亮
Package Control插件管理
Package Control是Sublime Text的包管理器,可以通过它安装2000多个package。安装后的package将自动更新。基本上大部分工具通过自动和手动都可以完成安装。
通过控制台安装Package Control
1.按快捷键ctrl + `调出控制台
2.在控制台中运行如下代码
import urllib.request,os,hashlib; h = ‘7183a2d3e96f11eeadd761d777e62404‘ + ‘e330c659d4bb41d3bdf022e94cab3cd0‘; pf = ‘Package Control.sublime-package‘; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/‘ + pf.replace(‘ ‘, ‘%20‘)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install‘ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb‘ ).write(by)
3.以上代码将创建Package安装目录。并且下载Package Control.sublime-package文件到目录下。
4.重启Sublime Text,完成安装
手动安装Package Control
自动安装的原理其实就是在特定目录为Package Control创建文件夹和配置文件,手动创建所需目录,文件同样可以达到安装的目的:
- 菜单中选择:
Preferences > Browse Packages...
- 在打开的资源管理器中向上一个目录,然后进入到
Installed Packages/
目录 - 下载Package Control.sublime-package并复制到
Installed Packages/
目录下 - 重启Sublime Text,完成安装
卸载已安装的插件
如果是通过package control安装的, 快捷键Cmd + shift + p
打开面板搜索Package Control: Remove Package
然后选择需要卸载的插件
SidebarEnhancements
为左侧sidebar增加功能
Emmet
Emmet通过简洁的语法描述html内容,提高工作效率
使用Package Control安装Emmet
- 快捷键
ctrl + shift + p
然后在控制窗口中输入Package Control: Install Package
- 选择
Emmet
安装,重启Sublime Text完成安装
快捷键
Tab
在HTML, XML, HAML, CSS, SASS/SCSS, LESS and strings in programming languages (like JavaScript, Python, Ruby etc.)中按Emmet语法写好语句后Tab
键即可生成所需的代码。
由于某些语言中Sublime Text默认的Tab行为是作者更期望的,可以在Emmet.sublime-setting
文件中设置disable_tab_abbreviations_for_scopes
来取消Tab在这些文件类型中的触发。具体方法见官网tab-key-handler
ctrl + e
默认在大部分自定义后缀名的文件中使用Tab是不能触发Emmet的,但是使用ctrl + e
可以在任意文档中生效,这在编写html模板时非常有用
Emmet基本语法
emmet-zen-coding-tutorial是个很不错的教程,下面是一些简单的语法规则
元素
通过元素名生成HTML标签,如div生成<div></div>
,当需要生成自定义标签时,使用ctrl + e
即可,如foo生成<foo></foo>
子元素嵌套>
类似CSS子选择器div>ul>li
生成
<div>
<ul>
<li></li>
</ul>
</div>
兄弟元素+
类似CSS兄弟选择器,+生成兄弟关系的元素div+p+div
生成
<div></div>
<p></p>
<div></div>
向上操作符^
Emmet操作符的作用对象是基于当前上下文的,>
操作符会让上下文向下转移到深层元素,^
操作符可以向上移动上下文,如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>
多元素操作符*
使用*
后跟数字,生成对于数量的元素ul>li*5
生成
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
分组操作符()
使用括号分组完成复杂的逻辑div>(div>ul>li*2>a)*2+footer>p
生成
<div>
<div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
<div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
<footer>
<p></p>
</footer>
</div>
id和class生成
使用类似css中id和class的语法,可以为元素添加所需属性如div#header+div.cls1.cls2
生成
<div id="header"></div>
<div class="cls1 cls2"></div>
自定义属性
使用类似css中[attr]
的语法添加自定义属性td[title="Hello" colspan=3]
生成
<td title="hello" 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 $})*3
生成
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
Sublime Text Markdown Preview
sublimetext-markdown-preview是Sublime Text的一个Markdown预览插件,有了它就可以轻松使用Sublime Text编辑Markdown文档了。
使用Package Control安装
- 如果没有安装过Package Control,先安装
- 按快捷键
Ctrl + shift + p
打开命令窗口 - 在命令窗口中执行
Package Control: Install Package
- 选择
Markdown Preview
并进行安装
手动安装
- 在菜单中选择
Preferences > Browse Packages
... - 在弹出的资源管理器中向上一个目录,然后进入到
Installed Packages/目录
- 下载sublimetext-markdown-preview压缩包到
Installed Packages/目录
下并重命名为Markdown Preview.sublime-package
- 重启Sublime Text
预览Markdown文件
- 打开Markdown文件
- 快捷键
Ctrl + shift + p
,在控制窗口中输入Markdown Preview
- 此时有多个选项可选,一般选择
Markdown Preview: Preview in Browser
- 此时要求选择解析器,任选一个即可
- Sublime Text在默认浏览器中打开Markdown解析后的html文件,有时候只是在新选项卡中打开了html文件,可以右键:
copy file path
然后到浏览器中访问即可
sublime-autoprefixer
sublime-autoprefixer根据Can I Use数据库信息为CSS样式添加适当的厂商前缀,也可以自定义需要添加前缀的浏览器版本。
sublime-autoprefixer只对CSS起作用,不处理Sass或者LESS之类的预处理格式。
使用Package Control安装sublime-autoprefixer
- 快捷键
ctrl + shift + p
然后控制台输入Package Control: Install Package
- 在弹出窗口中输入Autoprefixer,安装,重启Sublime Text
使用autoprefixer
- 支持整个css文件添加前缀,也可选中部分cas代码添加前缀
- 快捷键
ctrl + shift + p
,输入Autoprefix CSS
回车
使用BracketHighlighter高亮括号配对
高亮括号配对在查找时很方便
使用Package Control安装BracketHighlighter
- 如果没有Package Control,先安装
- 快捷键
ctrl + shift + p
,在控制窗口中输入Package Control: Install Package
- 在控制窗口中输入
BracketHighlighter
并选择安装 - 安装完成
auto-save自动保存修改
这个插件在1秒没有按键时会自动保存。个人感觉太频繁,可根据需求选择
也可以启动sublime text的自动保存功能:
菜单: Sublime Text -> Preferences -> Settings - user
在配置文件中加上: "save_on_focus_lost": true
这样当前文档失去焦点时会自动保存
quoteHTML将HTML拼接为js字符串
转载请注明出处: http://qiudeqing.com/tools/2015/05/31/sublime-text-3.html
以上是关于如何高效地使用 Sublime Text的主要内容,如果未能解决你的问题,请参考以下文章