sublime Text3技巧

sublime text 想必很多人在用吧，谈谈我个人的使用情况。也为了总结一下，万一哪天从新安装它时，也知道自己都在用哪些技巧和插件以及配置方法。

滚轮中键按住滚动按住shift + 右键 +滚动滚轮ctrl + alt +down/up (与win10 冲突，禁止win10的快捷键即可，桌面右击——图形选项——快捷键）

上面三个都是垂直选择,适用同时编辑。如果想回复到单选情况，按Esc

Ctrl-Shift-v：自适应缩进粘贴，自动缩进，相当不错。

ctrl + d和ctrl + k：ctrl + d选择，ctrl + k掠过选择（在js中针对变量特别好用）

ctrl + d选择了变量i但是没有选择list里的i，按一次选一次，在第二个我时按了CTRL + K（没有变化提示，必须选择下一个后才能看出来按CTRL + K的那个变量没有被选择）掠过了它。

alt + f3：同类全选。选择一个，按alt + f3，下图感受同类

Ctrl + Shift + up/down: 上下两行切换位置。

ctrl + ｐ： 预览文件，输入想要的文件名即可查找。

ctrl + g ：跳行查找

ctrl + m : 选择相匹配的括号。（函数大括号的结尾）ctrl + shift + m： 选择括号开始和结束之间的内容

当你在修改以上线的兼容性问题时，在浏览器上发现线上的多少行css样式需要修改，那这时候你就可以用跳行了。

二、用户设置

Preferences > setting 右侧是用户的设置，左侧是默认的设置，用户设置覆盖默认设置。

{ "color_scheme": "Packages/User/SublimeLinter/Monokai (SL).tmTheme", "disable_tab_abbreviations": true, //禁用 Emmet的tab键功能（请使用 ctrl+e） "draw_minimap_border": true, // 用于右侧代码预览时给所在区域加上边框，方便识别 "highlight_line": true, // 当前行高亮，很好的提示效果。 "font_size": 14, // 字体大小。 "settings": {"expand_tabs_on_save": true}, // 这个貌似可以忽略， "expand_tabs_on_save": true, // 保存自动tab缩进转换为空格，需要额外的配置 "highlight_modified_tabs": true, // 高亮未保存文件,很好的提示效果。 "auto_find_in_selection": true, "draw_white_space": "all" , // 显示空白字符，有利于去掉多余的空白 "ignored_packages": [ "Vintage" ], // 设置忽略内容，的文件检索功能找到特定的文件，比如你不想检索node_modules里的内容。添加进去即可 "tab_size": 4, // 四个空格缩进 "preview_on_click": false, // 点击左侧的文件自动打开。我不太喜欢这个 "drag_text": false, // 选中的文本可以拖动，偶尔误操作。关掉。 "font_face": "Microsoft YaHei Mono", // 换个字体换个心情 "translate_tabs_to_spaces": true, //tab缩进转换为空格缩进 "trim_trailing_white_space_on_save": true, //自动移除行尾多余空格,献给处女座 "word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?" // 双击选择，遇到如下符号停止，我去掉了中线 }

关于上边的保存自动把tab缩进转化为空格缩进的配置和问题。

请戳这里原网址

设置步骤：

1.打开sublime的Preference - > Browser Packages 2.新建一个目录（文件夹）ExpandTabsOnSave 3.在上边新建的文件夹内新建文件ExpandTabsOnSave.py4.把下面内容复制进去，保存

import sublime, sublime_plugin, os class ExpandTabsOnSave(sublime_plugin.EventListener): def on_pre_save(self, view): if view.settings().get('expand_tabs_on_save') == 1: view.window().run_command('expand_tabs')

5.全局改变，打开Preferences -> Settings - User添加（下面的写法应该是是ST2的，ST3应该是我上边的写法，不用写settings,因为下面在ST3貌似不生效。）：

"settings": { "expand_tabs_on_save": true }

三、插件设置

1、安装Package Control

操作：package Control官网—Install Now —复制ST3的代码 — 打开ST3的console （ctrl + ` 或 view —show console）

— 粘贴回车 —完成后重启 — Ctrl+Shift+P — 输入PC（即：package control）打开检索框—搜索插件

2、各类插件

emmet:

支持cheat sheet，tab键html自动补全，css兼容性写法，缩写等等，安上即用。上面用户设置里禁用了它的tab键，默认变为ctrl + e触发。

color hightlighter ：

颜色高亮提示，css很好用。安上即用

ConvertToUTF8：

编码设置，采用utf-8，解决中文乱码问题，安上即用

sublime Linter & SublimeLinter-contrib-eslint & eslint：

eslint套装插件，编写高质量的js代码。需要配置

standard：

同上的eslint，一个比较规范的标准配置。需要配置

AutoPrefixer：

自动补全浏览器私有属性前缀，兼容性数据从著名的 can I use 读取。需要配置。

sass：

sass预处理必备，高亮提示。安上即用

sublimecodeintel：

js自动补全功能，需要配置。

expand_region ：

向外扩展，范围选择，需要配置

goto definition ：

跳转，当你声明一个函数，并且在下面调用了它，当你用该插件时就会直接跳转。

其实上面这些插件，有些重复的功能，很类似，但是也有不同。看自己需求了。其实emmet提供了很多功能,详细了解[emmet]（http://docs.emmet.io/ ）

四，插件配置和使用

1，AutoPrefixer配置，

a、Preferences>Packages Settings> AutoPrefixer>设置用户设置兼容性写法。

{ "browsers": ["last 2 version", "> 0.1%", "> 5% in US", "ie 6-8","Firefox < 20"] }

b、Preferences>Key Binding > user 绑定。

[ { "keys":[ "Ctrl + Alt + Shift + p"], "command": "autoprefixer"} ]

2，sublimecodeintel配置

Perferences->Package Settings->SublimeCodeIntel->Setting - Defalut

"codeintel_selected_catalogs": ["jQuery"] 修改为 "codeintel_selected_catalogs": ["JavaScript"]

3、expand_region 配置

[ { "keys": ["ctrl+shift+space"], "command": "expand_region" }, { "keys": ["ctrl+space"], "command": "expand_region", "args": {"undo": true}, "context": [{ "key": "expand_region_soft_undo" }] } ]

扩散性选择，首先光标放到用户名的位置，按一下快捷键选择用户名，再一下选择整个span，再一下选择li的内部所有。（emmet貌似有类似的功能）

注意：

1、插件安装都是采用ctrl + shift + p — Package Control； 2、 如果你绑定了多个自己的快捷键，请都在同一个[]内。不要每个都写一个[]。

补充：

hexo用了ejs的模版引擎，对其设置高亮提示，

browse Packages — user — 新建HTML.sublime-settings—输入如下代码。

{ "extensions": [ "ejs" ] }

4、View in Browser

直接在编辑器通过快捷键用默认浏览器打开静态页。 { "keys":["ctrl+shift+alt+g"], "command": "open_in_browser"} //绑定自己的快捷键

5、code formatter

格式化插件。默认相关配置package setting —— code formatter ——setting default里。需要改什么自己设置即可。默认快捷键 ctrl + alt + f { "codeformatter_html_options": { "syntaxes": "html,asp,xml", // Syntax names which must process HTML formatter "format_on_save": false, // Format on save "indent_size": 4, // indentation size "indent_char": " ", // Indentation character "indent_with_tabs": true, // Indent with one tab (overrides indent_size and indent_char options) "reduce_whole_word_tags": true, "exception_on_tag_mismatch": true, "expand_javascript": false, "reduce_empty_tags": true, "preserve_newlines": true, // Preserve existing line-breaks "max_preserve_newlines": 10, // Maximum number of line-breaks to be preserved in one chunk "indent_tags": "html|head|body|div|nav|ul|ol|dl|li|table|thead|tbody|tr|th|blockquote|select|form|optgroup|fieldset|legend|label|header|section|aside|footer|figure|video|datalist|keygen|audio|embed|source|track|output|article|bdi|details|dialog|figcaption|main|mark|menuitem|meter|nav|progress|rp|rt|ruby|summary|time|wbr" // List of tags (defaults to indent) that should be reformatted. Example "div|p|li|table" }, "codeformatter_css_options": { "syntaxes": "css,less", // Syntax names which must process CSS formatter "format_on_save": false, // Format on save. Either a boolean (true/false) or a string regexp tested on filename. Example : "^((?!.min.|vendor).)*$" "indent_size": 4, // Indentation size "indent_char": " ", // Indentation character "indent_with_tabs": false, // Indent with one tab (overrides indent_size and indent_char options) "selector_separator_newline": true, // Add new lines after selector separators "end_with_newline": true, // Add new line of end in file "newline_between_rules": false, // Add new line between rules "eol": "\n" // EOL symbol }, "codeformatter_js_options": { "syntaxes": "javascript,json", // Syntax names which must process JS formatter "format_on_save": false, // Format on save. Either a boolean (true/false) or a string regexp tested on filename. Example : "^((?!.min.|vendor).)*$" "indent_size": 2, // indentation size "indent_char": " ", // Indent character "indent_with_tabs": false, // Indent with one tab (overrides indent_size and indent_char options) "eol": "\n", // EOL symbol "preserve_newlines": true, // whether existing line breaks should be preserved, "max_preserve_newlines": 10, // maximum number of line breaks to be preserved in one chunk “space_in_paren”：false，//在paren中添加填充空格，即。f（a，b） “space_in_empty_paren”：false，//如果父项为空，则在paren内添加填充空格。f（） “e4x”：false，//通过未触及的 “jslint_happy” 传递E4X xml文字：false，//如果为true，则jslint-stricter模式被强制执行。示例function（）vs function（） “brace_style”：“collapse”，//“collapse”| “展开”| “最终展开”。将大括号放在与控制语句（默认值）相同的行上，或者将大括号放在自己的行上（Allman / ANSI样式），或者只将末尾大括号放在自己的行上。 “keep_array_indentation”：true，//保持数组缩进。 “ "eval_code": false, // eval code "unescape_strings": false, // Decode printable characters encoded in xNN notation "wrap_line_length": 0, // Wrap lines at next opportunity after N characters "break_chained_methods": true, // Break chained method calls across subsequent lines "end_with_newline": true, // Add new line at end of file "comma_first": false // Add comma first } }

6、goto definition （这里可能不是很对了，由于某次编辑保存时被谷歌自动翻译给翻译了）

1、

Windows新建： Default(Windows).sublime-mousemap\Sublime Text 3\Packages\User。

　 2，在Default(Windows).sublime-mousemap内输入如下：

// button1左键，button2右键。// 修饰符绑定ctrl和alt。 [ { “button”：“button1”， “count”： 1， “modifiers”：[“ctrl”，“alt”]， “press_command”：“drag_select”， “command”：“goto_definition” } ]

alt + d会打开对应文件。

1、去open-include的github下载包 2、解压——重命名文件夹Open-Include——放到ST3的Package里 3、复制一份Open-Include.sublime-settings到Package-user文件夹下。

8. ClickableUrls

光标放在网址处。按ctrl + alt + enter打开网址。

1，去ClickableUrls的github上下载包2，解压-重命名文件夹ClickableUrls–放到ST3的包装里

9 autofilename自动找到文件，这个不用说，必备方便的不行。

1，去autofilename的github下载包 2，解压 - 重命名文件夹AutoFileName–放到ST3的Package里

10.侧栏增强增强对左侧栏目操作的功能

2018-1-13日更新：

snipaste + sublime 的 SublimeHighlight插件，

snipaste有贴图功能，且对于html格式的内容可以带格式贴图，复制后按F3即可生成剪切板的贴图。sublime 的 SublimeHighlight插件，可以复制html格式的内容，看一下下图即明白了。

当然，这个只是为了展示snipaste的强大功能，毕竟编辑器都有分栏的功能，不过有些时候snipaste也是蛮有用的。