README
@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 |
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
prettier formatting
EnforceRule: prettier/prettier: error
Configuration:
{
"arrowParens": "avoid",
"printWidth": 100,
"singleQuote": true,
"trailingComma": "all"
}