@wyattades/eslint-config

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

Usage

1. 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

2. 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"]
         },
       },
     }
   ];

3. (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
   ];

Disclaimer

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