Code
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
<?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>
<exclude-pattern>node_modules</exclude-pattern>
<exclude-pattern>vendor</exclude-pattern>
<exclude-pattern>tests</exclude-pattern>
</ruleset>
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.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: [
'eslint:recommended',
'airbnb',
'prettier',
'prettier/react',
'plugin:jsx-a11y/recommended',
'plugin:import/errors',
'plugin:import/warnings',
'plugin:jest/recommended',
'plugin:react/recommended',
],
rules: {
'comma-dangle': [
2,
{
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': [
'error',
'as-needed',
{ 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 https://github.com/ColbyCommunications/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.
Last modified 2yr ago