How to setup Wordpress coding standard rules in VS Code

I see a lot of code that's not following any standards. Especially in the Wordpress community.

I don't hate it because it does the job done, but if you try to debug it or understand it you're gonna have a bad time. Unreadable code is awful.

We, at StaxWP, always use Wordpress coding standards in our themes and plugins. It's easy to implement it, let me show you.

What coding standard does Wordpress follow?

Wordpress follows Pear coding standards but with some twists. There are some characteristics that are present only in Wordpress.

Here are some examples:

// Spatiate
$x = $foo[ $bar ]; // correct
$x = $foo[$bar]; // incorrect

// Yoda conditions
$x = 2 === $i; // correct
$x = $i === 2; // incorrect

So what do we do to fix these things automatically?

We use WordPress Coding Standards for PHP_CodeSniffer (WPCS) which uses Squizlabs' PHP codesniffer (phpcs) and beautifier & fixer (phpcbf) under the hood to scan and format the code.

You can install WPCS globally or inside a project. I like to use it globally inside Ubuntu WSL2, but this guide will work for any setup. First we need to clone the repository in some location. I've picked the home directory:

git clone git@github.com:WordPress/WordPress-Coding-Standards.git

Install the dependencies:

cd WordPress-Coding-Standards
composer install

Now we have phpcs and phpcbf installed in vendor/squizlabs/php_codesniffer/bin and we can use them in VS Code.

For VS Code we're using the PHP Sniffer & Beautifier extension. We just need to install it, add the paths to phpcs and phpcbf and tell it what coding standards to use.

After we've installed it, we go ahead and press Ctrl/Cmd + Shift + P inside VS Code and search for settings.json. There will be 4 different files with the same name:

• Workspace Settings: referring to the current project's settings
• Remote Settings: referring to the user's settings but inside WSL/Docker
• Settings: referring to the user's settings on current machine
• Default Settings: containing the default settings (we don't want to touch these)

Depending on your setup you will want to set these coding standards per user or per workspace. I suggest you set them per user and overwrite them per workspace whenever you have to.

So were going to open the user's settings and add the following lines:

"files.autoSave": "onWindowChange",
"editor.linkedEditing": true,
"editor.tabSize": 4,
"editor.detectIndentation": false,
"editor.formatOnSave": true,
"window.title": "${activeEditorLong}${separator}${rootName}",
"phpsab.standard": "WordPress",
"phpsab.snifferEnable": true, // disable this if you don't need suggestions
"phpsab.executablePathCBF": "{PATH}/WordPress-Coding-Standards/vendor/squizlabs/php_codesniffer/bin/phpcbf",
"phpsab.executablePathCS": "{PATH}/WordPress-Coding-Standards/vendor/squizlabs/php_codesniffer/bin/phpcs",
"phpsab.snifferShowSources": true

Make sure to replace {PATH} with the correct path to your WordPress-Coding-Standards folder. Also, if you are on Windows and you don't use WSL2, you will need to refer to phpcbf.bat and phpcs.bat.

Now we are pretty much set. Everytime we need some other coding standard we can overwrite it in our current workspace by adding phpsab.standard and specifying the standard.

Here's a short example of what will happen everytime you will have some badly formatted:

That's it! Enjoy.

Support & follow me