Much has changed since my last article on how to get WPCS up and running in VS Code, the most notable being the release of WPCS 3.0 which makes it easier to register new coding standards; I’ve also recently switched to using the PHP Sniffer & Beautifier VS Code extension which is a nice replacement for the two extensions in my previous guide.
Let’s get started!
Prerequisites
Install WPCS
Run the following command in your project root:
composer require --dev wp-coding-standards/wpcs:"^3.0"When the following prompt appears, type y and enter
Do you trust "dealerdirect/phpcodesniffer-composer-installer" to execute code and wish to enable it now? (writes "allow-plugins" to composer.json) [y,n,d,?]This will install the PHPCS Composer installer plugin which searches for coding standards in our currently installed Composer packages and registers them automatically; no need for manual configuration anymore 🎉
Once that is done, check to confirm that the WordPress coding standards have been installed correctly by running the following command in your project root:
vendor/bin/phpcs -i
The installed coding standards are MySource, PEAR, PSR1, PSR2, PSR12, Squiz, Zend, Modernize, NormalizedArrays, Universal, PHPCSUtils, WordPress, WordPress-Core, WordPress-Docs and WordPress-Extra
(Read more about the various WordPress rulesets here.)
Install PHPCompatibilityWP
The PHPCompatibilityWP ruleset, which is based on PHPCompatibility allows for PHP cross-version compatibility checks within the context of WordPress (read more here).
composer require --dev phpcompatibility/phpcompatibility-wp:"*"We should now see a couple of new standards added to our configuration:
/vendor/bin/phpcs -i
The installed coding standards are MySource, PEAR, PSR1, PSR2, PSR12, Squiz, Zend, PHPCompatibility, PHPCompatibilityParagonieRandomCompat, PHPCompatibilityParagonieSodiumCompat, PHPCompatibilityWP, Modernize, NormalizedArrays, Universal, PHPCSUtils, WordPress, WordPress-Core, WordPress-Docs and WordPress-ExtraConfigure VS Code
Over in VS Code, install the PHP Sniffer & Beautifier (Samuel Hilson) extension. As the name suggests, this extension handles both the sniffing and formatting. Pretty neat!
This extension works pretty much out of the box. One nice addition is to enable formatting on save. This can be done by adding the following to your VS Code’s settings.json:
"[php]": {
"editor.defaultFormatter": "valeryanm.vscode-phpsab",
"editor.formatOnSave": true,
}Next, we want to configure this extension to use the WordPress coding standard by adding the following to the settings.json:
"phpsab.standard": "WordPress"Feel free to replace “WordPress” with any of the standards you’ve installed. For more flexibility, I’d suggest creating an XML ruleset file and list all the standards you want to support. Here’s an example of one I often use.
The PHPCS extension has a setting that automatically searches for any .phpcs.xml, .phpcs.xml.dist, phpcs.xml, phpcs.xml.dist, phpcs.ruleset.xml or ruleset.xml file to use as the configuration. This setting – phpsab.autoRulesetSearch – is enabled by default so we just need to ensure our custom ruleset is named appropriately and placed in the project root. If no configuration file is found then the extension will fallback to the standard set in the phpsab.standard setting.
🚀
Now for the fun part. Let’s see if everything comes together nicely.
In the above demo, our initial code violated the following rules:
- Missing file doc
- Missing doc comment for function
- No spacing inside parenthesis
- Not using Yoda conditions
- Not escaping output
Since we’ve enabled formatting on save, VSCode should auto fix some issues when we save the file (in our e.g., it fixed #3). If, for some strange reason, the auto save fails to work, try right click > Format Document or ⌘(alt) + shift + F.
As for the other issues, we can mouse over the underlined code to get more information and then fix them manually.
🎉
And that’s it! Hopefully this has been helpful. Happy coding!