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

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

You will also need to install eslint and prettier:

yarn add --dev eslint prettier

Usage

Exported Configurations

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.

Example: eslint.config.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:

{
  "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. | <Box><Typography>Text</Typography></Box> | <div><p>Text</p></div> | 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."