Sublime Text 3 Mastery for PHP Developers

Tips and tricks for a quick Sublime Text setup for PHP developers

As software developers, we spend most of our time staring down at code until the bug feels uncomfortable and reveals itself so we can sorta fix it; or we write fabulous code that we’ll be ashamed of after a while. Regardless of the day and it’s productiveness, we do spend most of the time in our IDEs or Text Editors. I chose to spend it in Sublime Text.

I’ve used different IDEs in my life spanning from NetBeans, to Eclipse, Visual Studio, and others, and it is always good to have something pointing out your errors before even trying out the solution, but for me, IDEs felt too slow and somewhat laggy.

When it comes to coding with a text editor, the choice is wide but it can be narrowed to the most popular ones: Vim, Notepad++, Atom, and Sublime Text.

I gave Notepad++ a chance some time ago but it didn’t get to me; with Vim, my biggest achievement is “knowing how to quit!”; Atom I still haven’t tried, but a colleague of mine is very satisfied with it.

In this article, I want to show you why I chose Sublime Text and how I made it work for me.

TL;DR;

Let’s start with the quick setup.

Install Sublime Text

  1. Download Sublime Text from their official page.
  2. Install it.
  3. Profit.

Once you’ve installed the basic text editor you should already have a wide range of options available, from creating snippets of code, to shortcut customisations and profile settings.

This is a fair enough start and you will feel comfortable using it as is, but there are improvements to be made.

Sublime Text relies on packages to extend its functionality. When the packages are chosen and configured wisely it becomes more like an IDE without the laggy side, but also without the pre-compile error catching.

Package control

To be able to install packages easily you will need the so-called Package Control. To install it follow the instructions here.

Once installed, you should be able to prompt a panel by pressing ctrl+shift+p on Linux and Windows, and cmd+shift+p on OS X.

Sublime Text install prompt
Sublime Text install prompt

We’ll use this panel to install all of the other packages.

The next section is about speeding up code writing using plugins like Emmet.

Emmet

To install Emmet prompt the panel as mentioned above by pressing ctrl+shift+p and type Install Package. The first item in the list is the Package Control: Install Package. Click on it, wait for a second or so and a new panel will appear. Type Emmet there and then select the first one.

Congratulations! But what did you just install?

Emmet is a compilation of shortcuts and snippets that allows you for quick writing of HTML and CSS code.

For example:

In an HTML document, type ! and press tab. This will generate a whole HTML5 boilerplate. Or, try ul>li*5>a.nav and hit tab. This one generates a list with 5 elements, each containing a link with class nav.

You can install extensions of emmet if you like, to include more snippets or shortcuts. To do so, repeat the procedure to Install Package, write Emmet in the new prompt and see what is available there. If there is something that may suit you, go ahead and install it.

PHP Companion (PHP Developers Only)

Again, start with the familiar ctrl+shift+p combination and Install Package, then search for PHP Companion. Great. Now that it’s installed, go to Preferences -> Key Bindings. This will show you two files, the one on the left should be full of default settings, those are Sublime Default Key Bindings. On the right, you’ll see the User Specific Key Bindings.

This is an example of how you can setup your custom commands. Check this for more details.

[
    { "keys": ["f6"], "command": "expand_fqcn" },
    { "keys": ["shift+f6"], "command": "expand_fqcn", "args": {"leading_separator": true} },
    { "keys": ["f5"], "command": "find_use" },
    { "keys": ["f4"], "command": "import_namespace" },
    { "keys": ["f3"], "command": "implement" },
    { "keys": ["shift+f12"], "command": "goto_definition_scope" },
    { "keys": ["f7"], "command": "insert_php_constructor_property" }
]

Paste that code in your User Specific file (file on the right). Save the changes, then restart Sublime Text editor.

What PHP Companion does, is using shortcuts like f5 and f6 to find the namespace of a class and automatically inline it (f5) or import it at the top of the file (f6).

For OOP and developing with frameworks that rely on classes and namespaces, PHP Companion is a huge boost in productivity.

Beauty of Code

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” – Martin Fowler, 2008.

Taking the above quote for what it is, a truth in all and per all, we need to write good, well formatted, readable, and understandable code. After all, the only real measure of the code quality is the WTF per Minute.

That said, let’s jump on the packages that will make this easier.

DocBlockr

This plugin is a straightforward one. After installing you can go to any file, type /**, and then quickly hit Tab.

This should generate a block comment section like the one below.

/**
 * [yourMethod description]
 * @param  [type] $parameter [description]
 * @return [type]            [description]
 */

As you can see, it automatically populates the parameter names and types (if detectable) and the return type of the function.

Documentation is number one for writing good code and this plugin makes it much easier to handle.

Alignment

Suppose you have the following code:

$apple = “apple”;
$pear = “pear”;
$banana = “banana”;

You can highlight them all at once, press ctrl+alt+a and what you’ll get is:

$apple  = "apple";
$pear   = "pear";
$banana = "banana";

This is especially useful when you have huge arrays containing many single key => value pairs and you want to make it easy to read/edit.

Code Correction

Keeping in mind that Sublime text is not an IDE, helpful hints like syntax errors for custom classes or variables are not easily available. That said, we can still have helpers that let us know if a semicolon is missing or parenthesis has not been closed or similar issues before we open the browser to test it ourselves.

Sublime Linter

Sublime Linter is a basic package that provides syntax error checking out of the box, for Python, JS, CSS, and Ruby.

Once installed it should work right away. Try it yourself: open a .js file, make a syntax error and you should be able to see a red dot on the left side near the line number.

Sublime Text: Sublime Linter showing syntax error
Sublime Linter on the job: showing a syntax error for a missing semicolon

For the languages that are not automatically available with Sublime Linter, all we need to do is install additional packages by prompting the panel once again. Do ctrl+shift+p, type Install Package and, finally, Sublime Linter, then select the language of choice like PHP for example.


Hope you found this article helpful! Do you have some favorite packages that make your coding life easier? Share it in the comments below.

Aleksandar Pavlov
Team Lead and Senior Software Engineer