一个前端程序猿的Sublime Text3的自我修养 - 推酷
一个前端程序猿的Sublime Text3的自我修养
详细设置 && 20+插件
本文章会在本人有插件或者设置更新时，进行不定时更新
为什么要选择Sublime Text3？
Sublime Text3 自动保存，打开图片
跨平台启动快，多行选择。
插件，简直选不过来。
VIM兼容模式
菜单栏基础功能介绍
File ：文档相关，新建文件,打开文件或文件夹等。
Edit ：文件编辑相关，复制，剪切等（CVS大法好）。除此之外还有一些强大的功能。
Selection ：选择相关，帮助选择代码。
Find ：查找替换相关。这个和其它编辑器区别好像不大。
Ctrl+F 查找、 Ctrl+H 替换等。
View ：对Sublime_Text编辑器本身的一些配置。
SideBar :开启侧边栏 Ctrl+k,b
Show console ：打开控制台窗口，安装package control需要使用.
Goto ：快捷导航：下面介绍。Goto Anything
tools :工具，一些命令。
new Snippet ：自定义代码片段，保存到user下
Project : 项目相关，用的少。
Preferences ：对于sublime_text进行一些个性化定值。
Help ：如同名字。注册在这里
line 相关：
Ctrl+Shift+D ：复制当前行
Ctrl+Shift+K ：删除当前行
Ctrl+j 合并一行
Ctrl+Enter ：在当前行下添加新行。After
Ctrl+Shift+Enter ：在当前行上添加新行。Before
Comment 注释：
Ctrl+/ ：行注释。
Ctrl+Shift+/ ：块注释
Ctrl+Shift+P ：调用命令面板，快速查找，例如：改变语法模式等。
模糊匹配，可以减少对快捷键的记忆。
Shift+Alt+1，2，3，4，5 ：开启对应数字的多栏编辑
Ctrl+P ：Goto Anything
Ctrl+P : 查找项目中的文件：
直接输入名称：在不同文件中切换， 支持级联的目录模式
: ：+ 行号： Ctrl+G 定位到具体的行。
@ ：+ 符号： Ctrl+R 定位到具体的符号，例如：JS函数名，CSS选择器名。
# ：+ 关键字： Ctrl+; 匹配到具体的匹配的关键字。主要是模糊匹配。
Ctrl+D ：选中当前光标所在位置的 单词 。连续使用时，进行多光标选择，选中下一个同名单词。
Ctrl+K ：配合 Ctrl+D 可以 跳过 下一个同名单词。
Ctrl+L ：选择当前光标所在位置的 行 。连续使用时，继续选中下一行。
Ctrl+Shift+L ：在多行选中后，在所有选中的行后产生游标。
Alt+F3 ：选中文档中所有的同名单词。
Shift+鼠标右键 ：向下拖动，产生多个光标。
使用 Ctrl+`调出console面板输入 sublime.log_commands(True) ，可以得到当前使用的命令面板进行设置的值。方便进行快捷键的绑定。
下面这些都可以通过命令面板快捷查找
Settings-User ：个人对于sublime_text的定制。使用JSON格式，会直接覆盖掉 Settings-Default 默认设置中的内容。
// User/Preferences.sublime-settings//我觉得自带字体挺好的。{
&color_scheme&: &Packages/User/SublimeLinter/Dawn (SL).tmTheme&, //主题
&draw_minimap_border&: true, // 右侧缩略图边框
&font_size&: 10, // 字体大小
&highlight_line&: true, // 当前行标亮
&save_on_focus_lost&: true, // 当前行标亮
&theme&: &Spacegray Eighties.sublime-theme&, //主题相关
&word_separators&: &./\\()\&':,.;&&~!@#$%^&*|+=[]{}`~?&, // 双击选中中划线
&word_wrap&: true, //自动换行
&trim_trailing_white_space_on_save&: true, //自动移除行尾多余空格
&ensure_newline_at_eof_on_save&: true, //文件末尾自动保留一个空行
&disable_tab_abbreviations&: true, //禁用 Emmet 的 tab 键功能（请使用 ctrl+e）
&translate_tabs_to_spaces&: true, //把代码 tab 对齐转换为空格对齐
&tab_size&: 4, //空格数
&fade_fold_buttons&: false, //显示代码块的倒三角
&bold_folder_labels&: true, //侧边栏文件夹加粗
&auto_find_in_selection&: true //开启选中范围内搜索}
key - Bindings-User ：个人对于快捷键的设置。同样会覆盖默认的设置。例如：
//自动改变缩进格式
{ &keys&: [&shift+tab&], &command&: &reindent&,&args&:{&single_line&:false} }
实现保存自动刷新
tools :工具下的 Build System 选择新建一个选项后，进行如下设置（注意后缀），保存到user目录下：
//这样设置。。地址是你的浏览器位置{
&cmd& :[&C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe&,&$file&],
&selector&:[&text.html&]}
而且选择第一个 auto ， 修改内容后按 Ctrl+B ，可以看到自动打开了chrome并且是修改后的内容。
插件的安装与使用
安装 package control 。
这里我使用的是sublime_text3， 2的话上官网查询代码。
首先打开package control的
复制下面这一段代码:
import urllib.request,os, h = 'e5ee549c' + '8bc59f460fa163dafc88'; 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)
在上面说的 View –& Show console 打开控制台窗口，粘贴上面的代码，回车，然后就是等待安装了，需要一定的时间。安装完成后重启
使用 Ctrl+Shift+P ,打开控制面板，输入PC，效果如下，说明安装成功了。
按照上面的步骤，打开图片中的安装插件就行了，其实默认配色真的挺好看的
推荐在安装前，先去
。的样式，以及设置方法,说明文档。一般安装成功后，会自动弹出。
以 Theme - Spacegray 为例：
先使用 Ctrl+Shift+P 输入PCI，回车选择 Install Package 。需要等待一会加载时间，输入 Theme-Spacegray 。其实不输入完也会模糊匹配出来的。
回车等待安装就好，成功后会弹出一个使用设置的页面，把其中的如下代码拷贝到 Settings-User ，保存，你会发现，默认的主题已经变成了刚刚我们查看过的主题了。
&color_scheme&: &Packages/Theme - Spacegray/base16-eighties.dark.tmTheme&,
&theme&: &Spacegray Eighties.sublime-theme&
当然，你也可以通过菜单栏，进行主题的选择。会有相同的效果。它会自动在 Settings-User 进行设置。
个人常用插件及使用方法：
NO.1 AdvancedNewFile ：快速新建文件。
假设有文件夹 file 。我们正在输入代码，又想在新的子目录下新建html文件的话用传统方式得很多步，新建目录，新建文件，保存等等等。
但是有了该插件之后，事情就变得简单了许多，只需要按下 Ctrl+Shift+N ，输入文件夹以及文件名，你就会看到如下效果:（回车，你会发现已经子目录下的文件已经新建完成了！）
NO.2 Nettuts+ Fetch ：管理类库。
安装成功后输入 Ctrl+Shift+P 打开命令面板，输入 Fetch ，可以看到以下：
选择 file 可以看到设置的文件。选择下载
配合刚刚上面的插件使用，简直完美..
NO.3 Sidebar Enhancements ：增强侧边栏。
必装插件，无比强大，就不过多介绍了。可以在浏览器中打开，还可以配置不同文件的打开方式。
单单下面这一个功能就必须安装了！快捷在不同浏览器打开：参考：
可选 SyncedSideBar ：每次打开文件，侧边栏都会同步显示该文件所在目录树中的位置
NO.4 Doc Blockr ：代码块注释。
可以快速的对函数进行注释。保存代码规范
支持多种语言。（个人觉得brackets的这个插件比Sublime Text做得好多了。）
/* :回车创建一个代码块注释
/** :回车在自动查找函数中的形参等等。
它会生成 JSDoc 格式的注释。如果你从没有使用过类似的工具，DocBlockr 会让你觉得以前没有它是如何写代码的。帮助你创造你的代码注释，通过解析功能，参数，变量，并且自动添加基本项目。
NO.5 SublimeLinter-jshint :语法校验
需先安装 SublimeLinter 。
需先安装 Node.JS 及 npm 。
在cmd输入 npm install -g jshint ，等待安装成功就好了。
安装成功后，重启就可以测试代码的风格了。
当然还可以自定义校验规则，在该目录下使用 Ctrl+Shift+N 创建文件 .jshintrc ，在其中使用JSON格式配置校验风格。
//建议使用===，不使用时会有提示。{
&eqeqeq&:true}
并且在左下角会有错误提示。需要注意的是内容有更改时，才会立即生效。
详细自定义规则：
NO.6 Git :版本控制
可视化的操作：帮助你与你的Git repo协议进行交互。它支持很多命令像init, push, pull, branch, stash,等等。了解更多关于你在Sublime Text里面究竟能使用哪些Git功能，以提高您的工作流程。
GitGutter :
Sublime Text 有了 Git 插件之后，GitGutter 更好的帮助开发者查看文件之前的改动和差异，提升开发效率。
NO.7 Emmet ：不解释。
中文文档：地址
NO.8 JsFormat ：代码格式化
JsFormat 基于 JS Beautifier，可以帮助你自动格式化 JavaScript 和 JSON。这对于阅读代码是非常有用的。
快捷键： Ctrl + Alt + f 或者，你也可以使用菜单栏。
可定制喜欢的格式：在 SublimeText 3 中 Preferences -& Package Settings -& JsFormat -& Settings - Default 可以调整这些配置。
NO.10 jQuery ：JQuery的API代码片段
我知道目前在很多地方 jQuery 看似已经落伍了，但是如果你不是建立一个交互性很强的网站或者你只是想在已有应用上添加功能，它仍然是非常有用的。
比如，输入 $.a 就可以让我选择 $.ajax() ，然后自动扩展成以下代码：
url: '/path/to/file',
type: 'default GET (Other values: POST)',
dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
data: {param1: 'value1'},}).done(function() {
console.log(&success&);}).fail(function() {
console.log(&error&);}).always(function() {
console.log(&complete&);});
NO.11 BracketHighlighter :符号高亮
该插件提供行数列高亮的各种配对的语法符号，显示在行号上。效果如下：
配置方法参考
NO.12 JavaScript Next ：完美支持ECMAScript 6
JavaScript Next 提供了比默认JavaScript Package更好的语法高亮，而且他完美支持ECMAScript 6。
建议完全使用 JavaScript Next代替JavaScript Package。
NO.13 CSS3 :CSS3语法高亮
默认安装的Sublime Text对CSS3的支持让人抓狂，帧动画？别开玩笑了你只会看到一片白色的纯文本一样的代码。
事实上不光CSS3，我建议用CSS3 Package完全替代原来的CSS Package来完成语法高亮。把原来的禁用了吧
NO.14 Color Highlighter ：CSS颜色高亮
这个插件我等了很久了（在使用breakets的时候发现 的，好用到爆），我最早用Sublime Text写CSS时候就在想“这堆颜色码谁知道是什么颜色”。。
还是brackets的牛逼
Color Highlighter这个插件会检测CSS文件中的颜色码，不论是Hex码或者RGB码都能很好的显示。
Color Highlighter能够设置成用背景色或者边框提示颜色，我一般在Settings里做这样的设置：
&ha_style&: &filled&,
&icons&: false}
效果如下：
NO.15 Colorpicker ：使用一个取色器改变颜色
使用方法: ctrl + shift + c ，快捷键有冲突，需修改。可以通过 ctrl+shift+p ：来搜索调用
NO.16 Markdown Editing 和 Markdown Preview ，实现预览MD
当在 Sublime Text 中编写 markdown 文件时，在浏览器中打开全是乱码，因为还没有将 markdown 文件解析成相应的 HTML.
这两个插件的功能就是可以用浏览器浏览 Sublime Text 中编写的 markdown文件。
打开 Preferences-&Package Settings-&Markdown Preview-&Setting User 将下面这句话粘贴进去。
// &浏览markdown的浏览器的路径&
&browser& : &C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe&}//打开Preferences-&Key Binding User，添加下面一句话。{ &keys&: [&f6&], &command&: &markdown_preview&, &args&: {&target&: &browser&, &parser&:&markdown&} },//keys的值是以上面浏览器预览markdown文件。
直接按F6就可以打开了
不进行这些配置的话，因为我们在前面 实现保存自动刷新 使用了一些操作，按 ctrl+b ,就会在该目录下，创建一个同名的html文件。
选中该htnl文件，再次按 ctrl+b 可以达到同样的预览效果，不过还是F6简单不是吗？
NO.17 AutoFileName ：文件路径自动提示
这个直接安装就可以用了，挺方便的。
NO.18 Terminal ：在Sublime Text直接打开命令行
NO.19 CSScomb : CSS属性排序
NO.20 JavaScript Completions 和 Java Script & Node JS Snippets 。输入提示，代码补全
LiveStyle : 实时刷新双向修改
win下没有配置成功
IMESupport ，输入法不跟随时安装
FileHeader ，自动更新保存时间，文件模板
Quote HTML ，把HTML拼接成js插入字符串
CSS Format ，CSS格式化
AutoPrefixer ，浏览器私有属性前缀补全 (Node.js依赖)
ConvertToUTF8 ，GBK编码兼容
参考如下：
慕课网视频：
慕课网视频：
Sublime Text手冊：
Github资源合集
知乎Sublime Text专题
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致私活儿神器
MASHUPCLOUD 聚云网
最具价值web全栈课程
只做前端开发培训的好学校，专注于多方向全栈工程师培养。前端名师邵山欢亲自授课，课程涵盖HTML5、CSS3、Node.js、Angular、React诸多课程，免费视频广受学生好评。
跟牛人学前端
跟牛人学前端
妙味大前端自学宝典
妙味课堂2016年JavaScript课程大纲震撼升级、全栈来袭！
前端最新干货
前端最新干货
Nodejs在线课程
智能社就是全栈开发培训，国内正规的JavaScript、HTML5、NodeJS培训机构，专注于让学员获得快乐的学习体验并找到高薪工作的培训
您的位置： » 分类:
» 文章: 设置Sublime Text 3的光标样式
您可能感兴趣的文章
近期最热文章
- 4,106 - 2,534 - 1,626 - 1,485 - 1,390 - 767Sublime Text 2 能设置高亮当前的缩进线么? - CNode技术社区
积分: 8680
题叶, FP, GUI, Writing
如果是成片缩进的代码, 缩进线一层层的从上看到下很难对应上,
有没有办法设置缩进线对于当前的光标所在行的缩进进行高亮?
此贴没人回么？
Python 只有入门, Sublime 又没有中文详细文档… 沉了~~
像这样的线吗？有插件的。
需要有单独一条是特别亮的, 根据光标所在位置来确定
减少代码复杂程度，一个函数别超过10行，缩进层数别太多，也是个解决办法，嘿嘿！
安装插件 BracketHighlighter
我写 CoffeeScript 的啦
刚才看了下 Sublime Text 的配置上, 注释里有写这个.
以前看过一边配置. 没注意到啊好囧…
我设置成 draw_active 以后觉得细节上还是不对… 不知道有没有机会在这基础上改…
// Controls how the indent guides are drawn, valid options are
// &draw_normal& and &draw_active&. draw_active will draw the indent
// guides containing the caret in a different color.
&indent_guide_options&: [&draw_normal&],
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的Sublime Text 3 是一个了不起的软件。首先，它是一个干净，实用，可以快速的编写代码编辑器。它不仅具有令人难以置信的内置功能（多行编辑和VIM模式），而且还支持插件，代码片段和其他许多东西。
我知道，网上已经有许多关于 Sublime Text 3 的文章，这事好事情。在这篇文章中，我们将看到 Sublime Text 3 的最好的部分，您可能已经听说过其中的一些，但也许其他一些人还不知道。
Features（功能）
Command Palette （命令面板）&ctrl + shift + p
命令面板可以使你访问设置菜单中可以所有的东西，调用包命令，更改文件的语法，处理Sublime项目，等等。举例来说，你可以在命令面板中Git命令添加，分支，提交和推送。使用：ctrl&+&shift&+&p
File Switching （文件切换）&ctrl + p
Sublime Text提供了一个非常快速的方式来打开新的文件。只要按下Ctrl+ P并开始输入你想要打开的文件的名称。一旦找到文件，只需按enter键，就可以开始直接输入到该文件了！使用：ctrl&+&p
Goto Symbols （跳转标记）&ctrl + r
当你编辑一个大文件时，文件中有一堆方法，按Ctrl&+&R将其全部列出来，使他们更容易找到。开始尝试的输入你想要的，然后按Enter&就可以快速跳转这个方法了。使用方法：按Ctrl+&RSublime Text 3 有一个新功能（Goto Definition 转到定义）。它提供了 Sublime Text 更多功能，使其更接近于一个IDE。如果你有兴趣，可以自己去学习一下。
Multi-Edit（多行编辑）&ctrl + click
在我看来这绝对是Sublime Text最好的功能。使用它之后，就很难再回到其他文本编辑器。（愚人码头注：其实很多编辑器，IDE现在都有这功能了，比如：WebStorm）有许多不同的方式使用多行编辑：
ctrl&+&d: 选中光标所占的文本，继续操作则会选中下一个相同的文本。（愚人码头注：多按几下试试）
ctrl&+&click: 单击想要编辑的每一个地方，都将创建一个光标
ctrl&+&shift&+&f&和&alt&+&enter: 在你的文件查找一个文本，然后将其全部选中
以下叔整理的:
ctrl+l&选中整行，继续操作则继续选择下一行，效果和&shift+&&效果一样。
ctrl+shift+l&先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行。
ctrl+alt+&&或&ctrl+alt+鼠标向上拖动 向上添加多行光标，可同时编辑多行。
ctrl+alt+&&或&ctrl+alt+鼠标向下拖动 向下添加多行光标，可同时编辑多行。
shift+&&向上选中多行。
shift+&&向下选中多行。
Snippets（代码片段）
代码片段是Sublime Text的另一大特点。您可以使用预装的，也可以自己创建，或安装具有代码片段的包。你所要做的就是输入一个定义了代码片段的文本，它会扩展到你的代码段。例如，键入lorem将产生lorem存有文本。使用: 输入一个定义了代码片段的文本（例如lorem），然后按tab键。
这里有一篇关于创建代码片段的非常棒的文章，
Keyboard Shortcuts （快捷键）
Sublime Text的快捷键的数量是惊人的。我觉得这是Sublime Text另一个好的功能。如果太多了，你可以将自己常用的快捷键从主键（ home keys ）移到了自己的快捷键列表中（my keyboard）。对于Sublime Text键盘快捷键的完整列表，看看我们的键盘快捷键文章。
Projects（项目）
在Sublime Text中，项目是工作流程中不可或缺的一部分。一个项目仅仅是一个 Sublime工作空间，项目中的文件夹都是开放的，并显示在侧边栏中。这是很有帮助的，因为你可以定义一个项目，并添加文件夹到项目中，并能够迅速地在文件夹之间切换。使用项目，你只需要去Windows资源管理器或Finder中找到你想要的项目，并将其拖到Sublime Text，就可以了。保存一个项目：进入命令面板，输入保存项目。
切换项目：ctrl&+&alt&+&p
Packages/Plugins（包/插件）
Package Control（包控制）
Sublime Text提供了绝对必要的包管理器。这是安装下面列出的所有插件和主题的最佳方式。继续，在包控制在安装插件。
使用方法：进入命令面板（ctrl&+&shift+&p），然后键入&install。
包控制将加载所有可用于安装的包。看看你可以查找并安装自己喜欢的包..
Alignment （代码对齐）
一个非常简单和易于使用的插件,使你的代码组织和美观。当您重温代码时候非常有用。使用方法：选中要调整的行，然后按&Ctrl+&Alt&+&A
BracketHighlighter
该插件提供行数列高亮的各种配对的语法符号。（愚人码头注：就是将配对的括号等显示在行数列上）
Colorpicker
使用一个取色器改变颜色使用方法:&ctrl&+&shift&+&c
注：该插件在Mac上使用时非常漂亮
Emmet绝对的节省时间。您可以轻松快速地编写HTML。
使用方法:&ctrl&+&alt&+&enter&,并且开始输入Emmet风格的HTML
看看我们的，以了解更多，并自己尝试Emmet。
一个真正简单的方式来轻松地创建许多语言包括JavaScript，PHP和CoffeeScript的文档块。只要在函数的上面输入/**，按Tab就可以了。DocBlockr会观察函数需要的变量名和类型，并创建文档块。
Git帮助你与你的Git repo协议进行交互。它支持很多命令像init,&push,&pull,&branch,&stash,等的。了解更多关于你在Sublime Text里面究竟能使用哪些Git功能，以提高您的工作流程。
这是一个小巧有用的插件，它会告诉你自上次git commit以来已经改变的行。一个指示器显示在行号的旁边。
这个插件可以让你拉你的Gists，并把它们插入到你的文件。当你有一个Gists，以启动一个HTML文件或任何其他可重用的代码时候，这是有用的。使用方法：打开命令面板，并且键入gist。您也可以使用所显示的快捷方式。
在侧边栏的文件上右击时，这个插件提供了大量更多的选择。打开，查找，复制和粘贴，等等。
这里是老菜单和SidebarEnhanced菜单的比较。
Themes （主题）
Sublime Text可以安装主题，有一些主题真的很酷。您可以使用包控制找到这些。使用包控制安装一个主题，然后更新您的用户设置使用它。
// User/Preferences.sublime-settings
"theme": "Soda Light.sublime-theme"
注意：&您可能必须重新启动Sublime Text，这些更改才会生效。
一些流行的主题：THEME & SODA&包括 LIGHT 和 DARK
THEME & FLATLAND
PREDAWNFlatland的一个分支。
SPACEGRAY&一个Hyperminimal UI主题&。这里有。
更多皮肤：
更多优秀主体, 请查看。
Color Schemes (配色方案)
除了改变你的主题，你也可以改变你的配色方案。这不同于主题，因为主题是Sublime Text的包。配色方案仅仅是配色方案文件，并更改您的设置。
更改配色方案：菜单，Preferences首选项&Color Scheme配色方案，并选择一个。
你会马上看到变化，可以检查你是不是喜欢。对于一些大的颜色方案的列表，请访问Dayle Rees的&repo或&，一项伟大的工程。
Settings（设置）
Sublime自带了大量的设置。我建议你去看看它所提供的所有设置。
为了让您进入用户设置，使用命令面板并且键入user。
这里是我当前的设置，大部分是属性不需要解释了吧。为自己挑选好的部分并作为自己的自定义设置！
// User/Preferences.sublime-settings
"bold_folder_labels": true,
"color_scheme": "Packages/Theme - Flatland/Flatland Monokai.tmTheme",
"font_face": "Ubuntu Mono",
"font_options": "subpixel_antialias",
"font_size": 14,
"highlight_line": true,
"highlight_modified_tabs": true,
"ignored_packages":
"line_padding_bottom": 1,
"line_padding_top": 1,
"scroll_past_end": true,
"tab_size": 4,
"tab_completion": false,
"theme": "Soda Light.sublime-theme",
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true,
"vintage_start_in_command_mode": true,
"word_wrap": true
我在Sublime中用的是最佳模式。它提供了 vi 编辑命令代替Sublime Text。它不是原vi包的全功能，但它是我目前见过最接近 vi编辑器的文本编辑器。使用你的键盘快捷键和命令包就可以非常快速的开发。
上面的设置会在你打开一个文件时自动开启Vintage模式（叔注：Vintage是Sublime Text的vi模式编辑包。 可以使用组合vi命令来调用Sublime Text的功能，包括多重选择。）。如果你不喜欢这个功能，只是删除vintage_start_in_command_mode就可以了，如果你想完全禁用Vintage模式，那么删除ignored_packages设置。
Conclusion（结论）
我敢肯定，还有很多Sublime的优秀部分我错过或者遗漏了。你过你发现了任何其他非常棒的包或者插件、功能，欢迎留言告诉我，让我知道，大家一起快乐地编码！
更多关于Sublime&
看看我们整理的Sublime Text 3系列的文章,涉及面比较广泛:
阅读(...) 评论()为了账号安全，请及时绑定邮箱和手机
如何优雅地使用 Sublime Text 3
如何优雅地使用 Sublime Text 3
sublime text3
：本文所有操作都是基于Sublime Text3，操作系统为mac，本文主要摘取自。熟练掌握各种功能和技巧，能极大提高工作效率。
Cmd + shift + d: 复制并粘贴当前选中内容, 如果没选中,复制粘贴光标所在行
官网下载.dmg文件
打开.dmg文件
拖拽Sublime Text 3到Applications文件夹
如果想要在命令行中启动Sublime Text，需要在终端执行一下命令：
"/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
可以使用让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搜索当前文件内的，如函数，类，或者markdown的标题
ctrl + g跳转到指定行
左侧side bar导航
Cmd + k然后Cmd + b可切换导航关闭状态
Sublime Text将当前打开文件，文件夹当作一个project，将文件夹拖拽到side bar可添加到当前项目。菜单中选择(Project -& Save Project As…)可将相关文件文件夹关联信息保存，下次通过菜单(Project -& open project)可快速打开所有相关文件。
使用添加常用模板
将常用的代码段保存起来, 使用tab在设置好的文本上扩展出来,能提高效率,设置方法:
菜单: Tools –& New Snippet… 自动打开模板
编辑好之后保存在Packages/User目录下即可,文件后缀为.sublime-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替换标识
触发替换的作用域
&content&&![CDATA[
@author: 德淸 deqing.qdq@
]]&&/content&
&tabTrigger&author&/tabTrigger&
&/snippet&
在author之后按tab键会扩展为@author: 德淸 deqing.qdq@
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 选择光标所在行
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插件管理
是Sublime Text的包管理器，可以通过它安装。安装后的package将自动更新。基本上大部分工具通过自动和手动都可以完成安装。
通过控制台安装Package Control
1.按快捷键ctrl + `调出控制台
2.在控制台中运行如下代码
import urllib.request,os, h = 'e96f11eeadd761d777e62404' + '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安装目录。并且下载文件到目录下。
4.重启Sublime Text，完成安装
手动安装Package Control
自动安装的原理其实就是在特定目录为Package Control创建文件夹和配置文件，手动创建所需目录，文件同样可以达到安装的目的：
菜单中选择：Preferences & Browse Packages...
在打开的资源管理器中向上一个目录，然后进入到Installed Packages/目录
下载并复制到Installed Packages/目录下
重启Sublime Text，完成安装
卸载已安装的插件
如果是通过package control安装的, 快捷键Cmd + shift + p打开面板搜索Package Control: Remove Package然后选择需要卸载的插件
SidebarEnhancements
为左侧sidebar增加功能
通过简洁的语法描述html内容，提高工作效率
使用Package Control安装Emmet
快捷键ctrl + shift + p然后在控制窗口中输入Package Control: Install Package
选择Emmet安装，重启Sublime Text完成安装
在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是不能触发Emmet的，但是使用ctrl + e可以在任意文档中生效，这在编写html模板时非常有用
Emmet基本语法
是个很不错的教程，下面是一些简单的语法规则
通过元素名生成HTML标签，如div生成&div&&/div&，当需要生成自定义标签时，使用ctrl + e即可，如foo生成&foo&&/foo&
子元素嵌套&
类似CSS子选择器div&ul&li生成
类似CSS兄弟选择器，+生成兄弟关系的元素div+p+div生成
&div&&/div&
&div&&/div&
向上操作符^
Emmet操作符的作用对象是基于当前上下文的，&操作符会让上下文向下转移到深层元素，^操作符可以向上移动上下文，如div+div&p&span+em生成
&div&&/div&
&p&&span&&/span&&em&&/em&&/p&
通过^操作符修改上下文控制元素div+div&p&span+em^bq生成
&div&&/div&
&p&&span&&/span&&em&&/em&&/p&
&blockquote&&/blockquote&
多元素操作符*
使用*后跟数字，生成对于数量的元素ul&li*5生成
分组操作符()
使用括号分组完成复杂的逻辑div&(div&ul&li*2&a)*2+footer&p生成
&li&&a href=""&&/a&&/li&
&li&&a href=""&&/a&&/li&
&li&&a href=""&&/a&&/li&
&li&&a href=""&&/a&&/li&
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生成
&li class="item1"&&/li&
&li class="item2"&&/li&
&li class="item3"&&/li&
&li class="item4"&&/li&
&li class="item5"&&/li&
{}添加文本
ul&(li{item $})*3生成
&li&item 1&/li&
&li&item 2&/li&
&li&item 3&/li&
Sublime Text 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/目录
下载到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
根据数据库信息为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回车
使用高亮括号配对
高亮括号配对在查找时很方便
使用Package Control安装BracketHighlighter
如果没有Package Control，先安装
快捷键ctrl + shift + p，在控制窗口中输入Package Control: Install Package
在控制窗口中输入BracketHighlighter并选择安装
自动保存修改
这个插件在1秒没有按键时会自动保存。个人感觉太频繁，可根据需求选择
也可以启动sublime text的自动保存功能：
菜单： Sublime Text -& Preferences -& Settings - user
在配置文件中加上： "save_on_focus_lost": true 这样当前文档失去焦点时会自动保存
将HTML拼接为js字符串
转载请注明出处:
相关标签：
分享即可 +1积分
请登录后，发表评论
评论（Enter+Ctrl）
评论加载中...
评论加载中...
Web前端工程师
汇聚、分享优秀的IT技术资讯、文章。欢迎关注！^_^
作者的热门手记
Copyright (C)
All Rights Reserved | 京ICP备 号-2}