Setting up WordPress Coding Standards for your Site, Theme, or Plugin using VS Code

So why coding standards? Simply it makes your code easier to read and more maintainable. Especially as you work on multiple projects and more importantly, as multiple people work on the same project.

Luckily, WordPress is awesome and provides us coding standards that can be installed globally or per project. I personally prefer per project so that everyone working on a project is on the same codebase, using the same tools, and getting up and running is as simple as a:

composer install

The rest of this post will focus on setting up VS Code to use these coding standards for any WordPress site, theme, or plugin. I’ll assume you already have composer installed either globally or in your project and that you’re using VS Code.

First things first

Install the vscode-phpcs extension for VS Code. This will allow VS Code to interface with phpcs which is needed to lint your php WordPress files. Navigate to the Extensions tab of VS Code, search for the vscode-phpcs extension and click install.

PHPCS, aka PHP CodeSniffer lints your php files as you code based on various standards that you set. We’re going to use the WordPress standard.

Install the WordPress PHP Coding Standards

In a nutshell, we can install the WordPress PHP Coding Standards using composer, use another package to automatically set them up for use, and last tell VS Code to use them in our project.

Run the following composer commands to install the following packages into your project.

composer require --dev squizlabs/php_codesniffer

This will install phpcs (binary needed to lint your WordPress). We’ll reference it later in Workspace settings for VS Code. The phpcs binary is installed into the vendor/bin folder in your project. Run the following command to make sure it’s working.

vendor/bin/phpcs --version

After you’ve verified the install, run the following composer commands.

composer require --dev wp-coding-standards/wpcs
composer require --dev dealerdirect/phpcodesniffer-composer-installer

This will do two things. The first package will install the coding standards and the second package will automatically link the standards to phpcs.

Last, but no least

Setup VS Code to use phpcs and the coding standards. Add the following to your workspace settings. Create the following file in your project if it doesn’t exist already.

.vscode/settings.json

And then add the following settings. Enable phpcs, set the executable path, and then set the WordPress coding standard. To learn about other standards visit the README for PHP_CodeSniffer.

{
  "phpcs.enable": true,
  "phpcs.executablePath": "./vendor/bin/phpcs",
  "phpcs.standard": "WordPress"
}

Finishing Up

Now code away. Open up VS Code, start working on a PHP file in your project you’ll receive visual feedback as you edit. I’ve added a screenshot below so you can see what happens when phpcs detects an error in your file. Shift+Command+m will open up the problems pane or you can open it from under the view menu.