How an IDE can help you

William Turrell
v0.1.1 - Wed 1 Jun 2016 (first published 15 March 2015)

This article is a look at the ways IDEs (or Integrated Development Environments) can:

It also serves as a review of PhpStorm which I’ve been using since last summer.

The problem with text editors

I’ve been a fan of Vim for a long time – I’m using MacVim and Marked 2 to write this – having previously used Emacs, Textmate, Espresso and before that several Windows apps beginning with Notepad.

Vim’s biggest benefit is the keyboard shortcuts, each of which perform or repeat an action, navigate to or select a portion of text and can be combined atomically in endless ways to do whatever you want.

It’s also free and installed as standard on Linux servers.

Further reading:

Vim is highly extendable with plugins; with extensions to browse your files, quickly write HTML, insert snippets, surround text with quotes or tags, test your PHP for errors, test your javascript fo errors, insert and delete comments and on a meta level, more easily manage them.

For a long time this suited me. I wasn’t aware there was a better way and I knew many people didn’t have many of these things. (I’ve had people ask how to get basic features like colour syntax highlighting.)

But it’s not idea – particularly the plugin situation.

When you install Vim nobody gives you a recommended list of addons and there’s little official online curation. You have to ask around, trawl blogs and resort to trial and error. Some plugins won’t be quite what you need; you may struggle to get others to work at all. Also, unlike Vim itself, the keyboard shortcuts are likely to be more complex and lacking in consistency.

You’ll often need to edit your .vimrc file to make and occasionally one plugin might conflict with another. It’s your responsibility to keep everything up to date. If you don’t actively do this, your development environment won’t get any improvements.

Switching to an IDE

Whilst I advocate Vim, I generally never get involved in discussions about which is the “best” text editor. The other problem is, in my experience, far more gets written about text editors than IDEs: probably because blog posts about text editors are likely to reach a wider audience as they can appeal to a cross section of writers and front/back-end developers. Plus people like looking at screenshots; sometimes more work goes into appealing text editor user interfaces.

Some editors do have plugins to support Vim keybindings (i.e. you can use at least some of the Vim keyboard shortcuts in the parent app) however often the level of support is limited.

Strangely, I genuinely hadn’t heard of PhpStorm at all until I noticed several mentions of it in Tom Nowell’s WordPress the Right Way (highly recommended.) It’s worth noting it’s one of many apps by Jetbrains (which share many common features) and it supports HTML, CSS and JS too.[1]

See also: Jetbrains: The unicorn Silicon Valley doesn’t like to talk about

Note: I’ve included Mac shortcuts here, but all Jetbrains apps use Java and are cross-platform (Windows, Mac, Linux).

First thing I checked: does it have Vim keybindings? Yes, via a community plugin, and there’s pretty good coverage.

There’s an Early Access Programme (EAP) whereby for much of the year a time-limited version of the latest alpha/beta can be downloaded free of charge – you just upgrade it every week or two and thereby you can try out the app for a long time before you need to commit to buying a copy.

I was about to start a WordPress project; in the past year PhpStorm has added full WordPress support, which means, among other things:

An IDE really understands your code

In most editors, you might at best you might get basic syntax checking, so you can see if the code will compile. You might have to manually execute it.

In PhpStorm, the entire tree of your project is indexed[2] and whatever you type is being checked in real time.[3]

Errors and warnings are indicated by little markers in the gutter to the right of your code, scaled to give a overview of the entire file, not just the visible screen. A small coloured square in the top right shows the overall status - the challenge is to keep the gutter nice and clean and keep an eye on the square which should wherever possible stay green, or at best yellow.

Anything that’s undefined, or situations where you’re calling a function (whichever file in your project it’s in, PhpStorm indexes the lot) with incorrect or missing parameters, will be highlighted in red.

PhpStorm also changes any variables you’ve defined to grey when they’ve been declared but haven’t been used yet; you’ll quickly get used to spotting these and knowing to come back to them (it also helps prevent typos.)

THe program flow is analysed too - you’ll get a visual warning if it’s impossible for a block of code to ever run.

When you want to do some proper refactoring, you can run more detailed inspections using PHP Codesniffer and Mess Detector (and configure all their options in Preferences.)

I can’t overstate how much of a time saver this all is.

