Below you'll find guidelines and configurations for how to write consistent code when developing for Colby. It is important that our code is easily readable and predictable to facilitate collaboration

PHP Code


We use PHPCS library for PHP linting. Our common ruleset can be found below:
<?xml version="1.0"?>
<ruleset name="colby-plugin">
<config name="ignore_warnings_on_exit" value="1"/>
<config name="show_progress" value="1"/>
<config name="colors" value="1"/>
<rule ref="WordPress"></rule>
<rule ref="WordPress-VIP-Go"></rule>


We use PHPCBF to format PHP code. In a package that has colby-package as a dependency, you can run npm run format to format both PHP and JS.

Javascript Code


Currently, we are a React preferred shop. Except for certain types of use cases, React more than fits our needs for javascript work and UI building.


We have a ESLint ruleset for Colby's JS code. The ruleset is as follows.
module.exports = {
parser: 'babel-eslint',
parserOptions: {
ecmaVersion: 6,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
modules: true,
experimentalObjectRestSpread: true,
extends: [
rules: {
'comma-dangle': [
arrays: 'always-multiline',
objects: 'always-multiline',
imports: 'always-multiline',
exports: 'always-multiline',
functions: 'ignore',
'react/jsx-uses-vars': 1,
'react/jsx-indent': ['error', 4],
'react/jsx-indent-props': ['error', 4],
'react/display-name': 1,
quotes: ['error', 'single'],
'jsx-quotes': ['error', 'prefer-double'],
'no-unused-vars': 'warn',
'no-console': ['error', { allow: ['warn', 'error', 'info'] }],
'no-unexpected-multiline': 'warn',
'arrow-body-style': [
{ requireReturnForObjectLiteral: true },
'react/prefer-stateless-function': 0,
'import/extensions': 'ignorePackages',
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
'no-undef': 0,
'no-plusplus': 0,
For convenience we've combined all linting rules into a single package, colby-eslint


We use prettier to help format our code when developing, as well as in an automated process run before the code reaches git. Here is our prettierConfig file:
module.exports = {
printWidth: 100,
tabWidth: 4,
singleQuote: true,
trailingComma: 'es5',
Note: It is helpful to have the same prettier config in your editor as we have in the automated process. If you want to see how to configure your editor, see Editor section.