sublime text 3 使用技巧

1、sublime text 3 代码快的定义

我们在编写代码的时候，总会遇到一些需要反复使用的代码片段。这时候就需要反复的复制和黏贴，大大影响效率。我们利用Sublime Text的snippet功能，就能很好的解决这一问题。通俗的讲，就是把我们常用的代码分别保存起啦，然后通过插件的形式来反复调用。

创建方法：Tools > Developer > New 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 >

此时的你应该有点莫名，我们接着来看下完整的结构和说明：

< snippet >      < content > <![CDATA[ 你需要插入的代码片段${1:name} ]]> </ content >      <!-- 可选：快捷键，利用Tab自动补全代码的功能 -->      < tabTrigger >xyzzy</ tabTrigger >      <!-- 可选：使用范围，不填写代表对所有文件有效。附：source.css和test.html分别对应不同文件。 -->      < scope >source.python</ scope >      <!-- 可选：在snippet菜单中的显示说明（支持中文）。如果不定义，菜单则显示当前文件的文件名。 -->      < description >My Fancy Snippet</ description > </ snippet >

${1:name}表示代码插入后，光标所停留的位置，可同时插入多个。其中:name为自定义参数（可选）。
${2}表示代码插入后，按Tab键，光标会根据顺序跳转到相应位置（以此类推）。

现在，你应该有了个大致的了解。那我们就开始自己动手编写一个实例：

< snippet >       < content >       <![CDATA[       <footer>            <p>Copyright © 2008-2012 ${1:bluesdream}.com</p>            <p>增值电信业务经营许可证 沪B2-${2} <a href="#">沪ICP备号${3}</a></p>       </footer>       ]]>       </ content >       < tabTrigger >cft</ tabTrigger >       < description >custom-footer</ description >       < scope >text.html</ scope > </ snippet >

创建完毕以后，保存在\Packages\User目录下（例 X:\Sublime Text 2.0\Data\Packages\User），文件命名为cft-code，后缀名.sublime-snippet。

此时我们打开一个html文件，输入cft，再按Tab键，刚才我们所编写的代码段，就插入了进来。并且此时的光标停留在我们所标记的${1}位置处，如果我们再按下Tab，那么光标就跳转到${2}的位置。由于我们在scope中定义了仅在html文件中使用，所以此时如果我们打开的是css或其他格式的文件，那将无法插入代码段。

补充：除了利用快捷键Tab出代码之外，我们还能通过菜单来加载，打开Tools > Snippets，选择Snippet: custom-footer。如果你没有定义description，那此时便会看到以我们文件名为命名的Snippet: cft-code选项。

二、sublime text 3 插件安装

朋友们，小站活着不容易，全靠广告费养着了，如果本文对你有帮助。麻烦动下手点下页面的广告吧，谢谢！

直接安装

安装Sublime text 2插件很方便，可以直接下载安装包解压缩到Packages目录（菜单->preferences->packages）。

使用Package Control组件安装

也可以安装package control组件，然后直接在线安装：

