Kick-Start your Drupal Development and Theming with Sublime Text

Kick-Start your Drupal Development and Theming with Sublime Text

06Aug 2012

I have been using Eclipse, Aptana, NetBeans in the past years. Setting up in Eclipse or Aptana a project or installing plugins has been always a headache. Why? Usually I got conflicts with the plugins and after an update there was always an error occurring telling me something similar like this

plugin error message eclipse IDE

Error Messages Eclipse Plugins

Slow Slow Slow!

For Aptana I have been always fed-up how slow it starts. On my machine (Win 7 64-Bit, 4GB Ram, P6100 2.00 GHz) it needs about 7 seconds to start. In Aptana 2 editing and auto completion was slow. In Aptana 3 looks like they have done some performance improvements. But sorry, Sublime Text 2 is here and I switched.

As a Drupal Developer and Themer do we need those heavy IDEs? From my point of view “No we don’t”. Why?

  1. We script and debug in PHP, JavaScript, HTML
  2. We need an IDE which supports the Drupal API

So we focus on web development and for me an IDE needs to be flexible, slim and fast. Please don’t misunderstand me, every IDE has pros and cons but for scripting HTML/CSS/JS most of this job is done quicker and easier with Sublime Text. The other IDEs haven't convinced me until now.

A few months ago we shared on our fan page the discovery of sublime text. In my free time I spend a bit time to play around with it. And somehow I fall in love with this editor and the first time in my life I paid for an IDE. (I am not associated with sublime text creator ;) )

sublime text UI screenshot

Sublime Text User Interface

Setup your PHP and Drupal development

To setup Sublime text for your Drupal development follow RJ Pittmann’s guide “Sublime Text for Drupal Development”. After installing the package controler it’s pretty simple to install a new plugin. Just hit
CTRL + Shift + P and find the command “Package Control: Install Package” and Sublime Text 2 (ST2) will list current available plugins for you. Pick the plugin of your choice and hit Enter. ST2 will do the rest. The plugin is ready without restarting ST2.

Note: After installing LiveCSS I have found out that there are issues with the theme xml parsing error, that’s why I deinstalled LiveCSS and the error was gone. For Drupal themers this would be great if it works without problem, unfortunately it doesn’t.

If you want to know how to setup your PHP development in ST2, there was someone quicker then me. Stuart Herbert guides you through ST2 and shares with you which plugins you need to install to get ST2 up and running for your PHP development.

Code Snippets save you time

What I like most are the snippets. Snippets are shortcuts which are replaced with pre-defined code snippets which can be installed via the package control plugin. Working with HTML markup this saves you a lot of time and work. Take the bootstrap snippets as an example.
Press CTRL + Shift + P and type in “Package Control: Install Package” and look-up for bootstrap. Install it and you are ready to go.

Create an empty html file and start to type “tb” and hit the Ctrl + Space. You will get a list of suggestions for bootstraps markup. For example pick tbfluid and you will get right away a mark-up for a HTML file with all necessary external files (CSS, JS) included to start.

autocompletion with bootstrap snippets

Autocompletion and select your bootstrap code snippet

code snippet generated for fluid HTML

HTML Fluid Code Snippet

Putting all things together you are able to start developing your Drupal themes. Use your favorite base theme (hope you take our Nucleus ;) ) and create your sub-theme. Maybe you like to develop your own snippets for the base themes which creates your recurring mark-ups so you can reuse them in your projects. E.g. create some for your regions or blocks. Here is a small tutorial how to create your own sublime text snippets.

Shortcuts for Sublime Text

Here you can find a list of Mac shortcuts, Windows shortcuts and Linux shortcuts.

That’s all! Anyone of you guys have additional snippets or plugins for ST2 to share? Let me know. Happy theming guys!

Blog type: