My favorite text editor right now is Sublime Text 2. While it does have its limitations, it satisfies most of my needs as a (heavily front-end) web designer/developer.
This project contains a collection of instructions, suggestions, and settings that outline my current Sublime Text 2 workflow, and how you can achieve a similar configuration.
-
i. Preferences
ii. Key Bindings
-
ii. Alignment
iii. BracketHighlighter
iv. Browser Refresh
vi. Coffeescript
vii. CSS Comb
viii. Detect Syntax
ix. EditorConfig
x. Emmet (previously ZenCoding)
xii. Goto Documentation
xiii. Hex-to-HSL
xiv. Hex-to-RGBA
xv. HTML5
xvi. jQuery
xvii. JsFormat
xviii. LESS
xix. MarkdownEditing
xx. NetTuts+ Fetch
xxi. Sass
xxii. SFTP
xxiii. Sidebar Enhancements
First thing's first — you've gotta install the piece. Head on over to http://www.sublimetext.com/dev, download, and install it on your machine.
sublime [arguments] [files] - edit the given files
or: sublime [arguments] [directories] - open the given directories
or: sublime [arguments] - edit stdin
If you want to be able to open files with ST2 directly from your terminal window using a custom command (something I do quite often), then you will want to follow these instructions.
Next, you'll definitely want to install Package Control, a nifty ST2 plugin that lets you manage ST2 packages directly from ST2's Command Palette (Cmd+Shift+P for Mac, Ctrl+Shift+P for Windows/Linux).
To install, bring up the ST2 console (Ctrl + `), paste in the following code, and hit return:
import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'
It's important to note that ST2 "Themes" change the actual look and feel of the software itself. They are not to be confused with "Color Schemes" (explained in the next section), which alter the look and feel of your code within the editor.
The default look of ST2 is really nice, but I wanted a bit more. I've installed the fantastic Spacegray Theme by @kkga, and I am very happy with it. I am currently using the "Eighties" variation.
-
Press the Cmd+Shift+P (or Ctrl+Shift+P for Windows/Linux) key combination, type "install" into the Command Palette, and select the "Package Control: Install Package" option from the list.
-
Type "Spacegray" to narrow down the list, and select the "Theme - Spacegray" package (click with mouse or press the Enter key) to install it.
-
To activate the theme, open your User Settings file in
Sublime Text 2 -> Preferences -> Settings - User, and add the following code (change "Dark" to "Light" if you prefer that one instead):{ "theme": "Spacegray Eighties.sublime-theme" } -
Save your User Settings file, and re-open ST2 to see the changes take effect.
If you aren't a fan of the Spacegray theme, there are plenty of other options out there. A lot of people really enjoy the Soda Theme by Ian Hill, too. I used it for a long time before switching to Spacegray.
ST2 Color Schemes alter the look and feel of your code, adding syntax highlighting and other goodies. Adding color makes it easier for humans to read and skim through code.
In case you didn't know, ST2 is compatible with TextMate themes.
I am partial to the base16 eighties theme, which I found here.
To install a color scheme, simply go to Sublime Text 2 -> Preferences -> Browse Packages, and drop your .tmTheme files into the "Color Scheme - Default" folder.
To activate the color scheme, just select it from the Sublime Text 2 -> Preferences -> Color Scheme folder.
Boom. Done.
One of the beautiful things about ST2 is the flexibility of its settings. You can tweak just about every little aspect of the software to get it working exactly how you want it.
Personally, I am happy with a lot of the default settings that ST2 provides, so my User Settings file is fairly lightweight.
-
Open up the Default Settings file and you'll see all the preferences you can tweak. This file can be found by going to
Sublime Text 2 -> Preferences -> Settings - Default. -
Also open up the User Settings file, which can be found by going to
Sublime Text 2 -> Preferences -> Settings - User.
Below is what my current User Settings Preferences.sublime-settings - User file looks like:
{
"auto_complete_commit_on_tab": true,
"bold_folder_labels": true,
"caret_style": "phase",
"close_windows_when_empty": false,
"color_scheme": "Packages/Theme - Spacegray/base16-ocean.dark.tmTheme",
"detect_slow_plugins": false,
"dictionary": "Packages/Language - English/en_US.dic",
"draw_white_space": "all",
"ensure_newline_at_eof_on_save": true,
"find_selected_text": true,
"fold_buttons": false,
"font_face": "Monaco",
"font_options":
[
"subpixel_antialias"
],
"font_size": 14.0,
"highlight_line": true,
"highlight_modified_tabs": true,
"hot_exit": false,
"ignored_packages":
[
"Vintage",
"AdvancedNewFile"
],
"indent_guide_options":
[
"draw_active"
],
"line_padding_bottom": 2,
"line_padding_top": 2,
"open_files_in_new_window": false,
"remember_open_files": false,
"rulers":
[
72,
79
],
"spell_check": true,
"tab_completion": true,
"tab_size": 4,
"theme": "Spacegray Eighties.sublime-theme",
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true,
"wide_caret": true,
"word_wrap": true
}
Since I work off a 27" iMac at the office, and a 15" Macbook Pro at home, I find that the Monaco font at size 14 provides a nice, readable experience on both machines.
The tab_size and translate_tabs_to_spaces options are already "4" and "false" in the Default Settings file, but I added them here because they are some of the more commonly altered options. Also, depending on the project I'm working on, I may have to change those settings on the fly so I don't screw up the spacing for anyone I'm working with.
To help speed up your workflow, ST2 provides a ton of built-in key bindings, or keyboard shortcuts. As you've probably guessed, you can also create your own custom keyboard shortcuts.
- Open up the Default Key Bindings file and you'll see all the available keyboard shortcuts. This file can be found by going to
Sublime Text 2 -> Preferences -> Key Bindings - Default. - Also open up the User Key Bindings file, which can be found by going to
Sublime Text 2 -> Preferences -> Key Bindings - User.
Below is what my current User Key Bindings Default (OSX).sublime-keymap - User file looks like:
[
// Refresh settings & folder list
{ "keys": ["super+ctrl+r"], "command": "settings_refresh" },
{ "keys": ["alt+ctrl+r"], "command": "refresh_folder_list" },
// Toggle sidebar visibility
{ "keys": ["ctrl+s"], "command": "toggle_side_bar" },
// Convert spaces to tabs
{
"keys": ["ctrl+shift+x"], "command": "expand_tabs", "args": {
"set_translate_tabs": true
}
},
// Package - Advanced New File
{ "keys": ["super+alt+n"], "command": "advanced_new_file" },
{ "keys": ["shift+super+alt+n"], "command": "advanced_new_file", "args": { "is_python": true } },
// Package - Browser Refresh
{
"keys": ["super+shift+r"], "command": "browser_refresh", "args": {
"auto_save": true,
"delay": 0.0,
"activate_browser": true,
"browser_name" : "Google Chrome"
}
},
// Package - Goto Documentation
{ "keys": ["ctrl+shift+h"], "command": "goto_documentation" },
// Package - Hex-to-HSL, convert hex values to HSL
{ "keys": ["super+shift+h"], "command": "hex_to_hsl" },
// Package - Hex-to-RGBa, convert hex values to RGBa
{ "keys": ["super+shift+r"], "command": "hex_to_rgba" },
// Package - SFTP, setup/edit/browse server commands
{ "keys": ["ctrl+shift+e"], "command": "sftp_edit_server" },
{ "keys": ["ctrl+shift+s"], "command": "sftp_browse_server" },
{ "keys": ["super+ctrl+s"], "command": "sftp_browse" }
]
Packages are tiny plugins you can install to further enhance your ST2 workflow experience. There are a number of packages that I consider to be essential to my workflow, listed below:
Allows you to quickly create new folder structures and files.
OSX, Windows, Linux: Ctrl+Alt+A
Simpler alignment of multi-line selections and multiple selections.
- Align multiple selections to the same column by inserting spaces (or tabs)
- Align all lines in a multi-line selection to the same indent level
- Align the first = on each line of a multi-line selection to the same column
Select a chunk of code, or make multiple selections, and press
OSX: Cmd+Ctrl+A
Windows, Linux: Ctrl+Alt+A
Adds highlighting of beginning and ending brackets in many programming languages. A huge time saver.
This plugin will switch from ST2 to Google Chrome, Google Chrome Canary, Safari, Firefox or Opera and reload the active tab.
Allows you to copy multiple selections to your clipboard within ST2, to be used interchangeably.
To show the clipboard history, press
OSX: Cmd+Alt+Ctrl+V
Windows, Linux: Ctrl+Alt+V
A TextMate syntax bundle for Coffeescript.
A collection of useful CSS snippets. HUGE TIME SAVER.
If interested, I've created my own fork of this package here.
An amazing package for sorting your CSS properties in a more readable and logical order.
Select a chunk of CSS, and press
OSX, Windows Linux: Ctrl+Shift+C
Helps to decifer the syntax of files that might not otherwise be detected properly.
[EditorConfig](https://github.com/sindresorhus/editorconfig-sublime by sindresorhus
EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs.
An in-editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing.
CSS snippets based on Emmet CSS syntaxes. Works with CSS, LESS, SCSS, and SASS. You can find the full list of snippets here.
Finds relevant documentation for the function you have your cursor on.
Click to place your cursor on a function, and press
OSX, Windows, Linux: Ctrl+Shift+H
Converts hexadecimal colors to HSL colors, and visa versa.
Click to place your cursor on a hex or HSL value, and press
OSX, Windows, Linux: Ctrl+Shift+U
Converts hexadecimal colors to RGBa colors, and visa versa.
Click to place your cursor on a hex or RGBa value, and press
OSX: Cmd+Shift+R
Windows, Linux: Ctrl+Shift+R
Adds HTML5 syntax highlighting & relevant snippets to ST2.
jQuery syntax highlighting and snippets for ST2.
Javascript syntax highlighting for ST2.
LESS by Dan Rogers
LESS syntax highlighting for ST2.
Powerful Markdown package for Sublime Text with better syntax understanding and good color schemes.
Type fetch into the Command Palette.
Adds syntax highlighting, indentation, and snippets for Sass and SCSS files.
Commercial SFTP/FTP plugin (free with nag popup) - upload, sync, browse, remote edit, diff, and vcs integration
Adds a bunch of new options to the ST2 sidebar, making it exponentially more useful.
####For more useful ST2 packages, please check out this GitHub project.
Using Dropbox, I keep all of my ST2 settings, snippets, packages, etc synced between all of my machines. So if I'm home working at night and decide I want to change the tab size to 2 spaces, those changes will be reflected on my work computer when I come in the next day. I LOVE THIS.
Here is the article I followed to get this set up correctly.
Also, since I store all of my web files on Dropbox, and both of my machines' admin users share identical names, all of my ST2 projects are synced up as well. This happens because the file paths inside the .sublime-project files are identical.
I am not sure if this works the same way on Windows or Linux. I imagine it should.
Here is an example of what one of my saved .sublime-project files looks like:
{
"folders":
[
{
"path": "/Users/[YOUR_USERNAME]/Dropbox/Development/vhosts/examplesite/"
}
]
}