手册：Sublime Text

#手册

1. 简介

1.1. 官网

1.2. 包管理

• ST 2 是当前最稳定版本，但 ST 3 有很多新功能，本文以 ST 3 为主；
• 启动快速；
• 可以打开图片；
• 功能人性化、跨平台；

2. 基本使用

2.1. 快捷键

2.2. 控制台

3. 插件

3.0. Package Control

• 安装方法：[Ctrl] + [Shift] + [P] => Package Control Install => <查找关键字> + [Enter] => 将新开的文档中的代码段放入 'preferences → settings - user'

3.1. Emmet

• Zen Coding 风格。

3.2. 代码高亮

3.2.1. Django Tags

3.2.2. PHP - Twig

3.2.3. Sass

3.2.4. Vue Syntax Hightlight

3.2.5. MarkdownEditing 或者 MarkdownHeightlighting

3.3. 主题系列

3.3.1. Theme - Spacegray

3.4. 效率工具

3.4.1. TrailingSpace

• 高亮多余的空格，并在每次保存时删去；

3.4.2. SideBarEnhancements

• 使 SideBar 的目录结构人性化显示；

3.4.3. AutoFileName

• 引用文件时自动搜索可能的文件名以供选择；

3.4.4. SyncedSideBar

• 选中当前 tab 时 SideBar 同步高亮到相应的目录位置；

3.4.5. AdvancedNewFile

• 在指定位置新建文件：[Crlt] + [Alt] + [N] => <dir>/交易.py

3.4.6. DocBlockr

• 块状注释输出：/** + [Enter] + */

3.4.7. Nettuts+ Fetch

• 增减类库：[Ctrl] + [Shift] + [P] => 输入Fetch: manage => 新弹窗中修改file项以增加；
• 调用类库：[Ctrl] + [Shift] + [P] => 输入Fetch: file => 选择；

3.4.8. Evernote

• 可在 sublime 内用 markdown 编写笔记，并同步至 Evernote，需要获得 Evernote 的官方 token 认证；
• 参考：Sublime-evernote：支持用 Markdown 写印象笔记(Evernote)；

3.4.9. PlainTasks

• 可在 sublime 内建立 TODO list，作任务管理；
• 参考：Sublime Text 2 插件：PlainTasks；

3.4.10. Can I Use

• 对于 CSS，选中某则声明后右键单击 'Can I Use' 即可跳转至相应的 caniuse.com 搜索页面，查看兼容性；

3.4.11. JavaScript & Nodejs snippets

3.4.12. jQuery

3.4.13. Git

3.4.14. CSSComb

3.4.15. ColorHighlighter

3.5. 其它

3.5.1. HttpRequest

3.5.2. Callback

3.5.3. CodeIntel

3.5.4. SublimeLinter

• Douglas Crockford (Yahoo) 发明 Lint，用以代码验证及风格统一；

3.5.5. PyV8

4. 用户配置

• 查看用户配置文件：控制台输入preferences: settings - user；
• User 优先级高于 Default，故 User 配置会覆盖 Default 配置，一般配置写入 User 即可；
• 附一枚惯用的配置——

{
  // === Theme - Spacegray 选项 ===
  "theme": "Spacegray.sublime-theme",
  "color_scheme": "Packages/Theme - Spacegray/base16-ocean.dark.tmTheme",
  // "theme": "Spacegray Light.sublime-theme",
  // "color_scheme": "Packages/Theme - Spacegray/base16-ocean.light.tmTheme",
  // "theme": "Spacegray Eighties.sublime-theme",
  // "color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme",
  // === 字号、行高 ===
  "font_size": 14,
  "line_padding_bottom": 2,
  "line_padding_top": 2,
  // 自动补全设置
  "auto_complete_selector": "source,text",
  // 显示文件的编码与右下角
  "show_encoding": true,
  // 允许把最后一行滚到最上端
  "scroll_past_end": true,
  // 窗口 title 显示正在编辑文件的全路径
  "show_full_path": true,
  // 显示右栏当前视图外框
  "draw_minimap_border": true,
  // 高亮当前编辑的行
  "highlight_line": true,
  // 隐藏 Tab 右上角关闭按钮
  "show_tab_close_buttons": false,
  // 加粗侧栏的目录字体
  "bold_folder_labels": true,
  // 显示左列代码折叠按钮
  "fade_fold_buttons": false,
  // tab 键设置：空格、2 个
  "tab_size": 2,
  "translate_tabs_to_spaces": true,
  "use_tab_stops": false,
  // 保存时清除空格
  "trim_trailing_white_space_on_save": true,
  // 单词选取的分止符
  "word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?",
  // 防止不断句而产生水平滚动条
  "word_wrap": true,
  "ignored_packages":
  [
    "Vintage"
  ],
}

5. 自定义 Snippets

'Tools → Developer → New Snippets'

<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. 修改Hello, ${1:this} is a ${2:snippet}.代码块格式；其中${1:this}、${2:snippet}表示植入的光标位置；
2. 修改<tabTrigger>标签内的触发词；
3. 修改<scope>标签内的文件格式：source.python、source.js、source.ruby、text.html、text.css、text.html.markdown 等；
4. 保存，后缀必须是 '.sublime-snippet'，在 'user' 目录之下；
5. 命令行中输入snippet:，查看使用说明；

6. 批处理任务

'Tools → Build System → New Build System'

{
  "cmd": ["C:\Program Files (x86)\Google\Chrome\Application\chrome.exe", "$file"],
  "selector": ["text.html"],
}

附：参考

• 慕课：快乐的sublime编辑器
• 慕课：前端开发工具技巧介绍—Sublime篇
• Sublime Text3 - 实用设置