How to set up Sublime Text 2

I've written this manual for windows machines. Except "Getting and installing Sublime Text", things work pretty much the same on linux and OSX. Have fun! Kind regards, Jaap

NEW: Looking for Sublime Text 3 instructions?

If you're looking for instructions about configuring Sublime Text 3 with package control and emmet, go to "How to set up Sublime Text 3"

What others think of this page

Getting and installing Sublime Text

I like my software to be as portable as possible. With steps below, you'll install the portable version of Sublime in no time!

First thing we need to do is visit http://www.sublimetext.com/2 (note the 2 at the end). Depending on your windows architecture (32bit or 64bit), click "portable version" behind Windows (32bit) or Windows 64 bit.

By clicking on the portable version, you'll download a ZIP archive wich can be extracted everywhere you want.

Next step after downloading the ZIP archive is extracting it to a location on your computer. I've extracted it in my dropbox / apps folder so i can use my configured Sublime Text on any of my computers wich has dropbox installed.

After extraction, open Sublime Text by double-clicking on sublime_text.exe

Enabling Package Control

Sublime Text made several developers create many awesome plugins. Package Control enables easy installation and automatic updates for plugins. Below you'll find how to enable Package Control within Sublime Text.

After opening Sublime Text (on a computer hooked on internet), use shortcut ctrl+` to open up the console. Once open, paste the following command into the console:

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'

Hit the enter button and Package Control will be enabled!

If you encounter any errors or difficulties with instructions above, visit this page for manual instructions.

Now that you have enabled Package Control, you can easily install plugins. Groovy!

Plugin: Emmet

Ever heard of "Zen coding"? Its a way to rapidly develop HTML/CSS projects. Emmet (previously known as Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow.

Basically, most text editors out there allow you to store and re-use commonly used code chunks, called “snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.

Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.

Installation

To get Emmet up and running, first you press ctrl+shift+p.

This will bring up the command palette. Type the following: "package install" and hit enter.

A list with all available plugins will popup. Type "emmet" and hit enter.

Emmet will get installed, this usually takes a few seconds. To be sure everything will keep working fine after the installation of Emmet, restart Sublime Text.

I'll demonstrate several examples of Emmet's power during college. If you want to learn using Emmet on you own, visit http://docs.emmet.io/.

Plugin: SFTP

Spend less time managing file transfers and more time coding.

Sublime SFTP is a commercial plugin for Sublime made by Will Bond that enables "mapping" a local folder to a remote (ftp/ftps/sftp) folder. I find it very handy that files i save are uploaded directly!

Installation

To get SFTP up and running, first you press ctrl+shift+p to bring up the command palette.

Type the following: "package install" and hit enter.

A list with all available plugins will popup. Type "sftp" and hit enter.

SFTP will get installed, this usually takes a few seconds. To be sure everything will keep working fine, restart Sublime Text.

Mapping a local folder to a remote folder

To map a local folder to a remote folder, simply right-click the folder of your liking and choose "SFTP/FTP » Map to remote..."

A new file will open called "sftp-config.json". Fill in the needed parameters and pay attention to the following:

  • On default, "type" is set to "sftp". Its the most safe way of connecting to your webhost, but pretty often its not supported. setting "type" to "ftp" usually works.
  • If you want your files to automatically be uploaded on safe, set "upload_on_save" to "true".
  • If you encounter weird connection errors / freezes pretty often, consider uncommenting "ftp_passive_mode".
  • Check if you need to set "remote_path"! Usually "remote_path" contains something like "/html", "/www", "domains/domain.tld/public_html" or something. Check with your webhost!

Ofcourse you need to set some connection parameters ("host", "user" and "password") too.

Once you press ctrl+s to save the changes to "sftp-config.json", you have succesfully mapped your local folder to a remote folder!

Now that you've saved the configuration file, you should be able to communicate with your remote folder. Several actions are available by right clicking the folder and choosing for "SFTP/FTP »"

If you have set "upload_on_save" to "true", try to edit a file in your folder and press ctrl+s to save it. If you've configured your mapping correctly, the file will also be uploaded to the remote folder!