Skip to main content

Sublime Text 2: Drupalized

Published on

For quite a long time I used Aptana as my development IDE; but, as time went on I found it quite bloated and extra features I didn't need. So I gave Sublime Text a try since it's all the rage by those who use it. Sublime Text is amazing because it's so simple, yet extendable. At first I was put off by a few things so I figure I'd share my setup and packages to turn Sublime Text into your IDE powerhouse!

First off visit http://www.sublimetext.com/ and download the program - it's available on Linux (I run Ubuntu), Mac, and Windows. Technically this is a paid program, but if you do not purchase a license it just harasses you after 6 or 7 saves with a "Hey, Purchase Me" nag. (Which, I recommend purchasing, devs did a great job.)

Second - get Package Control! This allows you to browse and install packages (via Git channels) through the program itself. Load up Sublime Text and open the console: cntrl/cmd+`  or View -> Show Console. Paste the following into your console to setup Package Control.

import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404e330c659d4bb41d3bdf022e94cab3cd0'; 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()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

Close and reopen Sublime Text. For full instructions (aka the original page, there isn't much else to do) https://sublime.wbond.net/installation#st2. 

To install packages use the shortcut shift + cntrl/cmd + p and a Sublime Text context menu will open. Start typing "Install Package" to search through the options available. Either hit enter or click on "Package Control: Install Package." I'll quickly name off the packages I have installed and a brief description. If you want to learn more about each package, the title will be linked to the repo's homepage.

  • SideBarEnhancements - Improves the sidebar to reflect a typical IDE.
  • Git and SideBarGit - Adds built-in Git handling and exposes Git commands through sidebar.
  • BracketHighlighter - easier identification of brackets
  • Emmet - Ridiculous autocomplete and shortcuts for CSS.
  • Sass and SCSS - I use Sass, provides better syntax handling and autocomplete.
  • Drupal - Tada! Enables Drupal API autocompletes, recognition of .info files as a syntax.
  • DocBlockr - makes documentation code a bit easier

Now, time to tweak your settings. Go to Preferences -> Settings - User. This will enable some time saving features: trim whitespace, EOL at end of file, spacing, rulers (because things should go over 80 columns, technically. You can checkout my config as a Gist, but you merely need to add the following:

"default_line_ending": "unix",
"draw_white_space": "all",
"ensure_newline_at_eof_on_save": true,
"rulers":
[
   80
],
"shift_tab_unindent": true,
"tab_size": 2,
"translate_tabs_to_spaces": true,
"trim_automatic_white_space": true,
"trim_trailing_white_space_on_save": true,
"use_tab_stops": true,
"word_separators": "./\\()\"'-:,.;<>~!@#%^&*|+=[]{}`~?"

There ya go! You should be all set and ready to rock 'n' roll. Apparently someone has created a shell script to do all this for you: https://github.com/enzolutions/sublime-drupal. But, this article was geared for people new to Sublime Text, or new to development in general.

I'm available for one-on-one consulting calls – click here to book a meeting with me 🗓️