Drupal Development using Sublime Text 2 in 5 Steps

Category: 
Tutorials
Tags: 
drupal planet, drupal, IDE

Realityloop love Sublime Text 2, it's super fast and as feature rich as many expensive commercial IDE's, but there's no question that it needs a little attention to make the out of box experience an ideal working environment.

After using Sublime for around the past 12 months, trying out lots of packages we've now refined it to the packages listed below (including one that I wrote).


Step One: Download and Install Sublime Text 2

Sublime Text is a sophisticated text editor for code, markup and prose. It's available for OS X, Windows and Linux and may be downloaded and evaluated for free. One license is all you need to use Sublime Text on every computer you own, no matter what operating system it uses. (psst: buy a license, it's worth it!)

Download Sublime Text 2 at:
http://www.sublimetext.com/2


Step Two: Install Sublime Package Control

Sublime Package Control is a full-featured package manager that helps discovering, installing, updating and removing packages for Sublime Text 2. It features an automatic upgrader and supports GitHub, BitBucket and a full channel/repository system.

  • Start Sublime and follow the latest Package Control installation instructions at:
    http://wbond.net/sublime_packages/package_control/installation
  • It most likley tells you to paste the following command into the console:
    1. 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'
  • Restart Sublime as directed via the console

Step Three: Update settings for Drupal Coding standards

Lets set the encoding, tab size, ruler line, etc right now so that our code will meet the Drupal Coding standards.

  • Paste the following between the squigly brackets in "Settings - User" which you can access from the Preferences menu, you need to add a comma between this and any existing rules but make sure there isn't a comma on the last line:
    1. "bold_folder_labels": true,
    2. "caret_style": "wide",
    3. "default_line_ending": "unix",
    4. "draw_white_space": "all",
    5. "ensure_newline_at_eof_on_save": true,
    6. "fade_fold_buttons": false,
    7. "fallback_encoding": "UTF-8",
    8. "find_selected_text": true,
    9. "font_options":
    10. [
    11. "subpixel_antialias"
    12. ],
    13. "highlight_line": true,
    14. "line_padding_bottom": 1,
    15. "open_files_in_new_window": false,
    16. "rulers":
    17. [
    18. 80
    19. ],
    20. "shift_tab_unindent": true,
    21. "tab_size": 2,
    22. "translate_tabs_to_spaces": true,
    23. "trim_automatic_white_space": true,
    24. "trim_trailing_white_space_on_save": true,
    25. "use_tab_stops": true,
    26. "word_separators": "./\\()\"'-:,.;<>~!@#%^&*|+=[]{}`~?"


Step Four: About packages and how to install them

Sublime packages are a bit like Firefox or Chrome extensions in that the application gets better and more powerful as you add them to extend it's functionality.

To install plugins use the following process:

  • SUPER + SHIFT + P (SUPER = CMD on mac or probably CTRL on other operating systems)
  • In the dialogue that pops up, type pi followed by the Enter/Return key to select Package Control: Install Package
  • Now type the package install shortcut listed and hit the Enter/Return key again


Step Five: The plugin list

AdvancedNewFile (package install shortcut: anf)
Create new files and directories really fast, invoke using SUPER+ALT+n


Auto Semi-Colon (package install shortcut: asc)
This plugin automatically moves a semi-colon to outside of the last bracket when pressed inside one of more pairs of brackets.


Bracket Highlighter (package install shortcut: bhi)
Bracket and tag highlighter.


DocBlockr (package install shortcut: db)
DocBlockr is a package which makes writing JSDoc comments and PHPDoc comments a breeze. The pipe in the example below (|) indicates where the cursor will be after the action has run

  1. /**<<enter>>
  2.  
  3. -- becomes --
  4.  
  5. /**
  6. * |
  7. */


Drupal Project Autocomplete (package install shortcut: dpa)
This plugin provides autocomplete for all Drupal functions on a per project basis. Save you project at the root of the Drupal site, just be aware that the completions file will get created the first time you trigger a save on any of the drupal files contained within the project.


