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插件，

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

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