@d-kuehn/eslint-config

A comprehensive, opinionated collection of shareable ESLint configurations for JavaScript and TypeScript development.

Quick Start

pnpm install --save-dev @d-kuehn/eslint-config

You need to have Eslint >= v9 installed.

Create an eslint.config.js in your project root:

import {
  astro,
  combine,
  defaults,
  importX,
  jsdoc,
  jsonc,
  jsxA11y,
  perfectionist,
  playwright,
  betterTailwindCss,
  regexp,
  storybook,
  stylistic,
  tailwindCss,
  testingLibrary,
  typescript,
  unicorn,
  vitest,
  vue,
  vueAccessibility,
} from '@d-kuehn/eslint-config';

export default combine(
  defaults(),
  typescript(),
  stylistic(),
  // Add more configurations as needed
);

Available Configurations

Core Configurations

| Configuration | Purpose | Targeted Files | | ------------------------------------------------------------------------------------------------ | ------------------------------------------- | ------------------------------------------------- | | defaults() v9.39.2 | Base ESLint rules for JS/TS projects | All JavaScript/TypeScript files, .vue | | typescript() v8.54.0 | TypeScript-specific rules and type checking | .ts, .tsx, .mts, .cts, .vue | | stylistic() v5.7.1 | Code style and formatting rules | All JavaScript/TypeScript files, .vue, .astro |

Feature-specific Configurations

| Configuration | Purpose | Targeted Files | | --------------------------------------------------------------------------------------------------------- | ------------------------------ | ------------------------------------------------- | | jsxA11y() v6.10.2 | A11Y | .jsx, .tsx, .astro | | importX() v4.16.1 | ES6+ import/export syntax | All JavaScript/TypeScript files, .vue | | jsdoc() v62.5.0 | JSDoc comments validation | All JavaScript/TypeScript files | | jsonc() v2.21.0 | JSON validation and formatting | .json, .jsonc, .json5 | | regexp() v3.0.0 | Regular expressions validation | All JavaScript/TypeScript files, .vue | | unicorn() v62.0.0 | Additional JavaScript rules | All JavaScript/TypeScript files, .vue, .astro | | perfectionist() v5.4.0 | Consistent code organization | All JavaScript/TypeScript files, .vue |

Framework Support

| Configuration | Purpose | Targeted Files | | --------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ---------------------------------------------- | | astro() v1.5.0 | Astro rules | .astro | | vue() v10.7.0 | Vue.js rules | .vue | | vueAccessibility() v2.4.1 | Vue.js accessibility | .vue | | storybook() v10.2.4 | Storybook rules | **/*.stories.{ts,tsx,js,jsx,mjs,cjs} | | betterTailwindCss() v3.8.0 - Tailwind CSS v3, v4 | Tailwind CSS usage | .vue, .js, .ts, .jsx, .tsx, .astro |

Testing Configurations

| Configuration | Purpose | Targeted Files | | ---------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------------------------------- | | vitest() v1.6.6 | Vitest test rules | **/*.{spec,test,bench,benchmark}.?([cm])[jt]s?(x) | | playwright() v2.5.1 | Playwright E2E test rules | tests/e2e/**, **/*.e2e.?([cm])[jt]s?(x) | | testingLibrary() v7.15.4 | Testing Library with Vue.js | **/*.{spec,test,bench,benchmark}.?([cm])[jt]s?(x) |

Configuration Options

Each configuration accepts an options object:

interface Options {
  ignores?: string[]; // Files to ignore
  plugins?: Record<string, TSESLint.Linter.Plugin>; // Additional ESLint plugins
  rules?: Record<string, TSESLint.SharedConfig.RuleEntry>; // Custom rule configurations
}

For detailed information:

• ignores: See ESLint ignore patterns documentation
• plugins: See ESLint plugins configuration
• rules: See ESLint rules configuration

The Typescript plugin accept setting some languageOptions:

interface Options {
  ignores?: string[];
  plugins?: Record<string, TSESLint.Linter.Plugin>;
  rules?: Record<string, TSESLint.SharedConfig.RuleEntry>;
  languageOptions?: Linter.LanguageOptions; // typescript() only
}

The betterTailwindCss plugin accept settings:

interface Options {
  ignores?: string[];
  plugins?: Record<string, TSESLint.Linter.Plugin>;
  rules?: Record<string, TSESLint.SharedConfig.RuleEntry>;
  settings?: {
    'better-tailwindcss'?: {
      entryPoint?: string;
      tailwindConfig?: string;
      attributes?: any[];
      callees?: any[];
      variables?: any[];
      tags?: any[];
    };
  };
}

Example usage with options:

export default combine(
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        __APP_VERSION__: 'readonly',
        MaybeHTMLElement: 'readonly',
      },
    },
  },
  typescript({
    ignores: ['*.test.ts'],
    rules: {
      '@typescript-eslint/no-explicit-any': 'off',
    },
  }),
  stylistic({
    rules: {
      '@stylistic/indent': ['error', 4],
    },
  }),
  betterTailwindCss({
    settings: {
      'better-tailwindcss': {
        entryPoint: 'src/styles/global.css',
      }
    },
  })
);