Skip to content
This repository has been archived by the owner on Jun 25, 2020. It is now read-only.

Installation

Jump to bottom
Greg Rickaby edited this page Sep 18, 2019 · 41 revisions

Introduction

At WebDevStudios, you are required to lint code in your code editor using the WDS Coding Standards (which are based on the WordPress Coding Standards). Our CI pipeline also lints your code at build time, so if your code wasn't linted in your editor? It will fail, and you'll have to go back through and check your work.

There are a couple of resources available to help you get started, including a comprehensive blog post and a YouTube playlist which walks you through the process of installing Coding Standards.

If you get stuck, feel free to reach out to either Aubrey Portwood or Greg Rickaby.

Prerequisite

You'll need to have Composer installed. Composer is a PHP package manager, and will clone our coding standards. If you're on a Mac and have Homebrew it's as easy as: brew install composer. Otherwise, follow the official instructions.

Installation Instructions

1) Get WDS Coding Standards

In your terminal:

composer global require "webdevstudios/wds-coding-standards"

Note: globally-installed Composer packages are stored in your home directory under: ~/.composer/vendor

2) Register our standards with PHPCS:

cd ~/.composer/vendor && phpcs --config-set installed_paths ${PWD}/wp-coding-standards/wpcs,${PWD}/webdevstudios/wds-coding-standards/WebDevStudios

If you get an error, you may need to add Composer's vendor/bin to your PATH:

###.bashrc or .zshrc file

export PATH=$PATH:$HOME/.composer/vendor/bin

3) Verify the global PHPCS standards

phpcs -i

You should see both the WDS Coding Standards a WordPress Coding Standards:

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

4) Install the ESLint ruleset:

npm install -g "~/.composer/vendor/webdevstudios/wds-coding-standards/WebDevStudios/eslint-plugin-webdevstudios"

5) Configure Your Code Editor/IDE

VSCode

PHPCS

  • Install the PHPCS Extension
  • Add this line to your user settings: "phpcs.standard": "WebDevStudios"

ESLint

Sublime Text

PHPCS

  • Install the PHPCS package
  • Add these lines to phpcs.sublime-settings:
"phpcs_additional_args": {
        "--standard": "WebDevStudios",
        "-n": ""
},

If you want to use composer's phpcs version, add e.g.:

ESLint

PhpStorm/WebStorm/IntelliJ

PHCS

  • Enable PHP Code Sniffer Validation
  • Choose "WebDevStudios" from the dropdown
  • Click "Apply"

screenshot

ESLint

vim

vim has several methods of adding PHPCS support. These instructions will apply to using vim-phpqa, however there are alternatives like Syntastic and Neomake (for Neovim) if you prefer. Talk to zachother if you want some guidance with either of those. Also note that phpqa should work fine with Neovim as well as vanilla vim.

Installation

Install vim-phpqa - the easiest way is if you have Vundle or vim-plug; in your .vimrc (or init.vim):

" Vundle
Plugin 'joonty/vim-phpqa'

" vim-plug
Plug 'joonty/vim-phpqa'

Note: The phpqa README suggests using Bundle 'joony/vim-phpqa', however, when I was working on this with Ben we needed to use Plugin instead for Vundle, YMMV.

Then, source your config file and run the plugin installer:

:source %
:PluginInstall // Vundle
:PlugInstall // vim-plug
Configuration

Next you need to configure PHPQA. In your vim configuration file:

let g:phpqa_php_cmd='/path/to/phpcs'
let g:phpqa_codesniffer_args = '--standard=WebDevStudios'

Now, open a php file and try it out:

:Phpcs

If it works, and your PHP file has issues, you should see the location window open with errors from phpcs. If you don't see the location window, there's a chance something has gone wrong. To see the error output, manually open the location window with :lopen.

Once it's all working, you should be able to add this to your vim config

let g:phpqa_codesniffer_autorun = 1

to automatically run PHPCS on write, however, when testing this with Ben PHPCS was not running automatically. If you have this issue, you can create an autocommand to do PHPCS for you:

autocmd BufWritePost *.php Phpcs

Stand Alone

Using git, you would clone the WDS Coding Standards and WordPress Coding Standards repositories into a directory of our choice, e.g. ~/Utilities on your local machine. Then, point PHPCS at those directories...

Later, install ESLint and SassLint

Update WDS Coding Standards

composer global update

and you should see something like:

./aubreypwd  〉〉〉$ composer global update
Changed current directory to /Users/aubreypwd/.composer
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 0 installs, 3 updates, 0 removals
  - Updating squizlabs/php_codesniffer (x.x.x => x.x.x): Downloading (100%)
  - Updating wp-coding-standards/wpcs (x.x.x => x.x.x): Downloading (100%)
  - Updating webdevstudios/wds-coding-standards (x.x.x => x.x.x): Downloading (100%)
Writing lock file
Generating autoload files
Clone this wiki locally