eslint-config-fido
Shared ESLint configs for Typescript & React projects.
Table of Contents
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."