Switching to Sublime Text

Some of the guys in the office recently decided they'd like to (finally) make the switch from their current text editor to Sublime Text, but unless you've been using it from the beginning, I can imagine it feels like a pretty daunting task.

So Alex asked Todd and myself to set aside a bit of time, and work on a little workshop/presentation/guide (whatever you want to call it) for anyone on the team that wanted to make the switch without having to waste any time on the usual associated growing pains:

• What are the best plugins?
• How do I even install plugins?!
• Are they compatible with the latest version?
• How do I change the colour scheme/theme?
• etc!

Let's get started!

Unfortunately, you aren't lucky enough to have us put on our mini workshop for you in person, but all is not lost, just follow this (relatively) simple guide and you'll be coding like a pro in Sublime in no time, wondering why you didn't make the switch years ago!

1. Installation

Well, obviously the first thing you want to do is to go and download Sublime Text (for whichever OS you like!). Then do the usual install process and load it up for the first time!

2. Customise the look and feel

There are loads of custom settings that you can edit in Sublime, it's been built to be able to cater to pretty much everybody's specific needs or quirks (which is great). You can find this by selecting ‘Preferences' tab at the top of the window and the selecting "Settings - User" or if you're on mac you can simply press "cmd + ," to open it.

You'll be surprised to find at this isn't the usual preference panel you were expecting, but simply a (more or less) empty JSON file! To get you up and running without any headaches then simply copy and paste the code included below, it's the definitive list of preferences that Todd and I feel make Sublime's coding experience second to none!

(If you're not on mac then delete the extra mac specific stuff at the bottom, it just contains a few extra options that are good on a mac, but don't have a desirable effect when running on windows).

{
	// GENERAL
	"font_options":
	[
		"no_bold"
	],
	"word_wrap": true,
	"dictionary": "Packages/Language - English/en_GB.dic",
	"highlight_line": true,
	"match_brackets_angle": true,
	"line_padding_bottom": 3,
	"line_padding_top": 3,
	"trim_trailing_white_space_on_save": true,
	"copy_with_empty_selection": false,
	"auto_find_in_selection": true,
	"drag_text": false,
	"highlight_modified_tabs": true,
	"bold_folder_labels": false,
	"create_window_at_startup": false,
	"close_windows_when_empty": false,
	"always_show_minimap_viewport": true,
	"folder_exclude_patterns":
	[
		".bundle",
		".git",
		".hg",
		".sass-cache",
		".svn",
		"bin",
		"CVS",
		"tmp"
	],
	"file_exclude_patterns":
	[
		".DS_Store"
	],

	// OSX
	"font_face": "Monaco",
	"font_size": 12,
	"font_options":
	[
		"subpixel_antialias"
	],
	"caret_style": "wide",
	"scroll_past_end": true
}

Note: If you're wanting to play around with more than just the bits we've set in our file then you can find all the possible settings you can edit by selecting "settings - default" from the preference list, all the options are commented so you don't have to do any guess work.

3. Get some add-ons! (Package Control)

Now the coding experience in Sublime Text is great from the get go, but there are a few extra plugins (or ‘packages' as they're called in Sublime) that you can add which will make you even faster and more efficient than before!

So let's get down to business; look across the top of your window and click the "view" tab, followed by selecting "show console" from the list. You'll then be faced with a new white box across the bottom of the window.

In the box you'll want to paste the following block of code and hit enter!

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

Like so:

This will install the "Package Control" plugin, which makes installing any other packages as easy as something...very easy. Like eating cake, or beating me at table tennis.

When this has finished you can now set about installing the rest of plugins we recommend (of course you can also checkout the full list of available plugins over at sublime.wbond.net).

To install a new package what you'll now want to do is press cmd + shift + p (mac) or ctrl + shift + p (windows/linux), a drop down menu will appear at the top of your window, type "inst" into the filtering field and you should then have selected an item titled "Package Control: Install Package", select this by clicking it or simply hitting enter.

The box will momentarily disappear while it talks to the server to get the latest list of packages available to download. Once the dropdown list has reappeared you can the search for the following packages, clicking or hitting enter while they're highlighted to install them, It's that easy now!

Recommended packages:

• Emmet – In layman's terms, this lets you write HTML/CSS in shorthand and then dynamically expand it into the correct markup.
• SCSS – Syntax highlighting for when writing SCSS.
• SideBarEnhancements – Gives you more options in the folder view sidebar when you right click.
• DocBlockr – If you write any Javascript then you'll appreciate this time saving package for writing comment blocks.
• SublimeCodeIntel – this improves upon Sublime's existing autocomplete function, making it smarter, learning from what you code to predict what you're going to write next.
• Dayle Rees Color Schemes – If the standard colour theme isn't your cup of tea (it isn't mine!) you've got a few choices by default but I'm a massive fan of Dayle Rees' "Iceberg" scheme.
• Theme - Soda – Again, like the colour schemes above this isn't essential but I feel it's worth installing as it tidies up the user interface even further.
• Sublime​Linter – All your linting needs covered, your code can be linted as you type (before saving your changes) and any errors are highlighted immediately.

…and breathe!

Well we've got all the basics covered now, so I'm going to stop now and let you digest it. We've still got some extra tips, hints and time savers to go through before you can stick a "Sublime Pro" badge on your chest, and Todd will be posting about them in the near future. That said, If you're an impatient type then head over to google and search around with the following topics prefixed with "Sublime text":

• How to apply your own custom key bindings
• How to setup Projects
• Great shortcuts to speed up your workflow
• Utilising Snippets

Shameless plug (alterative icon)

If you're not a fan of Sublime's icon (which like many, I'm not!) then there are lots of alternatives floating around the internet! Have a search around or check out my replacement icon that's based on the original Sublime icon, before 3d and orange effects 'uglyifed' it!