利器：Sublime Text 要点记录

工欲善其事，必先利其器 ——《论语.卫灵公》

下载

前往官网下载： Sublime Text is a sophisticated text editor for code, markup and prose

实用快捷键

• 【打开 / 前往】

  • Ctrl+G ： 前往行
  • Ctrl+L ： 前往光标所以行
  • ⌘+T ： 前往文件
  • Ctrl +` ： 打开控制台
  • ⌘+Ctrl+P ： 前往项目

  • ⌘+R ： 前往 当前文件中的 method

    • ⌘+Shift+R ： 前往 整个项目中的 method
  • ⌘+Shift+P ： 命令提示
  • ⌘+K+B ： 开关侧栏
  • Ctrl+` python 控制台
  • ⌘+Shift+N ： 新建窗口

• 【选择 / 编辑】

  • ⌘+Shift+L ： 选中整行
  • ⌘+Shift+Enter ： 在上一行插入新行

  • ⌘+D ：选中光标所占的文本，继续操作则会选中下一个相同的文本

    • ⌘+Ctrl+G ：一下选中所有相同的文本
  • ⌘+单击 ： 光标同时定位在多处，并可进行统一编辑（！！）
  • ⌘+K+U ： 改为大写
  • ⌘+K+L ： 改为小写

• 【代码块】

  • Ctrl+M ：光标移动至括号内「结束」或「开始」的位置
  • Ctrl+Shift+M ： 选择括号内的内容
  • ⌘+K+0 ：展开所有折叠代码

• 【注释】

  • ⌘+/ ：注释
  • ⌘+Alt+/ ：块注释

• 【拆分窗口/标签页】

  • ⌘+Alt+1~4 ：1~4 列
  • ⌘+Alt+5 ：网格 (4组)

• 【书签】

  • ⌘+F2 ： 添加 / 去除书签
  • F2 ：下一个书签
  • Shift+F2 ：前一个书签
  • ⌘+Shift+F2 ：清除所有书签

爽歪歪的功能

• 在不同的分屏下，编辑同一个文件！！

  

前端开发插件

1 LiveReload 一款解放 F5 的开发工具

Livereload 可理解为「即时刷新」，在前端开发中，开发者在编写或调试 html/js/css 代码后需要从编辑器切换到浏览器，再刷新浏览器才能看到页面变化，这种十分频繁的操作在一定程度上影响了工作效率，而 Liverelod 可以帮助我们解决了这个问题

1、首先为 Sublime 安装 LiveReload 插件，正常通过 package control 安装就可以了，然后配置一下

2、然后为 chrome 安装 LiveReload 插件，安装好后在右上角插件列表中右键 LiveReload 点击管理扩展程序，进入 liveReload 设置界面，把允许访问文件网址勾选上就好了。

然后在浏览器中打开需要实时刷新的网页，在右上角把 liveReload 这个插件点击一下，图标会变成实心的就大功告成了 ^_^

SublimeCodeIntel 代码智能提示及自动完成

实现所有主流代码智能提示和自动完成功能。

目前该插件支持以下语言：

ActionScript, Django, Docker, EJS, epMojo, HTML, KomodoSnippet, LaravelBlade, Mason, Mustache, MXML, PHP, R, reStructuredText, RHTML, Smarty, TracWiki, TemplateToolkit, Twig, XBL, XML, XSLT, XUL, Python, Python3, Ruby, Perl, Go, ECMAScript, JavaScript, Node.js, CSS, SCSS, Sass, Less, HTML5, Tcl, C/C++, Objective-C.

Emmet HTML/CSS代码快速编写神器

Emmet 提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。

1、通过 package control 安装即可

2、使用手册
3、下载 Emmet API 表
4、让 JSX 支持 Emmet

Preferences->Key Bindings-User 添加以下代码,便可支持 Emmet

