# @beyondessential/eslint-config-js

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

This package defines [Beyond Essential System](https://beyondessential.com.au/)'s style guide for JavaScript/React.js projects. It extends the [Airbnb Style Guide](https://github.com/airbnb/javascript), with some tweaks and additions.

## Installation

Install the package and its required peer dependencies:

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

## Usage

You need to extend this package in your [ESLint configuration](https://eslint.org/docs/user-guide/configuring):

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

## Maintenance

Please be mindful of this package's twin sibling, [@beyondessential/eslint-config-js](packages/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:

```sh
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](https://github.com/airbnb/javascript), with some changes and additions.

### Changes

| Rule                                                                                                                                        | Airbnb                               | BES                     | Comment                                                                                                                                                                                                                                                                                           |
| ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [class-methods-use-this](https://eslint.org/docs/rules/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](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/order.md)                                           | error                                | warn                    |                                                                                                                                                                                                                                                                                                   |
| [import/prefer-default-export](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/prefer-default-export.md)           | error                                | off                     |                                                                                                                                                                                                                                                                                                   |
| [no-await-in-loop](https://eslint.org/docs/rules/no-await-in-loop)                                                                          | error                                | off                     | This is a common syntax for async operations that must be performed serially.                                                                                                                                                                                                                     |
| [no-continue](https://eslint.org/docs/rules/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](https://eslint.org/docs/rules/no-plusplus)                                                                                    | error                                | off                     | A standard in `for` loops, which we allow.                                                                                                                                                                                                                                                        |
| [no-prototype-builtins](https://eslint.org/docs/rules/no-prototype-builtins)                                                                | error                                | off                     |                                                                                                                                                                                                                                                                                                   |
| [no-restricted-globals](https://eslint.org/docs/rules/no-restricted-globals)                                                                | error                                | off                     |                                                                                                                                                                                                                                                                                                   |
| [no-restricted-syntax](https://eslint.org/docs/rules/no-restricted-syntax)                                                                  | Restrict `for...of` loops            | Allow `for...of` loops  |                                                                                                                                                                                                                                                                                                   |
| [no-use-before-define](https://eslint.org/docs/rules/no-use-before-define)                                                                  | error                                | off                     |                                                                                                                                                                                                                                                                                                   |
| [radix](https://eslint.org/docs/rules/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](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/forbid-prop-types.md)                     | Forbid `array`, `object`             | Allow `array`, `object` |                                                                                                                                                                                                                                                                                                   |
| [react/jsx-filename-extension](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md)           | Allow only .jsx                      | off                     |                                                                                                                                                                                                                                                                                                   |
| [react/jsx-one-expression-per-line](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-one-expression-per-line.md) | ['error', { allow: 'single-child' }] | off                     |                                                                                                                                                                                                                                                                                                   |
| [react/jsx-props-no-spreading](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md)           | error                                | off                     |                                                                                                                                                                                                                                                                                                   |
| [react/no-did-update-set-state](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-update-set-state.md)         | error                                | off                     |                                                                                                                                                                                                                                                                                                   |

### Additions

#### Enforce [prettier](https://prettier.io/) formatting

Rule: `prettier/prettier: error`
Configuration:

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