Drupal Development using Sublime Text 2 in 5 Steps
9 AugBrian Gilbert
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:
- 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:
- "bold_folder_labels": true,
- "caret_style": "wide",
- "default_line_ending": "unix",
- "draw_white_space": "all",
- "ensure_newline_at_eof_on_save": true,
- "fade_fold_buttons": false,
- "fallback_encoding": "UTF-8",
- "find_selected_text": true,
- "font_options":
- [
- "subpixel_antialias"
- ],
- "highlight_line": true,
- "line_padding_bottom": 1,
- "open_files_in_new_window": false,
- "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": "./\\()\"'-:,.;<>~!@#%^&*|+=[]{}`~?"
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
- /**<<enter>>
- -- becomes --
- /**
- * |
- */
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:
- { "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:
- { "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
- { "keys": ["ctrl+alt+d"], "command": "sublimerge" },
- { "keys": ["ctrl+alt+down"], "command": "sublimerge_go_down"},
- { "keys": ["ctrl+alt+up"], "command": "sublimerge_go_up"},
- { "keys": ["ctrl+alt+left"], "command": "sublimerge_merge_left"},
- { "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
- $ sudo pear install PHP_CodeSniffer
- $ git clone --recursive --branch 7.x-1.x http://git.drupal.org/project/drupalcs.git /usr/local/bin/drupalcs
- $ sudo ln -sv /usr/local/bin/drupalcs/Drupal $(pear config-get php_dir)/PHP/CodeSniffer/Standards
- $ 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:
- {
- "sublimelinter_executable_map":
- {
- "php": "/usr/local/bin/php"
- },
- "sublimelinter_syntax_map":
- {
- "php": "php"
- },
- "sublimelinter_popup_errors_on_save": true,
- "sublimelinter_fill_outlines": true,
- "sublimelinter_gutter_marks": true
- }
- Create a new Build System in Sublime, Tools/Build System/New Build System..., and paste the following
- {
- "cmd": ["phpcs", "--report=emacs", "--standard=Drupal", "--extensions=php,module,inc,install,test,profile,theme", "$file"],
- "file_regex": "^(.*):(.*):(.*):(.*)$"
- }
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:
- "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:
- "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:
- { "keys": ["ctrl+shift+t"], "command": "delete_trailing_spaces" }
As a precautionary measure quit sublime and restart it.
drupal planetdrupalIDE