1. 1. 按Ctrl+`调出console（注：安装有QQ输入法的这个快捷键会有冲突的，输入法属性设置-输入法管理-取消热键切换至QQ拼音）
   2. 粘贴以下代码到底部命令行并回车：

1

import  urllib.request,os; pf  =  'Package Control.sublime-package' ; ipp  =  sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) );  open (os.path.join(ipp, pf),  'wb' ).write(urllib.request.urlopen(  'http://sublime.wbond.net/'  +  pf.replace( ' ' , '%20' )).read())

1. 重启Sublime Text 3。
2. 如果在Perferences->package settings中看到package control这一项，则安装成功。

顺便贴下Sublime Text2 的代码

1

import  urllib2,os; pf = 'Package Control.sublime-package' ; ipp  =  sublime.installed_packages_path(); os.makedirs( ipp )  if  not  os.path.exists(ipp)  else  None ; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( )));  open ( os.path.join( ipp, pf),  'wb'  ).write( urllib2.urlopen(  'http://sublime.wbond.net/'  + pf.replace(  ' ' , '%20'  )).read());  print (  'Please restart Sublime Text to finish installation' )

如果这种方法不能安装成功，可以到这里下载文件手动安装。

用Package Control安装插件的方法：

1. 按下Ctrl+Shift+P调出命令面板
2. 输入install 调出 Install Package 选项并回车，然后在列表中选中要安装的插件。

不爽的是，有的网络环境可能会不允许访问陌生的网络环境从而设置一道防火墙，而Sublime Text 2貌似无法设置代理，可能就获取不到安装包列表了。
好，方法介绍完了，下面是本文正题，一些有用的Sublime Text 2插件：

GBK Encoding Support

对应gb2312来说，Sublime Text 2 本生不支持的，我们可以通过Ctrl+Shift+P调出命令面板或Perferences->Package Contro,输入install 调出 Install Package 选项并回车，在输入“GBK Encoding Support”选择开始安装，左下角状态栏有提示安装成功。这时打开gbk编码的文件就不会出现乱码了，如果有需要转成utf-8的可以在File-GBK to UTF8-选择Save with UTF8就偶看了。

Zen Coding

这个，不解释了，还不知道ZenCoding的同学强烈推荐去看一下：《Zen Coding: 一种快速编写HTML/CSS代码的方法》。

emmet

PS:Zen Coding for Sublime Text 2插件的开发者已经停止了在Github上共享了，现在只有通过Package Control来安装。

jQuery Package for sublime Text

如果你离不开jQuery的话，这个必备～～

Sublime Prefixr

Prefixr，CSS3 私有前缀自动补全插件，显然也很有用哇

Sublime Prefixr

JS Format

一个JS代码格式化插件。

SublimeLinter

一个支持lint语法的插件，可以高亮linter认为有错误的代码行，也支持高亮一些特别的注释，比如“TODO”，这样就可以被快速定位。（IntelliJ IDEA的TODO功能很赞，这个插件虽然比不上，但是也够用了吧）

SublimeLinter

Placeholders

故名思意，占位用，包括一些占位文字和HTML代码片段，实用。

Sublime Alignment

用于代码格式的自动对齐。传说最新版Sublime 已经集成。

Clipboard History

粘贴板历史记录，方便使用复制/剪切的内容。

DetectSyntax

这是一个代码检测插件。

Nettuts Fetch

如果你在用一些公用的或者开源的框架，比如 Normalize.css或者modernizr.js，但是，过了一段时间后，可能该开源库已经更新了，而你没有发现，这个时候可能已经不太适合你的项目了，那么你就要重新折腾一遍或者继续用陈旧的文件。Nettuts Fetch可以让你设置一些需要同步的文件列表，然后保存更新。

JsMinifier

该插件基于Google Closure compiler，自动压缩js文件。

Sublime CodeIntel

代码自动提示

Bracket Highlighter

类似于代码匹配，可以匹配括号，引号等符号内的范围。

Hex to HSL

自动转换颜色值，从16进制到HSL格式，快捷键 Ctrl+Shift+U

GBK to UTF8

将文件编码从GBK转黄成UTF8，快捷键Ctrl+Shift+C

Git

该插件基本上实现了git的所有功能。

基本设置

{
// 设置主题文件
“color_scheme”: “Packages/Color Scheme – Default/Monokai.tmTheme”,
// 设置字体和大小
“font_face”: “Consolas”,
“font_size”: 12,
// 字体选项：no_bold不显示粗体字，no_italic不显示斜体字，no_antialias和no_antialias关闭反锯齿
// subpixel_antialias和no_round是OS X系统独有的
“font_options”: [],
// 在文字上双击会全选当前的内容，如果里面出现以下字符，就会被截断
“word_separators”: “./\\()\”‘-:,.;<>~!@#$%^&*|+=[]{}`~?”,
// 是否显示行号
“line_numbers”: true,
// 是否显示行号边栏
“gutter”: true,
// 行号边栏和文字的间距
“margin”: 4,
// 是否显示代码折叠按钮
“fold_buttons”: true,
// 不管鼠标在不在行号边栏，代码折叠按钮一直显示
“fade_fold_buttons”: true,
//列显示垂直标尺，在中括号里填入数字，宽度按字符计算
“rulers”: [],
// 是否打开拼写检查
“spell_check”: false,
// Tab键制表符宽度
“tab_size”: 4,
// 设为true时，缩进和遇到Tab键时使用空格替代

