@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"
}