Set up PHPCS and WordPress-Extra coding standards, and configure your IDEs to use them

Using a coding standard in a project across your team is a Good Idea™. It removes back and forth on your favourite version control system around code styling decisions, and generally removes the “but I like this better” arguments, plus the end result of a team will look as if one person wrote it, which also helps whoever is reading the code to comprehend what’s happening.

Set up PHPCS

End result of this should be that phpcs is available as a global command in your terminal.

$ which phpcs
/Users/javorszky/.composer/vendor/bin/phpcs

Easiest method I’ve found is to install it globally with composer. For that you have to have composer available from https://getcomposer.org, and for added niceness, install a composer package called cgr (short for composer global require). Reasons for that in this article.

Once you have composer or cgr, install phpcs with

$ composer global require squizlabs/php_codesniffer
// or
$ cgr squizlabs/php_codesniffer

Double check you have phpcs installed after this with which phpcs. You should get the path to the phpcs executable.

Set up your PATH variable

NOTE: this is only needed if you still don’t have anything for which phpcs. You need to add this to your .zshrc or .bash_profile (or your shell’s own profile file) so it will make terminal look in that folder too:

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

This will add your global composer bin directory to the PATH variable.

Set up coding standards

You can set up any custom coding standards, but let’s focus on the WordPress ones for a moment. Here they are: https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.

Clone the repository to a central place

I chose a directory called wpcs in my user directory:

$ cd ~
$ git clone git@github.com:WordPress-Coding-Standards/WordPress-Coding-Standards.git wpcs

Tell PHPCS about this directory

phpcs will load all the available coding standards from its built in list, and from any directory in its configured installed paths. We need to add the ~/wpcs directory (where we cloned the repository in the previous step) to the installed paths:

$ phpcs --config-set installed_paths /Users/javorszky/wpcs

NOTE: installed paths should always be absolute to guard against headaches.

NOTE2: installed paths is a singular config option, so if you need multiple paths to be included, add them in a comma separated list, like so:

$ phpcs --config-set installed_paths /Users/javorszky/wpcs,/Users/javorszky/some_other_path,etc

Double check that it’s working

$ phpcs -i
The installed coding standards are PEAR, Zend, PSR2, MySource, Squiz, PSR1, PSR12, WordPress-VIP, WordPress, WordPress-Extra, WordPress-Docs and WordPress-Core

The output should look like that. If it does not include the WordPress standards, the installed_paths config option is wrong. You can check what the config is set to with

$ phpcs --config-show
Using config file: /Users/javorszky/.composer/global/squizlabs/php_codesniffer/vendor/squizlabs/php_codesniffer/CodeSniffer.conf

installed_paths: /Users/javorszky/wpcs

Set your editor up

Sublime text

Install the SublimeLinter and SublimeLinter-phpcs packages.

Then open the settings pane for them: Preferences -> Package Settings -> Sublime Linter -> Settings.

I use this config options:

// SublimeLinter Settings - User
{
    "debug": true,
    "linters": {
        "phpcs": {
            "cmd": "/Users/javorszky/.composer/vendor/bin/phpcs",
            "args": [
                "--standard=WordPress-Extra"
            ]
        }
    }
}

The cmd should be the same as you get with which phpcs. The standard used is specified in the args array.

After you restart Sublime text, the next time you open a php file, you should be getting phpcs hints / markers about it.

Visual Studio Code

Install and enable the phpcs extension by Ioannis Kappas (ikappas.phpcs).

In your user settings – CMD+, on Mac or Preferences -> Settings – set these two variables:

{
    ...
    "phpcs.executablePath": "/Users/javorszky/.composer/vendor/bin/phpcs",
    "phpcs.standard": "WordPress-Extra",
    ...
}

Again, the executablePath should be the result of which phpcs.

Restart VSCode, and you should have code standards enabled.

Fin

I don’t use Atom, and rarely use PhpStorm for WordPress related work, hence they are missing. Hopefully the above was useful nonetheless.

Versions of software as of writing the article:

WordPress currently is at 4.9.7
phpcs at 3.3.1
php at 7.1.20 (7.2 available)
Sublime at build 3175
VSCode at 1.25.1
composer at 1.6.3

Photo by Vadim Sherbakov on Unsplash