@kitstigator/eslint-config-functional NPM

eslint-config-functional

An ESLint configuration library for projects based on React 18+ with Typescript 5+.

Disclaimer

This is an exhaustive and opinionated ESLint config that enforces consistent usage of ES6 & strict Typescript non-OOP paradigms. It encourages adherence to best practices and restricts certain language features that are prone to anti-patterns.

Notable linting rules include:

class declarations are disallowed (encouraging the use of pure functions)
default exports are disallowed (named exports keep imports consistent)
interface declarations are disallowed (avoids declaration merging - use type instead)
enum declarations are disallowed (use string unions instead)
Object keys, union types, imports and component props are sorted alphabetically

Installation

First, install this package alongside eslint:

npm install -D @kitstigator/eslint-config-functional eslint

Next, create the .eslintrc.json configuration file at the root of your project:

{
  "extends": "@kitstigator/eslint-config-functional",
}

Remember to set here any ignorePatterns if you require them beyond the standard build and dist folders, along with any other config overrides.

Usage

Once installed, you can run any eslint command.

You may also define scripts that will lint, fix and format your files to help automate your workflow.

For example, in your package.json, add the following under scripts:

"scripts": {
  "lint-code": "eslint --fix --ext .ts,.tsx .",
}

IDE setup

VS Code

If you use Microsoft VS Code, you can add the following snippet at the top of your .vscode/settings.json to automatically run eslint and fix all issues whenever a file is saved.

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

License

This work is licensed under the GNU General Public License version 3.