How to setup Wordpress coding standard rules in VS Code
Tags: wordpress, coding, vscode, wsl2
Published: 2022-02-18 08:41:12

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](https://staxwp.com/), 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)](https://github.com/WordPress/WordPress-Coding-Standards) 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](https://marketplace.visualstudio.com/items?itemName=ValeryanM.vscode-phpsab) 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:

![formatting demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bo6p5hiv6cppe3lqvlvh.gif)

That's it! Enjoy.

#### Support & follow me
| [![Buy me a coffee](https://img.shields.io/badge/Buy_Me_A_Coffee-FFDD00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black)](https://www.buymeacoffee.com/geowrgetudor) | [![Twitter](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/geowrgetudor) | [![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/geowrgetudor) | [![Linkedin](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com/in/geowrgetudor) |
| ------------- | ------------- | ------------- | ------------- |