“translate_tabs_to_spaces”: false,

// 设置行间距，看起来不那么”挤“

"line_padding_bottom": 1, 
"line_padding_top": 1,

// 否则作用于单个空格
“use_tab_stops”: true,
“detect_indentation”: true,
// 按回车时，自动与制表位对齐
“auto_indent”: true,
//针对C语言的
“smart_indent”: false,
// 需要启用auto_indent，第一次打开括号缩进时插入空格？（没测试出来效果…）
“indent_to_bracket”: true,
// 显示对齐的白线是否根据回车、tab等操作自动填补
“trim_automatic_white_space”: true,
// 是否自动换行，如果选auto，需要加双引号
“word_wrap”: false,
// 设置窗口内文字区域的宽度
“wrap_width”: 0,
// 防止被缩进到同一级的字换行
“indent_subsequent_lines”: true,
// 如果没有定义过，则文件居中显示（比如新建的文件）
“draw_centered”: false,
// 自动匹配引号，括号等
“auto_match_enabled”: true,
// 拼写检查的单词列表路径
“dictionary”: “Packages/Language – English/en_US.dic”,
// 代码地图的可视区域部分是否加上边框，边框的颜色可在配色方案上加入minimapBorder键
“draw_minimap_border”: false,
// 突出显示当前光标所在的行
“highlight_line”: false,
// 设置光标闪动方式
“caret_style”: “smooth”,
// 是否特殊显示当前光标所在的括号、代码头尾闭合标记
“match_brackets”: true,
// 设为false时，只有光标在括号或头尾闭合标记的两端时，match_brackets才生效
“match_brackets_content”: true,
// 是否突出显示圆括号，match_brackets为true生效
“match_brackets_square”: false,
// 是否突出显示大括号，match_brackets为true生效
“match_brackets_braces”: false,
// 是否突出显示尖括号，match_brackets为true生效
“match_brackets_angle”: false,
// html和xml下突出显示光标所在标签的两端，影响HTML、XML、CSS等
“match_tags”: true,
// 全文突出显示和当前选中字符相同的字符
“match_selection”: true,
// 设置每一行到顶部，以像素为单位的间距，效果相当于行距
“line_padding_top”: 1,
// 设置每一行到底部，以像素为单位的间距，效果相当于行距
“line_padding_bottom”: 1,
// 设置为false时，滚动到文本的最下方时，没有缓冲区
“scroll_past_end”: true,
// 控制向上或向下到第一行或最后一行时发生什么
“move_to_limit_on_up_down”: false,
// 按space或tab时，实际会产生白色的点（一个空格一个点）或白色的横线（tab_size设置的制表符的宽度），选中状态下才能看到
// 设置为none时，什么情况下都不显示这些点和线
// 设置为selection时，只显示选中状态下的点和线
// 设置为all时，则一直显示
“draw_white_space”: “selection”,
// 制表位的对齐白线是否显示，颜色可在主题文件里设置（guide，activeGuide，stackGuide）
“draw_indent_guides”: true,
// 制表位的对齐白线，draw_normal为一直显示，draw_active为只显示当前光标所在的代码控制域
“indent_guide_options”: ["draw_normal"],
// 为true时，保存文件时会删除每行结束后多余的空格
“trim_trailing_white_space_on_save”: false,
// 为true时，保存文件时光标会在文件的最后向下换一行
“ensure_newline_at_eof_on_save”: false,
// 切换到其它文件标签或点击其它非本软件区域，文件自动保存
“save_on_focus_lost”: false,
// 编码时不能自动检测编码时，将自动检测ASCII, UTF-8 和 UTF-16
“fallback_encoding”: “Western (Windows 1252)”,
// 默认编码格式
“default_encoding”: “UTF-8″,
// 包含空字节的文件被打开默认为十六进制
“enable_hexadecimal_encoding”: true,
// 每一行结束的时候用什么字符做终止符
“default_line_ending”: “system”,
// 设置为enabled时，在一个字符串间按Tab将插入一个制表符
// 设置为true时，按Tab会根据前后环境进行代码自动匹配填补
“tab_completion”: true,
// 代码提示
“auto_complete”: true,
// 代码提示的大小限制
“auto_complete_size_limit”: 4194304,
// 代码提示延迟显示
“auto_complete_delay”: 50,
// 代码提示的控制范围
“auto_complete_selector”: “source – comment”,
// 触发代码提示的其他情况
“auto_complete_triggers”: [ {"selector": "text.html", "characters": "<"} ],
// 设为false时，选择提示的代码按回车或点击可以输出出来，但选择true时不会输出而是直接换行
“auto_complete_commit_on_tab”: false,
// 设置为false，使用Shift + tab总是插入制表符
“shift_tab_unindent”: true,
// 选中的文本按Ctrl + f时，自动复制到查找面板的文本框里
“find_selected_text”: true,
// Data\Packages\Theme – Default\Default.sublime-theme控制软件的主题
“theme”: “Default.sublime-theme”,
// 滚动的速度
“scroll_speed”: 1.0,
// 左边边栏文件夹动画
“tree_animation_enabled”: true,
// 标签页的关闭按钮
“show_tab_close_buttons”: true,
// 针对OS X
“use_simple_full_screen”: false,
// 水平垂直滚动条：system和disabled为默认显示方式，enabled为自动隐藏显示
“overlay_scroll_bars”: “system”,
// 热推出功能！退出时不会提示是否保存文件，而是直接退出
// 下次打开软件时，文件保持退出前的状态，没来得及保存的内容都在，但并没有真实的写在原文件里
“hot_exit”: true,
// 软件使用最后的设定打开文件，hot_exit为true时没有效果
“remember_open_files”: true,
// 针对OS X
“open_files_in_new_window”: true,
// 针对OS X
“close_windows_when_empty”: true,
// 哪些文件会被显示到边栏上
“folder_exclude_patterns”: [".svn", ".git", ".hg", "CVS"],
“file_exclude_patterns”: ["*.pyc", "*.pyo", "*.exe", "*.dll", "*.obj","*.o", "*.a", "*.lib", "*.so", "*.dylib", "*.ncb", "*.sdf", "*.suo", "*.pdb", "*.idb", ".DS_Store", "*.class", "*.psd", "*.db"],
// Goto Anything or Find in Files
“binary_file_patterns”: ["*.jpg", "*.jpeg", "*.png", "*.gif", "*.ttf", "*.tga", "*.dds", "*.ico", "*.eot", "*.pdf", "*.swf", "*.jar", "*.zip"],
// 删除你想要忽略的插件，需要重启, 去掉Vinage开启vim模式
“ignored_packages”: ["Vintage"]

}

我的配置:

{

    "default_encoding": "UTF-8",

    "auto_complete_commit_on_tab": false,
    "auto_complete_delay": 0,
    "auto_complete_with_fields": true,
    "auto_indent": true,
    "auto_match_enabled": true,
    "bold_folder_labels": true,
    "caret_style": "wide",
    "color_scheme": "Packages/Color Scheme - Default/Monokai Bright.tmTheme",
    "fade_fold_buttons": false,
    "fold_buttons": true,
    "font_face": "Consolas",
    "font_options":[],
    "font_size": 13,
    "highlight_line": true,
    "hot_exit": false,
    "ignored_packages":[],
    "match_brackets_angle": true,
    "match_brackets_content": true,
    "match_tags": true,
    "remember_open_files": false,
    "smart_indent": true,
    "tab_size": 4,

    "line_padding_bottom": 1, 
    "line_padding_top": 1,

    "translate_tabs_to_spaces": true,

    "word_wrap": "false"
}