eslint-config-fido

Shared ESLint configs for Typescript & React projects.

Table of Contents

- Installation
- Usage
- Exported Configurations
- CLI Usage
- Customizing Prettier
- Custom Rules
- Philosophy

Installation

``sh
yarn add --dev @fido.id/eslint-config-fido
`

You will also need to install eslint and prettier:

`sh
yarn add --dev eslint prettier
`




Usage

$3

This package exports two main configurations:

- recommended: Base rules for all TypeScript projects (no React/JSX-specific rules).
- react: Extends the base config with additional rules for React/JSX projects.

$3

`js
const fido = require("@fido.id/eslint-config-fido");
module.exports = [
// For TypeScript projects:
...fido.configs.recommended,
// For React/JSX projects, use:
// ...fido.configs.react,
{
rules: {
// your custom rules here
},
},
];
`

CLI Usage

This package provides a CLI for running tests, linting, and installing dependencies:

- ./cli start — Install all project dependencies inside a Docker container.
- ./cli tests — Run all tests.
- ./cli tests --fix — Run linting and automatically fix problems.

> Note: The CLI requires Docker to be installed and running on your system.

Customizing Prettier

If you would like to customize the Prettier settings, create a file named .prettierrc in your project directory. This file must declare a Prettier configuration like this:

`js
{
"printWidth": 100,
"tabWidth": 2,
"singleQuote": true,
"jsxBracketSameLine": true,
"trailingComma": "es5"
}
`




Custom Rules

This package provides the following custom ESLint rules:

| Rule Name | Description | Valid Example | Invalid Example | Explanation |
|-----------|-------------|---------------|-----------------|-------------|
| no-nested-ternary-operators | Disallow nested ternary operators for better readability. | const x = a ? b : c; | const x = a ? (b ? 1 : 2) : 3; | Nested ternaries are hard to read and should be avoided. |
| prefer-early-returns | Prefer early returns (guard clauses) over else-if and else blocks that only contain an if. | function f(a){ if (!a) return; doWork(a); } | function f(a,b){ if (a > 0) { doA(); } else if (b > 0) { doB(); } else { doC(); } } | Avoids deep nesting and improves code clarity by using guard clauses instead of else/else-if. |
| prefer-object-parameters | Prefer a single object parameter for functions with many parameters, to improve readability and extensibility. | function foo({a, b, c, d, e}) {} | function foo(a, b, c, d, e) {} | When a function takes more than a set number of parameters (default: 4), use a single object parameter instead of multiple positional arguments. |
| mui-prefer-components | Prefer Material UI components over native HTML elements in JSX when an equivalent exists. | Text |

` | Enforces use of MUI components (e.g., Box, Typography, Button) instead of native HTML tags in JSX for consistency with the design system. |

Philosophy

This config is designed to mark severe problems (ex: syntax errors) as errors and stylistic issues as warnings. This lets your team apply policies like, "make sure a commit has no errors but ignore warnings if the commit didn't introduce them."