如何优雅地使用 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在设置好的文本上扩展出来,能提升效率,设置方法:

1. 菜单: Tools –> New Snippet… 自动打开模板
2. 编辑好以后保存在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>

1. content下CDATA包裹的是扩展后的最终文本
2. tabTrigger是snippet的标识, 在标识后面按tab会用content替换标识
3. 触发替换的做用域

例子以下:

<snippet> <content><![CDATA[ @author: 德淸 deqing.qdq@alibaba-inc.com ]]></content> <tabTrigger>author</tabTrigger> </snippet>

在author以后按tab键会扩展为@author: 德淸 deqing.qdq@alibaba-inc.com

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建立文件夹和配置文件，手动建立所需目录，文件一样能够达到安装的目的：

1. 菜单中选择：Preferences > Browse Packages...
2. 在打开的资源管理器中向上一个目录，而后进入到Installed Packages/目录
3. 下载Package Control.sublime-package并复制到Installed Packages/目录下
4. 重启Sublime Text，完成安装

卸载已安装的插件

若是是经过package control安装的, 快捷键Cmd + shift + p打开面板搜索Package Control: Remove Package而后选择须要卸载的插件

SidebarEnhancements

为左侧sidebar增长功能

Emmet

Emmet经过简洁的语法描述html内容，提升工做效率

使用Package Control安装Emmet

1. 快捷键ctrl + shift + p而后在控制窗口中输入Package Control: Install Package
2. 选择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安装

1. 若是没有安装过Package Control，先安装
2. 按快捷键Ctrl + shift + p打开命令窗口
3. 在命令窗口中执行Package Control: Install Package
4. 选择Markdown Preview并进行安装

手动安装

1. 在菜单中选择Preferences > Browse Packages...
2. 在弹出的资源管理器中向上一个目录，而后进入到Installed Packages/目录
3. 下载sublimetext-markdown-preview压缩包到Installed Packages/目录下并重命名为Markdown Preview.sublime-package
4. 重启Sublime Text

预览Markdown文件

1. 打开Markdown文件
2. 快捷键Ctrl + shift + p，在控制窗口中输入Markdown Preview
3. 此时有多个选项可选，通常选择Markdown Preview: Preview in Browser
4. 此时要求选择解析器，任选一个便可
5. 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

1. 支持整个css文件添加前缀，也可选中部分cas代码添加前缀
2. 快捷键ctrl + shift + p，输入Autoprefix CSS回车

使用BracketHighlighter高亮括号配对

高亮括号配对在查找时很方便

使用Package Control安装BracketHighlighter

1. 若是没有Package Control，先安装
2. 快捷键ctrl + shift + p，在控制窗口中输入Package Control: Install Package
3. 在控制窗口中输入BracketHighlighter并选择安装
4. 安装完成

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