@rklos/eslint-config

My personal ESLint configs for modern web development. Opinionated, based on Airbnb with my own tweaks.

Supports ESLint 9+ and 10 with flat config only. Requires Node.js >= 20.12.0 (ESLint 10's stylish formatter uses util.styleText which was added in Node 20.12.0).

Available configs

| Config | Import path | Includes | |--------|-------------|----------| | Base (JS) | @rklos/eslint-config/base | Airbnb base, stylistic rules | | TypeScript | @rklos/eslint-config/typescript | Base + typescript-eslint | | React | @rklos/eslint-config/react | Base + React, JSX a11y | | React + TS | @rklos/eslint-config/react-ts | TypeScript + React, JSX a11y | | Next.js | @rklos/eslint-config/next | React + eslint-config-next | | Next.js + TS | @rklos/eslint-config/next-ts | React TS + eslint-config-next | | Vue | @rklos/eslint-config/vue | Base + Vue plugin | | Vue + TS | @rklos/eslint-config/vue-ts | TypeScript + Vue plugin | | Svelte | @rklos/eslint-config/svelte | Base + Svelte plugin | | Svelte + TS | @rklos/eslint-config/svelte-ts | TypeScript + Svelte plugin | | Astro | @rklos/eslint-config/astro | Base + Astro plugin | | Astro + TS | @rklos/eslint-config/astro-ts | TypeScript + Astro plugin | | Jest | @rklos/eslint-config/jest | Jest plugin (standalone) | | Vitest | @rklos/eslint-config/vitest | Vitest plugin (standalone) | | Cypress | @rklos/eslint-config/cypress | TypeScript + Cypress plugin | | NestJS | @rklos/eslint-config/nest | TypeScript |

Usage

Basic setup

// eslint.config.js
import react from '@rklos/eslint-config/react';

export default [
  ...react,
];

TypeScript with type-aware linting

All -ts configs include typescript-eslint's type-checked rules. For these to work you need to point to your tsconfig.json:

// eslint.config.js
import reactTs from '@rklos/eslint-config/react-ts';

export default [
  ...reactTs,
  {
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.json'],
      },
    },
  },
];

This is required because ESLint's flat config doesn't allow shared configs to resolve project-relative tsconfig paths. See typescript-eslint docs for details.

Combining multiple configs

Configs can be spread together. For example, an Astro project with React and TypeScript:

// eslint.config.js
import astroTs from '@rklos/eslint-config/astro-ts';
import reactTs from '@rklos/eslint-config/react-ts';
import vitest from '@rklos/eslint-config/vitest';

export default [
  ...astroTs,
  ...reactTs,
  ...vitest,
  {
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.json'],
      },
    },
  },
];

Config details

Install @rklos/eslint-config and eslint first, then add the peer dependencies for the configs you use.

npm install --save-dev @rklos/eslint-config eslint

Base

npm install --save-dev eslint-import-resolver-typescript

import base from '@rklos/eslint-config/base';

export default [...base];

TypeScript

npm install --save-dev eslint-import-resolver-typescript typescript typescript-eslint

import typescript from '@rklos/eslint-config/typescript';

export default [...typescript];

React

npm install --save-dev eslint-import-resolver-typescript eslint-config-airbnb eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

import react from '@rklos/eslint-config/react';

export default [...react];

React + TypeScript

npm install --save-dev eslint-import-resolver-typescript typescript typescript-eslint @typescript-eslint/parser eslint-config-airbnb eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

import reactTs from '@rklos/eslint-config/react-ts';

export default [...reactTs];

Next.js

npm install --save-dev eslint-import-resolver-typescript eslint-config-airbnb eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-config-next @next/eslint-plugin-next

import next from '@rklos/eslint-config/next';

export default [...next];

Next.js + TypeScript

npm install --save-dev eslint-import-resolver-typescript typescript typescript-eslint @typescript-eslint/parser eslint-config-airbnb eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-config-next @next/eslint-plugin-next

import nextTs from '@rklos/eslint-config/next-ts';

export default [...nextTs];

Vue

npm install --save-dev eslint-import-resolver-typescript eslint-plugin-vue

import vue from '@rklos/eslint-config/vue';

export default [...vue];

Vue + TypeScript

npm install --save-dev eslint-import-resolver-typescript typescript typescript-eslint @typescript-eslint/parser eslint-plugin-vue vue-eslint-parser

import vueTs from '@rklos/eslint-config/vue-ts';

export default [...vueTs];

Svelte

npm install --save-dev eslint-import-resolver-typescript eslint-plugin-svelte

import svelte from '@rklos/eslint-config/svelte';

export default [...svelte];

Svelte + TypeScript

npm install --save-dev eslint-import-resolver-typescript typescript typescript-eslint @typescript-eslint/parser eslint-plugin-svelte

import svelteTs from '@rklos/eslint-config/svelte-ts';

export default [...svelteTs];

Astro

npm install --save-dev eslint-import-resolver-typescript eslint-plugin-astro

import astro from '@rklos/eslint-config/astro';

export default [...astro];

Astro + TypeScript

npm install --save-dev eslint-import-resolver-typescript typescript typescript-eslint @typescript-eslint/parser eslint-plugin-astro

import astroTs from '@rklos/eslint-config/astro-ts';

export default [...astroTs];

Jest

Standalone — combine with any other config.

npm install --save-dev eslint-plugin-jest

import jest from '@rklos/eslint-config/jest';

export default [...jest];

Vitest

Standalone — combine with any other config.

npm install --save-dev @vitest/eslint-plugin

import vitest from '@rklos/eslint-config/vitest';

export default [...vitest];

Cypress

npm install --save-dev eslint-import-resolver-typescript typescript typescript-eslint eslint-plugin-cypress

import cypress from '@rklos/eslint-config/cypress';

export default [
  ...cypress,
  {
    languageOptions: {
      parserOptions: { project: ['./tsconfig.json'] },
    },
  },
];

NestJS

npm install --save-dev eslint-import-resolver-typescript typescript typescript-eslint

import nest from '@rklos/eslint-config/nest';

export default [
  ...nest,
  {
    languageOptions: {
      parserOptions: { project: ['./tsconfig.json'] },
    },
  },
];

License

MIT