Goto Documentation (package install shortcut: gd)
This plugin gives you a command to jump to documentation for the current word. Supports PHP, JS / CoffeeScript, Python, Clojure, Go, Smarty and Ruby on Rails.

  • To set up the keybinding, paste the following between the square brackets in "Key Bindings - User" as you just did for the Goto Drupal API plugin, you need to add a comma between this and any existing rules:
    1. { "keys": ["super+shift+h"], "command": "goto_documentation" }


Goto Drupal API (package install shortcut: gda)
This plugin, written by me, allows you to load the Drupal API documentation for functions that the cursor is currently on.

  • To set up the keybinding, paste the following between the square brackets in "Key Bindings - User" which you can access from the Sublime preferences, you need to add a comma between this and any existing rules and be sure to save your changes:
    1. { "keys": ["super+shift+a"], "command": "goto_drupalapi" }


Git (package install shortcut: git)
Git integration: it's pretty handy. See supported commands at:
https://github.com/kemayo/sublime-text-2-git/wiki.


GitGutter (package install shortcut: ggu)
A sublime text 2 plugin to show an status in the gutter area indicating whether a line has been inserted, modified or deleted.


MacTerminal (package install shortcut: mt)
Shortcuts and menu entries for opening a terminal at the current file.
Open Terminal at File: Press SUPER+t


SASS (package install shortcut: sass)
This plugin gives you SASS support in Sublime.


SideBarEnhancements (package install shortcut: sbe)
Provides enhancements to the operations on Side Bar of Files and Folders. Provides; new file/folder, edit, open/run, reveal, find in selected/parent/project, cut, copy, paste, paste in parent, rename, move, delete, refresh and more.


SideBarGit (package install shortcut: sbg)
Provides git commands on Side Bar menu of Files and Folders.


Sublimerge (package install shortcut: sumge)
Sublimerge is a Sublime Text 2 plugin which allows to diff and merge files DIRECTLY in the editor using graphical interface for that purpose.
Here are my suggested changes for the keybindings

  1. { "keys": ["ctrl+alt+d"], "command": "sublimerge" },
  2. { "keys": ["ctrl+alt+down"], "command": "sublimerge_go_down"},
  3. { "keys": ["ctrl+alt+up"], "command": "sublimerge_go_up"},
  4. { "keys": ["ctrl+alt+left"], "command": "sublimerge_merge_left"},
  5. { "keys": ["ctrl+alt+right"], "command": "sublimerge_merge_right"}


SublimeLinter (package install shortcut: suli)
Plugin that supports "lint" programs (known as "linters"). SublimeLinter highlights lines of code the linter deems to contain (potential) errors. It also supports highlighting special annotations (for example: TODO) so that they can be quickly located.

These instructions are based on a homebrew install on OS X as per our setup instructions at nginx / MariaDB / PHP / Aegir on Mac OS X with optional Drush 5 (works on Mountain Lion!), for other configurations or OS's you will need to nut it out yourself or find a tutorial elsewhere:

  • Install PHP_Codesniffer and drupalcs
    1. $ sudo pear install PHP_CodeSniffer
    2. $ git clone --recursive --branch 7.x-1.x http://git.drupal.org/project/drupalcs.git /usr/local/bin/drupalcs
    3. $ sudo ln -sv /usr/local/bin/drupalcs/Drupal $(pear config-get php_dir)/PHP/CodeSniffer/Standards
    4. $ sudo ln -s $(brew --prefix josegonzalez/php/php53)/bin/phpcs /usr/local/bin/phpcs
  • Configure sublimelinter prefs by updating Preferences/Package Settings/Sublime Linter/Settings - User with the following:
    1. {
    2. "sublimelinter_executable_map":
    3. {
    4. "php": "/usr/local/bin/php"
    5. },
    6. "sublimelinter_syntax_map":
    7. {
    8. "php": "php"
    9. },
    10. "sublimelinter_popup_errors_on_save": true,
    11. "sublimelinter_fill_outlines": true,
    12. "sublimelinter_gutter_marks": true
    13. }
  • Create a new Build System in Sublime, Tools/Build System/New Build System..., and paste the following
    1. {
    2. "cmd": ["phpcs", "--report=emacs", "--standard=Drupal", "--extensions=php,module,inc,install,test,profile,theme", "$file"],
    3. "file_regex": "^(.*):(.*):(.*):(.*)$"
    4. }
    Save file as Drupal.sublime-build in your User packages folder, and select it from the Tools menu. now you can hit SUPER + b to run the codesniffer whenever Drupal code is open.
  • If you want to run the linting whenever you save code you can add the following to your Preferences/Settings - User config:
    1. "sublimelinter_popup_errors_on_save": true


