Sublime Text 3 开发环境配置
0x00 安装Package Control
自动安装
使用快捷方式 ctrl+`
或者在菜单栏中选择 View > Show Console
并在弹出的控制台中输入如下内容:
import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; 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)
手动安装
1 点击 Preferences > Browse Packages
菜单
2 进入打开的目录的上层目录,然后再进入 Installed Packages/
目录
3 下载 Package Control.sublime-package 并复制到 Installed Packages/
目录
4 重启 Sublime Text
使用
1 点击 Preferences > Package Control
或者按下 ctrl + shift + p
2 在弹出的输入框中输入 install
选择 Package Control: Install Package
回车,显示插件列表
3 输入插件名搜索插件
4 使用方向键选中想要安装的插件并回车,或鼠标点击想要安装的软件进行安装
0x01 插件配置
Alignment 一个非常简单和易于使用的 自动对齐 插件,使你的代码组织和美观。当您重温代码时候非常有用。
使用方法:选中要调整的行,然后按 Ctrl + Alt + A
(快捷键可自定义)

BracketHighlighter 该插件提供行数列高亮的各种配对的语法符号。(就是将配对的括号等显示在行数列上)


Emmet 绝对的节省时间,您可以轻松快速地编写HTML。
使用方法: ctrl + alt + enter
,并且开始输入Emmet风格的HTML

DocBlockr 一个真正简单的方式来轻松地创建许多语言包括JavaScript,PHP 和 CoffeeScript 的文档块。只要在函数的上面输入 /**
,按 Tab
就可以了。DocBlockr会观察函数需要的变量名和类型,并创建文档块。


AllAutocomplete 最新Sublime Text 3 已包含该功能
Sublime Text 默认的 Autocomplete 功能只考虑当前的文件,而 AllAutocomplete 插件会搜索所有打开的文件来寻找匹配的提示词。

SublimeREPL 这可能是对程序员最有用的插件。SublimeREPL 允许你在 Sublime Texxt 中运行各种语言(NodeJS , Python,Ruby, Scala 和 Haskell 等等)。

Trailing Spaces 高亮显示多余的空格和Tab。
有时候在代码结尾打多了几个空格或Tab,一般不会察觉,TrailingSpacer这款插件能高亮显示多余的空格和Tab,并可以一键删除它们,有代码洁癖的朋友应该会喜欢这个插件。


jQuery jQuery代码提示补全功能

0x02 主题配色
以 Material Theme 为例

安装方式:
1 点击 Preferences > Package Control
或者按下 ctrl + shift + p
2 在弹出的输入框中输入 install
选择 Package Control: Install Package
回车,显示插件列表
3 输入 Material Theme 回车,观察Sublime Text底部状态栏,如下

4 显示如下画面表示安装成功,点击下图红框
Install
安装 A File Icon 插件
0x03 配置文件
点击 Preferences > Settings
,覆盖粘贴内容如下:
{
"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
"ensure_newline_at_eof_on_save": true,
"font_size": 16,
"font_face": "Menlo",
"ignored_packages":
[
"Vintage"
],
"rulers":
[
80,
100
],
"tab_size": 4,
"tabs_small": true,
"theme": "Material-Theme.sublime-theme",
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true,
// Accent
// "material_theme_accent_acid-lime" : true, // Set acid-lime accent color
// "material_theme_accent_blue" : true, // Set blue accent color
// "material_theme_accent_brba" : true, // Set Breaking Bad green accent color
// "material_theme_accent_bright-teal" : true, // Set bright-teal accent color
// "material_theme_accent_cyan" : true, // Set cyan accent color
// "material_theme_accent_graphite" : true, // Set graphite accent color
// "material_theme_accent_indigo" : true, // Set indigo accent color
// "material_theme_accent_lime" : true, // Set lime green accent color
// "material_theme_accent_orange" : true, // Set orange accent color
// "material_theme_accent_pink" : true, // Set pink accent color
// "material_theme_accent_purple" : true, // Set purple accent color
// "material_theme_accent_red" : true, // Set pale red accent color
// "material_theme_accent_sky" : true, // Set bright-cyan accent color
// "material_theme_accent_tomato" : true, // Set tomato red accent color
// "material_theme_accent_yellow" : true, // Set yellow accent color
// Panels
"material_theme_accent_scrollbars" : true, // Enable accent color for scrollbars
"material_theme_accent_titlebar" : true, // Enable accent color for titlebar
"material_theme_bright_scrollbars" : true, // Bright scrollbars puck color
"material_theme_compact_panel" : true, // Set minimal padding for the search panel
"material_theme_contrast_mode" : true, // Enable sidebar and panels contrast mode
"material_theme_panel_separator" : true, // Show bottom panel separator
"material_theme_small_statusbar" : true, // Set small status bar
"material_theme_titlebar" : true, // Enable title bar (OS X 10.10+)
// Sidebar
"material_theme_arrow_folders" : true, // Replace folder icons with arrows
"material_theme_big_fileicons" : true, // Show bigger file type icons
"material_theme_bullet_tree_indicator" : true, // Set a bullet as active tree indicator
"material_theme_compact_sidebar" : true, // Set compact sidebar
"material_theme_disable_fileicons" : true, // Hide sidebar file type icons
"material_theme_disable_folder_animation" : true, // Disable folder animation
"material_theme_disable_tree_indicator" : true, // Disable sidebar file indicator
// Tabs
"material_theme_bold_tab" : true, // Make the tab labels bolder
"material_theme_small_tab" : true, // Set small tabs
"material_theme_tabs_autowidth" : true, // Enable autowidth for tabs
"material_theme_tabs_separator" : true, // Show tabs separator, this disables tab hover animation
// If you use Material Theme - Appbar addon, you can use this setting:
"material_theme_tree_headings" : true, // Show sidebar headings
"always_show_minimap_viewport" : true,
"bold_folder_labels" : true,
"font_options" : ["gray_antialias", "subpixel_antialias"], // On retina Mac & Windows
"indent_guide_options" : ["draw_normal", "draw_active"], // Highlight active indent
"line_padding_bottom" : 2,
"line_padding_top" : 2,
"overlay_scroll_bars" : "enabled",
}
0x04 总结
操作到这里,一个便捷、优美的开发环境已经大功告成了!由于篇幅问题,有很多优秀的插件本文中没有提到。希望有兴趣的小伙伴自己去探索。对于有特殊要求的Coder也可以根据自己的要需求自行配置。希望本文能起到一个抛砖引玉的效果。如有不足,请多包涵,谢谢大家!