下载安装 Sublime Text

Sublime Text 下载页面。Windows 系统有 portable 版本方便移动使用

在官网截的图，OS X 下的默认UI界面，其他平台的也差不多

安装 Package Control

在Sublime Text 里面的菜单栏中点击 View -> Show Console 之后就可以看到控制台了

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

常用快捷键

键位图标解释

• ⌘ : Command key
• ⌃ : Control key
• ⌫ : Delete key
• ↓ : Down arrow key
• ⌥ : Option or Alt key
• ↩ : Return or Enter key
• ⇧ : Shift key
• ↑ : Up arrow key

安装插件

功能增强类

• AdvancedNewFile
  这个插件可以很方便地创建新文件。只要按 super+alt+n 就可以看到创建新文件的提示了。

  值得注意的是，你键入的文件夹路径如果本身不存在的话，那么AdvancedNewFile 会自动帮你创建文件夹，非常方便，这样你就不用先创建文件夹然后再创建文件了，而且你也不用再动用鼠标来完成这个动作了，一切都可以在手不离键盘的情况下完成。

  
• Alignment
  Alignment 可以让你非常方便地对齐代码，让你的代码看起来更加简洁，尤其是当你有一堆的变量声明的时候，代码根据 = 对齐，这是一个非常棒的视觉效果：

  
• BracketHighlighterBracketHighlighter 可以高亮当前 scope 的括号（包括花括号、中括号等）。让你知道当前区域的开始跟结束是在哪个地方。
  
• DocBlockr
  这是一个编写注释的神器，可以很方便地为函数、变量生成注释。具体使用方法可以在官网上找到。
• Emmet
  估计绝大部分前端对 Emmet 都不陌生，或者说对 ZenCoding 都不陌生。Emmet 的前身是 ZenCoding ，它为前端开发人员提高了 N 倍的效率来编写 HTML 文档，从此编写 HTML 不再是个痛苦的过程。比如在 HTML 里面编写：ul>(li>a>(i+span))*10 然后再按 Tab 键即可生成如下代码：

<ul><li><a href=""><i></i><span></span></a></li><li><a href=""><i></i><span></span></a></li><li><a href=""><i></i><span></span></a></li><li><a href=""><i></i><span></span></a></li><li><a href=""><i></i><span></span></a></li><li><a href=""><i></i><span></span></a></li><li><a href=""><i></i><span></span></a></li><li><a href=""><i></i><span></span></a></li><li><a href=""><i></i><span></span></a></li><li><a href=""><i></i><span></span></a></li></ul

• EditorConfig
  这个插件可以让 Sublime Text 支持 EditorConfig 。EditorConfig 是一种配置文件，里面可以设定一些编程风格，让你的代码即使在不同的平台或者不同的编辑器里面编辑都可以有一个统一的风格，而不用针对每一种编辑器去配置相关的编程风格。
• LiveReload
  LiveReload 是一个可以监控文件变动然后自动刷新页面的插件，对于前端开发来说也是一大神器。用了它以后，你就再也不用一边修改代码一边按 F5 刷新浏览器了。

  这个插件比较常用于一些比较小的 Demo 页面，毕竟对于一个比较大型的项目通常都是使用 BrowserSync 这种工具来做到实时刷新。
• SidebarEnhancements
  这是个增强 Sublime Text 的 Sidebar 功能的插件。原生的 Sidebar 对于文件的管理非常有限，这个插件则极大地扩大了左侧 Sidebar 的文件管理能力。右键文件或文件夹就能看到以下菜单：

  
• Markdown Preview
  一个 Markdown 工具，可以帮你自动生成 Markdown 的预览，以及生成 HTML 等功能。Markdown 的预览有两种风格，一种是插件自带的，另外一种是 GFM ，也就是 Github flavored markdown。

  需要注意的是，GFM 是直接调用 Github 的 API 动态生成 Markdown 预览的，因此用 GFM 会有一个请求的过程。在这个请求的过程会造成 Sublime Text 假死。因此我一般都是用插件自带的预览风格。这个插件对于经常编写 Markdown 的人来说是一个非常实用的功能。再搭配 MarkdownEditing 这个插件的话，Sublime Text 基本就是一个非常棒的 Markdown 编辑器了。

  
• SublimeLinter
  这是一个代码提示框架。它本身只是一个框架，你需要额外安装具体某种语言的 Linter 才能实现代码提示。例如安装 Eslint 后，如果你的项目有 Eslint 的配置文件的话，那么 Sublime Text 就会在代码左侧显示相应的代码提示。

  

  SublimeLinter 会在代码的左边显示错误信息或者警告信息，然后在编辑器底部的信息栏里会显示当前光标这一行的错误信息或者警告信息。

  这个插件对于编程代码风格的控制非常有用。它可以非常直观地让你知道你的代码哪里有问题，哪里需要修改（当然，这个提示是基于你的 linter 的配置，不同的配置会有不同的提示结果）。
• Terminal
  一个小插件，可以直接在 Sublime Text 里面唤起 Terminal ，并且默认进入到当前项目的目录里面。这也是一个非常实用的插件，因为在编写代码的时候，有时候会经常性地在编写一段代码之后就打开终端运行一些命令，比如运行测试，或者跑个脚本什么的。

  因此，有了这个插件之后，即使你在编写代码的过程中需要打开终端的话，双手也无需离开键盘，从而提高了工作效率。
• GitSavvy
  一个非常好用的 Git 工具，可以让你非常方便而且非常简单地进行 Git 操作。基本上常用的命令都可以通过这个插件来实现。而且更加好用的是整个过程你都不用离开键盘！在打开 GitSavvy 的界面时你就可以通过不同的按键来实现 Git 的各种命令。

  至此你应该可以看出来，一个高效的编码流程应该是让双手尽可能地专注于键盘上，而不是时不时就去抓鼠标进行一些很基础但是也很繁琐的任务。

  
• GitGutter
  这也是一个有关 Git 的插件，它可以实时显示当前文件的改动情况，这也是一个非常实用的插件。

  

Snippet 增强类

• AngularJS
• Bootstrap 3 Snippets
• HTML5
• All autocomplete
  需要特别介绍一下这个插件，这个插件让 Sublime Text 的自动补全更加强大。它可以匹配到当前打开的文件的变量名或者关键字，因此你在写代码的时候自动补全列表就会比以前丰富得多，让你编写代码更加方便！

语法支持增强类

• Handlebars
• Jade
• Less
• Sass
• Babel
• MarkdownEditing

主题类

• Material Theme
  

  

  
• Theme-Spacegray
  

  

  
• Seti_UI
  
• Theme Primer
  

  

参考配置

{
	"always_show_minimap_viewport": true,
	"bold_folder_labels": true,
	"ensure_newline_at_eof_on_save": true,
	"folder_exclude_patterns":
	[
		"node_modules",
		".git",
		".sass-cache",
		".idea"
	],
	"font_face": "Monaco",
	"font_size": 12,
	"highlight_line": true,
	"ignored_packages":
	[
		"Markdown",
		"Vintage"
	],
	"install_prereleases":
	[
		"SublimeCodeIntel"
	],
	"line_padding_bottom": 3,
	"line_padding_top": 3,
	"overlay_scroll_bars": "enabled",
	"rulers":
	[
		80
	],
	"translate_tabs_to_spaces": true,
	"theme": "Material-Theme.sublime-theme",
	"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme"
}