Published on Jun 26, 2020

WordPress Coding Standards in VSCode

Sridhar Katakam

This is a notes/summary of how I implemented the steps on https://www.edmundcwm.com/setting-up-wordpress-coding-standards-in-vs-code/ for setting up WordPress coding standards in Visual Studio Code.

(Tested in a Mac)

  1. (Not compulsory) In the terminal go to root by typing:

cd ~

  1. Install Composer.
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === 'e0012edf3e80b6978849f5eff0d4b4e4c79ff1609dd1e613307e16318854d24ae64f26d17af3ef0bf7cfb710ca74755a') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

(copy and paste all the above commands at once)

https://getcomposer.org/download/

  1. Move  composer.phar  to a directory that is in your path.
mv composer.phar /usr/local/bin/composer

https://getcomposer.org/doc/00-intro.md#globally

  1. Install PHP CodeSniffer (PHPCS).
composer global require "squizlabs/php_codesniffer=*"

This will get installed as ~/.composer/vendor/bin/phpcs .

  1. Create a directory named say,  Utilities  and go inside it.
mkdir Utilities
cd Utilities
  1. Download WPCS.
git clone -b master https://github.com/WordPress/WordPress-Coding-Standards.git wpcs

This will download WPCS into a folder called wpcs .

i.e., at ~/Utilities/wpcs .

  1. Add WPCS to PHPCS.
~/.composer/vendor/bin/phpcs --config-set installed_paths ~/Utilities/wpcs
  1. Check to ensure WPCS is added.
~/.composer/vendor/bin/phpcs -i
  1. Install phpcs and phpcbf extensions in VSCode.
  2. Bring up VSCode settings. Click on “Open Settings (JSON)” icon near the top right.

Add these:

"phpcs.enable": true,
"phpcs.executablePath": "/Users/sridharkatakam/.composer/vendor/bin/phpcs",
"phpcs.standard": "WordPress",
"phpcbf.enable": true,
"phpcbf.documentFormattingProvider": true,
"phpcbf.onsave": true,
"phpcbf.executablePath": "/Users/sridharkatakam/.composer/vendor/bin/phpcbf",
"phpcbf.standard": "WordPress"

Note:  ~  does not work here and will be treated as relative to the current open folder. So you need to use the actual path to your home directory like  /Users/sridharkatakam .

  1. Restart VSCode.
tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-down