{
  "keys": ["tab"], 
  "command": "expand_abbreviation_by_tab", 

  // put comma-separated syntax selectors for which 
  // you want to expandEmmet abbreviations into "operand" key 
  // instead of SCOPE_SELECTOR.
  // Examples: source.js, text.html - source
  "context": [
    {
      "operand": "source.js,text.html", 
      "operator": "equal", 
      "match_all": true, 
      "key": "selector"
    }, 

    // run only if there's no selected text
    {
      "match_all": true, 
      "key": "selection_empty"
    },

    // don't work if there are active tabstops
    {
      "operator": "equal", 
      "operand": false, 
      "match_all": true, 
      "key": "has_next_field"
    }, 

    // don't work if completion popup is visible and you
    // want to insert completion with Tab. If you want to
    // expand Emmet with Tab even if popup is visible -- 
    // remove this section
    {
      "operand": false, 
      "operator": "equal", 
      "match_all": true, 
      "key": "auto_complete_visible"
    }, 
    {
      "match_all": true, 
      "key": "is_abbreviation"
    }
  ]
}

AllAutocomplete 更 NB 的智能补全

Sublime Text 默认的 Autocomplete 功能只考虑当前的文件，而 AllAutocomplete 插件会搜索所有打开的文件来寻找匹配的提示词

通过 package control 安装即可

AutoFileName 快捷输入文件名

自动完成文件名的输入，如图片选取

通过 package control 安装即可

Nodejs

node代码提示

通过 package control 安装即可

HTML-CSS-JS Prettify 格式化插件

格式化HMTL/CSS/JS

通过 package control 安装即可

ColorHighlighter 更直观的颜色显示

支持所有CSS颜色格式，如Hex,RGB,HSL,HSV

通过 package control 安装即可

ColorPicker 调色板插件

在编辑 CSS 样式的时候，要加个自己喜欢颜色或改改颜色啥的，要到 PS 里去调色？ColorPicker 可以让 sublime text3 内置一个调色盘，调好颜色，点击 OK 就会在光标处生成十六进制颜色代码

通过 package control 安装即可。⌘ + Shift + C 会唤出调色面板

3 SideBarEnhancements 加强侧边栏

是否感觉 Sublime Text 的侧边栏功能太弱了呢？？？知道弱还不增强一下！！！

通过 package control 安装即可。

4 SublimeLinter 强大的代码检测的工具

干啥事情都得学会偷懒，code 也是如此。尽管 grunt 工具提供了 jshint 对 js 代码作检查的插件，但是，这就有点后知后觉了。如何在你 code 时就将错误给锁定并消灭呢？还好，使用 submlime 的童鞋就有福了。sublimeLinter 就是这样一个提供代码检测的工具

1、支持的语言截图

2、按需安装相关插件
通过 package control 安装即可

5 Bracket​Highlighter 括号高亮匹配

Bracket Highlighter matches a variety of brackets such as: [], (), {}, "", '', #!xml <tag></tag>, and even custom brackets

通过 package control 安装即可

ConvertToUTF8 文件转码成 utf-8

当 windows 的小伙伴给到你个文件时很多时候不是 utf-8 编码的，直接打开后是乱码。通过本插件，您可以编辑并保存目前编码不被 Sublime Text 支持的文件，特别是中日韩用户使用的 GB2312，GBK，BIG5，EUC-KR，EUC-JP ，ANSI等。ConvertToUTF8 同时支持 Sublime Text 2 和 3

通过 package control 安装即可

【！！！注】
此插件的快捷键和 ColorPicker 有冲突。解决方法：打开 Sublime Text --> Preferences --> Browse Packages，找到ConvertToUTF8 文件夹并进入，找到对应操作系统的 Default.sublime-keymap 文件，直接将其快捷键修改为 "super+shift+alt+c"

Trailing spaces 检测并一键去除代码中多余的空格

还在纠结代码中有多余的空格而显得代码不规范？此插件帮你实现发现多余空格、一键删除空格、保存时自动删除多余空格，让你的代码规范清爽起来

1、通过 package control 安装即可

2、快捷键配置：在Preferences / Key Bindings – User 加上如下代码：

{ "keys": ["ctrl+shift+t"], "command": "delete_trailing_spaces" }

Colorsublime 上 100 个 sublime 主题

在线更换主题。主题库有上百种，这个很不错

1、通过 package control 安装 Colorsublime
2、⌘ + Shift + P 唤出 command menu
3、输入 Colorsublime: Install Theme

实用功能

直接运行 Javascript 调试控制台

具体操作移步： https://segmentfault.com/a/11...

双击选中带中划线(-)的文本

Preferences -- > Settings

找到 word_separators 然后替换为如下

"word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?"