@beyondessential/eslint-config-js

JavaScript/React.js style guide as as shareable ESLint configuration

This package defines Beyond Essential System's style guide for JavaScript/React.js projects. It extends the Airbnb Style Guide, with some tweaks and additions.

Installation

Install the package and its required peer dependencies:

yarn add -D @beyondessential/eslint-config-ts eslint prettier

Usage

You need to extend this package in your ESLint configuration:

{
  "extends": "@beyondessential/js"
}

Maintenance

Please be mindful of this package's twin sibling, @beyondessential/eslint-config-js: you may want to reflect any common rule/dependency updates in that package too.

Publishing

1. Checkout the latest code: git fetch && git checkout master
2. Commit your changes in a new branch
3. ⚠️ Don't forget to also update the package version: npm version # < patch || minor || major >
4. Create a pull request against master

After your PR is approved and merged:

git fetch && git checkout master && git pull
npm login
npm publish --access public

You may want to create a pull request against

Style guide

We use the Airbnb Style Guide, with some changes and additions.

Changes

Rule	Airbnb	BES	Comment
class-methods-use-this	error	off	This rule was made to encourage the usage of static methods where possible. However, there are valid reasons to not use a static method, even if this is not required (eg testability, inheritance, using functionality via the instance rather than the class).
import/order	error	warn
import/prefer-default-export	error	off
no-await-in-loop	error	off	This is a common syntax for async operations that must be performed serially.
no-continue	error	off	In most cases it is preferable to break our functions into smaller ones than use continue. However, sometimes it serves as a compromise between performance and readability. Also, it is useful in refactoring big functions in legacy code.
no-plusplus	error	off	A standard in for loops, which we allow.
no-prototype-builtins	error	off
no-restricted-globals	error	off
no-restricted-syntax	Restrict for...of loops	Allow for...of loops
no-use-before-define	error	off
radix	error	off	In the vast majority of the cases we just use the default radix of 10. There is one case where this rule would be useful: array.map(parseInt), where radix will be wrongly set to the array index of each iteration. Unfortunately this rule's implementation does not cover this scenario.
react/forbid-prop-types	Forbid array, object	Allow array, object
react/jsx-filename-extension	Allow only .jsx	off
react/jsx-one-expression-per-line	['error', { allow: 'single-child' }]	off
react/jsx-props-no-spreading	error	off
react/no-did-update-set-state	error	off

Additions

Enforce prettier formatting

Rule: prettier/prettier: error Configuration:

{
  "arrowParens": "avoid",
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "all"
}