PhpStorm: PHP CodeSniffer & WordPress Coding Standards

I have just finished setting up PhpStorm 10 with integrated code sniffing for WordPress coding standards. While it’s still fresh in my mind, I’d like to share my experience. It’s not super complicated, but there were some slightly confusing bits. I started following along with Kellen Mace’s video and guide but altered some and possibly can help clarify a few portions. I will be setting this up for use with Varying Vagrant Vagrants so my instructions will be more tailored to the specifics there when it applies.

Getting Started

We can first start by opening up PhpStorm and heading over to Preferences > Languages & Frameworks > PHP where you’ll see a screen like this:

Clicking the ellipses button next to the Interpreter field, will open up a screen for creating a new interpreter. Click the + icon on the top left and choose Remote… and you should see a new dialogue that appears:

There is an option for Vagrant so I’ve taken that route. You’ll be prompted to provide your Vagrant Instance Folder, which is just the directory that contains the web files for your Vagrant install on your local machine. After entering this path, PhpStorm will grab the appropriate data (which can take a minute) and then you can click Ok. At this point, PhpStorm will begin grinding away (taking yet another minute or so) to fill out the appropriate fields. It should look similar to this:

If everything looks good, click Apply / Ok and head back to the first PHP screen and Apply there as well, with your newly set up interpreter selected.

Setup PHP CodeSniffer & WordPress Standards Rulesets

Now, let’s head over to the command line. The first thing we’ll want to do, assuming composer is already installed, is run

					composer global require "squizlabs/php_codesniffer=*"
				

This will install the PHP CodeSniffer to the ~/.composer/vendor/bin/ directory. Visiting it, we should see an alias phpcs. You can verify this is the case by running:

					ls -l
lrwxr-xr-x 1 Jason staff 43 Jan 14 21:44 phpcbf -> ../squizlabs/php_codesniffer/scripts/phpcbf
lrwxr-xr-x 1 Jason staff 42 Jan 14 21:44 phpcs -> ../squizlabs/php_codesniffer/scripts/phpcs
				

At this point, in case you haven’t done so yet, you should have ~./composer/vendor/bin in your path. To do this, very simply run:

					export PATH="$PATH:$HOME/.composer/vendor/bin"
				

Now that we have the CodeSniffer set up, we’ll need to install the WordPress rulesets. These can be installed anywhere but the path should be remembered for the step afterward, which adds the directory to the CodeSniffer configuration.

Installing the rulesets:

Change directory cd into ~/.composer (or wherever you want this installed) and run:

					composer create-project wp-coding-standards/wpcs:dev-master --no-dev
				

Now, you should see a wpcs directory installed with the rulesets inside. Next we’ll need to add this path to the CodeSniffer config. Change back to the directory ~/.composer/vendor/bin and run (remember, replace this path if you didn’t use the same directory above):

					phpcs --config-set installed_paths ~/.composer/wpcs
				

At this point you should be able to go to your Vagrant Instance Folder, go to a root WordPress install and run the following, for example:

					phpcs --standard=WordPress wp-load.php
				

Which should result in an out put that looks something like this:

Wrapping Up

Circling back into PhpStorm, we can now combine the previous efforts so that the IDE will send useful feedback live while coding and even refactor our code on the fly. To get to this final step, open PhpStorm back up and head over to PhpStorm Preferences > Editor > Inspections and drill down to PHP > PHP Code Sniffer validation. Check that box, and if everything was properly set up, you should be able to select a coding standard from the dropdown (hit the refresh button if you don’t see any). Your dialogue should look like this:

I’m using WordPress-VIP, but there are WordPress, WordPress-Core, WordPress-Docs, and WordPress-Extra as well.

After configuring it, click Apply / OK and you should see squiggle-lines (like in a text-editor when spelling or grammar is incorrect). Hovering over these will show you the warnings and errors as you go.

Additionally, if you have your pre-defined style set to WordPress in PhpStorm Preferences > Editor > Code Style > PHP > Set From > Predefined Style > WordPress you can use cmd+option+L to reformat your code to the standard for WordPress. It makes developing a theme or plugin that much easier!

Scanning through WordPress’ own core files shows that they sometimes don’t follow their own standards: