@schablone/eslint-config NPM

ESLint Config

Preconfigured ESLint rules and Prettier formatting for plug and play usage in projects.

For NX projects simply copy over the rules for now.

How to use

Install @schablone/eslint-config with: yarn add @schablone/eslint-config -D or npm install @schablone/eslint-config --save-dev
Install the required peer dependencies if not present: yarn add eslint prettier -D or npm install eslint prettier --save-dev

Use it within your .eslintrc:

{
    "extends": "@schablone/eslint-config"
}

Be aware, that this config is meant to be used with React versions 17 and above, because it turns off the react/react-in-jsx-scope rule

New release

Please note, that any change to the linting rules that produces an error and not just a warning needs to be major release, because it will break dependent code.

Custom rules

These are all the rules which differ from the AirBnB config or the default Prettier settings:

ES Lint

arrow-body-style: Turned off, because we want to keep the option to be explicit
import/prefer-default-export: Default imports are not preferred
import/extensions: Turned off, because it is not necessary with Typescript
no-await-in-loop: It is more common to have dependent calls in a loop than parallelizable calls
no-cond-assign: Turned off to allow assigning in while loops
no-restricted-imports: Make sure all Material UI components are imported directly from core
no-restricted-syntax: for (of) considered fast enough for our use cases, beware for (in) and check object property yourself
no-return-await: Debugging is improved with return await at the cost of an extra microtask
no-useless-constructor: Empty constructor required by some redux implementations
sort-imports: Members in a multiple member import declaration should be sorted alphabetically

React

react/function-component-definition: Set to warn if not an arrow-function
react/react-in-jsx-scope: Turned off, because it is not necessary anymore since React 17
react/require-default-props: Turned off, because it will be deprecated in upcoming React versions anyway (use default parameters instead)

Typescript

@typescript-eslint/consistent-type-imports: Produce a warning if the type imports are not marked as such
@typescript-eslint/explicit-member-accessibility: Require explicit accessibility declaration of all class members
@typescript-eslint/explicit-module-boundary-types: Not necessary because IntelliSense catches this in a sufficient fashion
@typescript-eslint/no-unused-vars: Only produce warnings for unused variables

Prettier

printWidth: Print width is set to 120, instead of 80 for better readability
semi: Semicolons are required
singleQuote: Single quotes are used instead of double quotes in normal code

@schablone/eslint-config v5.1.2