These problems are incredibly common and highlighting errors as you go means you start to fix them at the time rather than manually loading a page every so often and then having to retrace your steps.

Testing the basic application of your application in the browser isn’t eliminated, but there’s a lot less of it.

Finding things quickly

IDEs typically have some way of quickly getting to files, classes or methods; in PhpStorm this is Search Everywhere.

How often do you use a function, method or variable and need to remind yourself how it works?

This can be distracting and time consuming. You might forget forgetting which file, or even directory it’s in, it takes time to navigate there and there’s always the chance you mistype or misremember the name when searching.

The PhpStorm equivalent?

No need to perform a search (though you can search for any symbol). It doesn’t matter where in your project the method is (or if you’re dealing with PHP, CSS or javascript), a new tab will open with the right file in the right place.

The reverse is often useful too: if you’re editing a function and want to be sure your changes won’t break anything, highlight it’s name and use Find Usages to get a list of everywhere it’s called, which you can then scroll through and jump to.

Refactoring is heavily automated. It’s trivial to rename variables, merge two statements into one using the ‘inline’ feature, move a selection of code into it’s own method, and so on.

You’ll be shown a summary of affected files and asked for confirmation if there’s a risk changes may cause problems elsewhere in your application.

Documentation and autocomplete

Any good IDE has autocomplete. Yan start typing any of your class, object or method names (which typically get quite long) and you’ll get a dropdown list you can narrow further.

Even if you’ve been editing your own code frequently enough to remember most of it, this is especially helpful when you’re working with other people’s or some third-party plugin where you haven’t got a clue how anything works.

I also use Dash, which is a documentation browser. It’s fully compatible with PhpStorm via a plugin which means I can highlight a function, press shift-cmd-D and Dash will instantly open on the correct page.

This saves valuable time having to use Google or manually typing php.net URLs.[4]

Frequently in PHP you need to use commands to format the date and time, which involves checking a list of format strings for the day of the month etc. The PHP Advanced Autocomplete plugin makes this a lot faster by extending PhpStorm’s autocomplete to include all of them, plus several other commonly used command parameters such as fopen’s file modes.

You can leave notes for yourself without leaving the application - just create a comment with ‘todo’ at the start and it’ll be highlighted in blue (as well as getting it’s own marker in the gutter); as a bonus you can call up a summary of these across the whole project.

PhpStorm can be set to test against mutiple versions of PHP and you will be warned about syntax in later versions that isn’t yet available to you, or which has been deprecated (handy if you occasionally have to develop on a different version of PHP than you have in staging or production.)

Debugging

PhpStorm supports Xdebug; you can make PhpStorm communicate with your browser and insert breakpoints in your code: when the page loads and the breakpoint is reached, PhpStorm will bring itself to the foreground and show the value of all the current variables.

Learning

Every so often with complex software, you need to force yourself to learn new things or refresh features and shortcuts you’ve forgotten. Note taking as you go helps – I recommend NVAlt – but Jetbrains have thought of several good ways to make this come more naturally:

Overall benefits

Reduced cognitive load

The benefit of an IDE should be to remove manual steps that have the potential to distract you from the actual work you’re doing.

Plus it would also be very hard, in Vim for example, to find plugins to do all these things. An IDE frees you up from having to worry about that; the vast majority of features developers need are in the core product and there are community plugins to extend it.

See also:

Writing your code to higher standards

One note of caution…

Go one step at a time. Resist the template to change your entire workflow overnight and don’t try and make your IDE do everything; I still like to use the command line and Sourcetree to handle Git repositories, even though PhpStorm has full support for version control.


I’m a freelance developer. To contact or hire me: william@wturrell.co.uk


  1. All these languages are auto-detected and can be mixed/matched within files.  ↩

  2. You can add extra libraries outside your project if you need PhpStorm to autocomplete certain classes. Likewise you can tell it to ignore files or directories that are irrelevant.
    You can do this for Inspections too; e.g. should Php Mess Detector has trouble parsing a complicated file, you’ll get a dialogue asking if you want to ignore it in future.  ↩

  3. In practice, errors will show up – or clear – a few seconds after you’ve made an edit.  ↩

  4. It’s not a panacea – you’ll still need Google and Stackexchange on a regular basis.  ↩