@beyondessential/eslint-config-ts

@beyondessential/eslint-config-ts

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

This package defines Beyond Essential System's style guide for TypeScript/React.js projects. It extends our JavaScript/React.js style guide, with additional TypeScript-specific rules.

Installation

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

Usage

You need to extend this package in your ESLint configuration:

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

⚠️ If you use a TS configuration file other than the default (tsconfig.json under the project's root), you need to specify its path:

{
  "parserOptions": {
    "project": "ts/tsconfig.dev.json"
  }
}

⚠️ If you get the following error:

Configuration for rule "@typescript-eslint/indent" is invalid

it is a known eslint-config-airbnb-typescript issue, see that link for possible solutions.

Maintenance

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

Publishing

• Checkout the latest code: git fetch && git checkout master
• Commit your changes in a new branch
• ⚠️ Don't forget to also update the package version: npm version # < patch || minor || major >
• 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

Style guide

This style guide is a combination of:

• The Typescript port of the Airbnb Style Guide. with some changes
• The recommended rules from @typescript-eslint/eslint-plugin, with some changes

Changes

Rule	Airbnb	BES	Comment
@typescript-eslint/explicit-function-return-type	error	off	TypeScript can accurately infer return types. Explicit return types should be used only when they use a project-specific type which is not inferred automatically
@typescript-eslint/explicit-module-boundary-types	error	off	Similarly to @typescript-eslint/explicit-function-return-type
@typescript-eslint/no-use-before-define	error	off
@typescript-eslint/comma-dangle	error	off	Prettier and eslint seem to have conflicting errors on when to apply this rule, so disabling eslint in favor of prettier
@typescript-eslint/no-empty-interface	error	Allow single extends	In some circumstances it can be useful to define a type that extends a single generic interface with concrete types
@typescript-eslint/lines-between-class-members	error	off	This rule leads to extraneously long classes in some cases. Prefer to leave it up to developer discretion
@typescript-eslint/explicit-member-accessibility	off	Require explicit access	Enforcing explicit accessibility modifiers helps encourage better encapsulation practices
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
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"
}