resources

Best practices, tools, and processes we follow in ColoredCow.

View the Project on GitHub ColoredCow/resources

Set up WordPress Coding Standards in VS Code.

This document covers how to setup PHP Code Sniffer to sniff WordPress coding standards in VS Code for Windows and Mac OS.

Windows

Installation Requirements

  1. Visual Studio Code (Prerequisite)
  2. PHP
  3. Composer

Installing PHPCodesniffer globally

  1. Open Terminal and move to directory where composer is installed i.e. C:\Users\username\AppData\Roaming\Composer.
  2. Install php_codesniffer package by running composer require squizlabs/php_codesniffer on your composer directory.
  3. Add C:\Users\username\AppData\Roaming\Composer\vendor\squizlabs\php_codesniffer\bin to your environment variables PATH.
  4. Once install, verify the installation by running phpcs --version on the terminal.

Installing WPCS globally

  1. Install wpcs package by running composer require wp-coding-standards/wpcs on your composer directory.

Installing PHPCompatibility globally

  1. Move to the vendor directory in your composer directory and clone PHPCompatibility package by running git clone https://github.com/wimg/PHPCompatibility.git.
  1. Move to the composer directory and link wpcs and phpcompatibility standards with phpcs by running phpcs --config-set installed_paths C:\Users\username\AppData\Roaming\Composer\vendor\PHPCompatibility,C:\Users\username\AppData\Roaming\Composer\vendor\wp-coding-standards\wpcs.
  2. Verify linking by running phpcs -i.

Installing extensions for VS Code Editor

  1. Install phpcs extension.
  2. Install phpcbf extension.

Configure the settings for VS Code

  1. Open settings.json and add following lines to it:
     "phpcs.enable": true,
     "phpcs.executablePath": "C:\\Users\\username\\AppData\\Roaming\\Composer\\vendor\\bin\\phpcs.bat",
     "phpcs.standard": "WordPress",
     "phpcbf.enable": true,
     "phpcbf.documentFormattingProvider": true,
     "phpcbf.onsave": true,
     "phpcbf.executablePath": "C:\\Users\\username\\AppData\\Roaming\\Composer\\vendor\\bin\\phpcbf.bat",
     "phpcbf.standard": "WordPress",
     "[php]": {
         "editor.defaultFormatter": "persoderlind.vscode-phpcbf"
     }
    

Mac OS

Installation Requirements

  1. Visual Studio Code (Prerequisite)
  2. PHP
  3. Composer

Installing PHPCodesniffer globally

  1. Install phpcs globally
    composer global require "squizlabs/php_codesniffer=*"
    

Installing WPCS globally

  1. Install wpcs package by github
    git clone -b master https://github.com/WordPress/WordPress-Coding-Standards.git wpcs
    
  1. Move to the composer directory and link wpcs and phpcompatibility standards with phpcs by running
    /path/to/composer/vendor/bin/phpcs --config-set installed_paths /path/to/WPCS, /path/to/another-standards
    

    Note:

  2. In the place of /path/to/composer/vendor/bin/phpcs add the path of composer located in your system.

  3. In the place of /path/to/WPCS add the path where wpcs is stored.

Verifing the PHP-CS and WPCS is linked

  1. Verify linking by running
    /path/to/composer/vendor/bin/phpcs -i
    

    OUTPUT:

The installed coding standards are PEAR, Zend, PSR2, MySource, Squiz, PSR1, PSR12, WordPress, WordPress-Extra, WordPress-Docs and WordPress-Core.

Installing extensions for VS Code Editor

  1. Install phpcs extension.
  2. Install phpcbf extension.

Configure the settings for VS Code

  1. Open settings.json and add following lines to it:
     "phpcs.enable": true,
     "phpcs.executablePath": "/path/to/composer/vendor/bin/phpcs",
     "phpcs.standard": "WordPress"
     "phpcbf.enable": true,
     "phpcbf.documentFormattingProvider": true,
     "phpcbf.onsave": true,
     "phpcbf.executablePath": "/path/to/composer/vendor/bin/phpcbf",
     "phpcbf.standard": "WordPress",
     "[php]": {
         "editor.defaultFormatter": "persoderlind.vscode-phpcbf"
     }
    
  2. Restart the VS Code.