A few months ago after much frustration of Eclipse lagging and DLTK indexing in progress I decided to make the switch to PHPStorm and have never looked back.
PHPStorm is designed for PHP development, and with a few plugins, provides tight integration with Drupal, Symfony and Twig. It also has built in support for LESS, SASS and many other related technologies. I was a bit reluctant to upgrade to a commercial product at first, but it wasn’t long before I realised the $8.90/mo was worth it.
Before we begin you will need to have a local web server installed. I would suggest using Acquia DevDesktop if you don’t already have a preferred setup. You may also need to ensure that PHP and Composer are available on your PATH variable.
The first step is to download and install the free trial from https://www.jetbrains.com/phpstorm/download/. You can accept all the default settings, and choose to just evaluate the product for now. You’ll then be prompted for some initial configuration preferences.
I’m used to the keyboard shortcuts in Eclipse so I’ll use that for the Keymap scheme. I’m also choosing Darcula for the IDE and Editor colors and fonts because I prefer the darker colour scheme. PHPStorm will now restart.
Install some plugins
Before you continue we need to enable and disable some plugins.Open the Configure menu and click Plugins.
I wanted to keep my configuration lean so I disabled plugins I won’t use, and came up with this list:
- Apache config (.htaccess support)
- Command Line Tool Support
- CSS Support
- Database Tools and SQL
- Drupal Support
- File Watchers (required for SASS/LESS)
- HTML Tools
- LESS support
- Markdown support
- SASS support
- Symfony Plugin
- Twig Support
I chose to leave out Git support as I prefer to use SourceTree for that. Having both programs monitoring for changes is only going to slow things down. You may like to leave some other plugins enabled if you think they’ll be useful for you.
Before restarting there are three other plugins you’ll need for Drupal development that require additional repositories. Click Browse repositories… then search for and install EditorConfig, Symfony and Drupal Symfony Bridge.
Configuring the Editor
Next we need to configure the Editor. Now that Drupal core provides a default .editorconfig file we’ll get some handy defaults, but it’s better to have the defaults set in the IDE in case that file doesn’t exist. Click on Configure, then Settings, then skip down to the Editor section. I won’t explain each setting, and will only mention the changes we’re making.
Editor > General
Strip trailing spaces on Save: All
Ensure line feed at end of file on Save: Checked
Editor > Code Style
Line separator (for new files): Unix and OS X (\n)
Editor > Code Style > PHP
PHPStorm allows us to automatically configure this as per the Drupal coding standards. Make sure the Scheme is set to Project, then click Set from… > Predefined style > Drupal. You should see the Indent change from 4 to 2.
Editor > Code Style > CSS
Choose Set from… > PHP
Editor > Code Style > HTML
Choose Set from… > PHP
Choose Set from… > PHP
Editor > Code Style > Twig
Choose Set from… > PHP
Editor > Code Style > Other File Types
Tab size: 2
Hit OK to save these changes.
To enable some advanced features of PHPStorm like debugging or code sniffing we need to provide one or more PHP Interpreters. This is simply a path to the PHP executable, optionally with some command-line arguments. You may need multiple interpreters if you have multiple versions of PHP.
Head back into the the Settings dialogue and open up Languages & Frameworks > PHP. Set the PHP Language Level to 7 then click the … button next to CLI Interpreter. Hit the green + button and choose the path to your PHP executable. I’m just going to stick with PHP 7, but you can add multiple interpreters if you like.
Enforce Drupal Coding Standards
PHPStorm allows you to configure Inspections to review and validate your code as you go. The defaults are pretty handy and will tell you if you’ve messed up your PHP code, but they will also complain when you don’t describe all the parameters in your Drupal hook implementations. Luckily we can use PHP Code Sniffer (phpcs) with Drupal Coder integration directly in PHPStorm.
There are several ways to install phpcs and this will vary depending on your system and your preferences. See https://github.com/squizlabs/PHP_CodeSniffer#installation for instructions to use PEAR, composer or the phar archive. I’m going to recommend Composer as we’ll be using that a lot for Drupal development.
composer global require "squizlabs/php_codesniffer=*" composer global require "drupal/coder"
Now you need to register the Drupal Coder standards with phpcs. From your composer directory copy vendor/drupal/coder/coder_sniffer/Drupal to vendor/squizlabs/php_codesniffer/CodeSniffer/Standards/Drupal.
If you’re on Windows the path to phpcs will be %APPDATA%\Composer\vendor\bin\phpcs.bat or if you’re on Mac OS or Linux it will be ~/.composer/vendor/bin/phpcs
Head back into the PHPStorm Settings dialog and navigate to Languages & Frameworks > PHP > Code Sniffer. Click the … button and set the PHP Code Sniffer (phpcs) path to one of the paths listed above.
Now navigate to Editor > Inspections. Expand the PHP section and make sure PHP Code Sniffer validation is checked. Over to the right click on the refresh icon next to Coding standard and it should add Drupal to the dropdown list. Now hit OK and we should be ready to go.
If you use Drush, Git or Drupal Console then you (might) love having the Terminal embedded in your IDE. If you’re a Windows user you’ll almost certainly want to use something other Terminal other than Command Prompt. Back in the Settings dialogue open up Tools > Terminal. If you’re using Cygwin, Mingw, Git Bash or similar you may have to figure out the exact batch file to use. This might be a topic for another day, but if use Bash on Ubuntu on Windows you can set this to C:\\Windows\\sysnative\\bash.exe for the ultimate unix based terminal on Windows.
Your first project
It’s now time to create a new project. From the welcome screen select Create new project.
Leave PHP Empty Project selected and set the location to the root directory of one of your Drupal sites.
The PHP Language Level and Interpreter should already be set, but if not you can set them now. Hit Create to continue. Hit OK to the prompt about creating from existing source. You can then choose what to do with the Tip of the Day and acknowledge any other popups.
Now that your project is created you’ll be shown a few handy keyboard shortcuts while your project is indexed for the first time. To be honest I don’t use any of them, but Search Everywhere sounds mighty useful. Before you get any further you might want to rename the project as it will take its name from the Project Root directory, which for me is usually docroot. Once the indexing is complete hit File > Rename Project and give it a meaningful name.
You may see a couple notifications appear in the bottom right corner. They may also have disappeared to the Event Log, in which case you’ll probably see something like this.
You can click on that, or on the green speech bubble icon, to expand the event log. This will also provide some handy links to some sensible actions that can be run automatically. If everything is setup right it should say this:
Detect PSR-0 namespace roots: Do you want to configure namespace roots? It can be done automatically or manually at Settings | Directories.
Click automatically and hit OK to configure this.
It should also say this:
Drupal Support: Looks like it's a Drupal module. Enable Drupal support? Do not ask again.
Click Enable and configure as below replacing the installation path as required.
This provides some very nifty features like hook autocompletion. Let’s try it out to make sure we’ve set everything up correctly. But first there will be a couple more integrations to enable in the Event log:
Drupal Support: Drupal-style formatting can be set for this project. Set it?
Drupal Support: *.theme, *.engine, *.profile, *.install, *.test files are not associated with PHP file type. Fix?
Go ahead and click Set and Fix, then minimise the Event Log.
Open up the project explorer from the top left and navigate to core/modules/action/action.module. Scroll to the bottom of the file and type function action_ ...you’ll see every possible hook that action.module can implement.
Double click one of them and you’ll see how it autocompletes the arguments and the docblock. Nice. You can go ahead and delete that now.
One final configuration I’d like to add to this post is database integration. With your project open go to View > Tool Windows > Database. Then click the green + button and choose Data Source > MySQL.
Before you can configure a database you’ll have to download the missing drivers. There is a link at the bottom to automatically do this.
Once the drivers are installed you can enter the database details and hit OK. You now can also browse your database from your IDE as well, no need for phpMyAdmin.
Congratulations, you're now ready to start working on your Drupal project! There's plenty more to learn about PHPStorm so stay tuned for some follow up posts for more tips and tricks. In the meantime check out some of these resources:
- Drupal Development using PhpStorm
- Drupal Development using PhpStorm (YouTube)
- Transpiling Sass, Less, and SCSS to CSS
- Debugging in PhpStorm