ESLint configuration for TypeScript, Prettier, React, Jest
This the base ESLint configuration I use in personal projects.
✔ Maximum reasonable™️ Typescript strictness
✔ Relying on Prettier as much as possible
✔ Supports React
✔ Strict accessibility requirements via JSX a11y
✔ Supports Jest
✔ Supports nested project directories with global imports
-
Install the package and its minimum required peer dependencies:
pnpm add -D @wyattades/eslint-config eslint prettier
Additional packages are optional:
pnpm add typescript react react-dom jest
-
Extend this package in your ESLint configuration:
eslint.config.mjs
import baseConfig from "@wyattades/eslint-config"; export default [ ...baseConfig, // ... your custom config here ];
⚠️ If you use a TS configuration file(s) other than the default (tsconfig.json
under the project's root), you need to specify its path:export default [ ...baseConfig, { languageOptions: { parserOptions: { project: ["tsconfig.custom.json", "maybe-another/tsconfig.json"] }, }, } ];
-
(Optional) Auto-organize imports via prettier-plugin-organize-imports
pnpm add prettier-plugin-organize-imports
.prettierrc
{ "plugins": ["prettier-plugin-organize-imports"] }
If you don't want to use this plugin, you can rely on our
eslint-plugin-import
ordering rules:import baseConfig from "@wyattades/eslint-config"; import importOrderConfig from "@wyattades/eslint-config/import-order"; export default [ ...baseConfig, ...importOrderConfig, // ... your custom config here ];
This package is intended for my own projects. I tend to update the rules whenever I learn new best practices, so new minor versions may introduce breaking changes.
Author: Wyatt Ades https://wyattades.com
Credit: Based on a similar package by Kostas Karvounis
License: MIT