SyncedSideBar (package install shortcut: ssb)
When you focus an open file expand directory tree and select the file in project sidebar.


Theme - Soda (package install shortcut: ths)
This plugin gives you a much nicer custom UI theme.

  • Paste the following between the squigly brackets in "Settings - User" as you just did for the Goto Drupal API plugin, you need to add a comma between this and any existing rules:
    1. "theme": "Soda Dark.sublime-theme"


TrailingSpaces (package install shortcut: tsp)
Highlight trailing spaces and delete them in a flash.

  • To set up the keybinding, paste the following between the square brackets in "Key Bindings - User", you need to add a comma between this and any existing rules:
    1. { "keys": ["ctrl+shift+t"], "command": "delete_trailing_spaces" }


As a precautionary measure quit sublime and restart it.

Feedback

I was using sublime text 2 since build 2139 and almost of the settings are the same I just discover a few of them with you! thanks for share you knowledge! just need a true object follow to see things like $user->[alt + space] and popup a list :D or PHP objects (like DateTime) Great post!

Submitted by luigi - killua99 on August 9, 2012 - 9:45pm

Thanks for posting that list of plugins, some new ones in there that look great. Do you have a solution for debugging though? I still haven't found anything better than PHPStorm for a complete IDE and unless ST2 can integrate a debugger I can't see myself using it often.

Submitted by Tanc on August 9, 2012 - 11:14pm

Use SublimeXdebug: https://github.com/Kindari/SublimeXdebug

It's in package control as "Xdebug"

Submitted by Cameron Eagans ... on August 10, 2012 - 1:11am

I've used MacGDP https://www.bluestatic.org/software/macgdbp/ in the past, but will definitely be trying out SublimeXdebug, thanks Cameron!

Submitted by Brian Gilbert on August 10, 2012 - 8:33am

Looks like there are a few new things for me to try out now.

I've been using Sublime-2 for a little while now; I auto-configure my Sublime-2 preferences in my move-in script, so that all of my systems (virtual and real) can easily be configured to behave the same. It's a handy thing to do, and easy enough to customize to suit your own preferences. See: https://github.com/greg-1-anderson/utiliscripts/blob/master/move-in for details.

Submitted by Greg Anderson on August 10, 2012 - 2:36am

I downloaded and installed sublime text 2 when one of my friend suggested me to use this for my Drupal themes and design. Firstly I was impressed with its latest features and easy to adopt technology then I saw my themes were wonderful then ever.After reading these lines above I will be better In Drupal technology Now.

Submitted by jammy on August 10, 2012 - 5:15pm

There is a great bash script to set up most of these at the bottom of http://www.agileapproach.com/blog-entry/sublime-text-2-drupal-development.

Submitted by Jeff on August 18, 2012 - 7:33am

Quite a cool module for Agile / Extreme programming dev - https://github.com/nlloyd/SubliminalCollaborator

Which could give Sublime Edit, remote pair programming functionality - which would ROCK. Its in need of dev funds.

Submitted by Alex on August 22, 2012 - 1:09am

any other configuration to recognize drupal file extension like .install, .modules, .inc as php language ?

Submitted by Adrian on December 16, 2012 - 2:43pm

I'm running sublime text 2 on windows
When I press ctrl b (super + b) I got
[Error 2] The system cannot find the file specified
[cmd: [u'phpcs', u'--report=emacs', u'--standard=Drupal', u'--extensions=php,module,inc,install,test,profile,theme', u'C:\\wamp\\www\\drupal7\\modules\\block\\block.module']]
[dir: C:\wamp\www\drupal7\modules\block]
[path: C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Windows Live\Shared;C:\Program Files\EmEditor;C:\UnxUtils\usr\local\wbin;C:\EasyPHP\php\php5314x121215120751;C:\EasyPHP\mysql\bin]
[Finished]

