How to set up WordPress Coding Standards in Visual Studio Code

Posted on by
5/5 - (212 votes)

I am slowly moving away from Sublime Text to Microsoft’s Visual Studio Code due to VS Code’s superior feature-set like a built-in file navigation tree (which is better than ST’s SideBarEnhancements package), IntelliSense and built-in Git.

Below are the steps to have VS Code automatically sniff and display warnings/errors (if any) in your PHP files per WordPress Coding Standards.

Step 1

Install Composer globally.

Step 2

In the system terminal (navigate to your home directory, if you are elsewhere) run

composer create-project wp-coding-standards/wpcs --no-dev

Running this command will

  1. install WordPress standards into ~/wpcs directory.
  2. install PHP_CodeSniffer.
  3. register WordPress standards in PHP_CodeSniffer configuration.
  4. make phpcs command available from ~/wpcs/vendor/bin.

Step 3

Mac

Run

ln -s ~/wpcs/vendor/bin/phpcs /usr/local/bin/phpcs

This will create /usr/local/bin/phpcs as an alias or symbolic link to ~/wpcs/vendor/bin/phpcs where ~ is your home directory (Ex.: /Users/sridharkatakam).

Windows

Go to Control Panel. Search for path and click on “Edit the system environment variables”.

Click on “Environment Variables…” in the System Properties’ Advanced tab.

In the bottom “System variables” section, select Path and click Edit.

Add a new entry having this path:

C:\Users\Admin\wpcs\vendor\bin

where Admin is your current admin-level username.

Step 4

In VS Code, go to Extensions, search for phpcs and install it.

Bring up your user settings by pressing ⌘, and add

"phpcs.standard": "WordPress"

Step 5

Restart VS Code.

That’s it.

Note:

  • To check the value of $PATH environment in a terminal run echo $PATH.
  • To add a directory to $PATH, run open ~/.bash_profile. Then in the text editor add export PATH="/Users/sridharkatakam/wpcs/vendor/bin:$PATH" where /Users/sridharkatakam/wpcs/vendor/bin is the directory whose path is to be added.