Submitted by Adrian on December 17, 2012 - 10:10am

Hi.
Thanks for a great artivle.

This line doesn't work:
sudo ln -s $(brew --prefix josegonzalez/php/php53)/bin/phpcs /usr/local/bin/phpcs

given:
ln: /usr/local/bin/phpcs: No such file or directory

Could you point me in the right direction?

/Steffen

Submitted by Steffen on March 3, 2013 - 10:20am

Hi Steffen,

You need to have PHP installed via that Hombrew keg for the line to work properly.
https://github.com/josegonzalez/homebrew-php

Cheers,
Brian

Submitted by Brian Gilbert on March 13, 2013 - 9:17am

les gars un site pour tous wo veulent jouer le jeu libre de la côte .. ils aiment jouer, mais ils doivent payer de l'argent alors ce site est absoultly gratuit pour tous

Submitted by pooja on March 19, 2014 - 9:35pm

site xboxlive.game pour les jeux gratuits

Submitted by pooja on March 23, 2014 - 3:56pm

site xboxlive.game pour les jeux gratuits..xboxlivegoldcodesgifts.com

Submitted by piya01 on March 23, 2014 - 4:03pm

A third mistake

A third mistake that people make when they are ordering branded Sunglasses is that they don t buy the nicer branded Sunglasses that they are giving to employees or clients. It s important to remember that employees and clients are different than the people that you are going to meet at trade shows and conventions. They are people who deserve recognition and appreciation for what they have done for the company and they deserve better quality branded Sunglasses.Stockings were popular as well as shirt collars have <a href=http://littlemissindependent.co.uk/cheapmbtshoes/>cheap mbt shoes</a> been short and used straight up against the neck. Buccaneer shirts were regarded as trendy and had long, full sleeves and also frills and wide lace at the neck. Trousers were baggy together high waists.<br /> <br /> Keep your further valuable items in the home.The design of a designer pair of sunglasses can be suitable for your friend or your best artist but may not be suitable for you. To create the best effects, make sure that you check with the suitability of a pair of sunglasses for you.<BR><BR>2.

Rayban sunglasses have been a hot favorite among men and have been ordered as a part of uniforms in the airforce.Police sunglasses have also become one high in demand. A good designer sunglass doesnt come inexpensive.You can also combine these bright colours with darker shades in <a href=http://www.joannegowerphotography.co.uk/fakeoakleysunglasses.php>fake oakley sunglasses wholesale</a> order to get a tamed down look. <BR><BR>While selecting garments clothing for the summer season, heavy fabrics are a big no-no. Light cotton fabrics are best for this season, which will keep your cool during the humid summer.Spy Video Camera- Make Your Surroundings SafeThe spy video cameras, as the name suggests, is meant for spying the suspicious surroundings. Long gone are those days when the spy cameras were used only by the government detectives and military etc.To begin with, you'll have to spend interest for your knickers. Preparing arctic panties to get a journey to a chilly climate will certainly benefit! Energy lingerie is light-weight <a href=http://www.allagents.co.uk/advertising/>cheap christian louboutin outlet</a> still can easily preserve you incredibly comfortable.

Designer Sunglasses At Wholesale RatesEveryone wants to look trendy and unique flaunting his own individuality and style. Donning sunglasses is also part of our style statement.There are numerous places the place they can be bought, be it from a great put or all those who sell via world-wide-web. There is a wonderful offer of interest in the golfers group so prolonged as you aspire seriously to turn into a golfer. Hold hunting for your accessories expected for golf you can certainly obtain and fulfill your requires.<br /> <br /> I am all for showing off and these sunglasses really allow me to do that with their sleek pink look.There are a few well known techniques used by these vendors to raise their reputation, for example they can sell a few hundreds e-books for a cent <a href=http://www.myelearningstore.co.uk/course/fakeraybans/>fake ray bans sunglasses</a> or two each. It's being addressed by eBay at the moment. For now they just get away with ripping people off.

Submitted by jiuexmjms on April 9, 2014 - 6:46pm

Add new comment