@frgttn/eslint-config NPM

@frgttn/eslint-config

An opinionated ESLint flat configuration based on the excellent @antfu/eslint-config, with added support for Next.js, React, JSX A11y, and custom stylistic preferences.

Features

Extends Anthony Fu's robust and modern ESLint setup.
Next.js support: Integrates @next/eslint-plugin-next for Next.js specific linting rules.
React support: Includes eslint-plugin-react for React and JSX best practices.
JSX A11y: Optional integration with eslint-plugin-jsx-a11y for accessibility checks in JSX.
Customizable Stylistic Rules: Provides an optional set of stylistic rules for code formatting consistency.
Fine-grained Rule Overrides: Specific adjustments to @antfu/eslint-config and plugin rules to better suit project needs.
Automatic Sorting: Leverages eslint-plugin-perfectionist for sorting imports, array includes, interface members, JSX props, and union types.

Installation

Install the package along with its peer dependencies:

# Using npm
npm install --save-dev @frgttn/eslint-config eslint

Usage

Create an eslint.config.js file in your project root and use the exported eslint function:

// eslint.config.js
import { eslint } from '@frgttn/eslint-config';

export default eslint(
  // Options
  {
    // Enable React specific rules (default: false)
    react: true,
    // Enable Next.js specific rules (default: false)
    next: true,
    // Enable JSX A11y rules (default: false)
    jsxA11y: true,
    // Enable custom stylistic rules (default: false, uses antfu's stylistic if true)
    stylistic: true

    // You can also pass any options supported by @antfu/eslint-config
    // For example:
    // typescript: true, // Or specific tsconfig paths
    // vue: false,
    // unocss: false,
    // formatters: true, // Enable/disable Prettier support
  },
  // You can pass additional ESLint flat config objects here
  {
    rules: {
      // Your project-specific rule overrides
      'no-debugger': 'warn'
    }
  }
);

Sorting Rules (`eslint-plugin-perfectionist`)

Automatic sorting is enforced for various parts of your codebase:

Array Includes: Sorted alphabetically (perfectionist/sort-array-includes)
Imports: Sorted with specific grouping and natural order (perfectionist/sort-imports)
Internal paths (^~/.*, ^@/.*) are recognized.
Interfaces/Types: Members sorted alphabetically (perfectionist/sort-interfaces)
JSX Props: Sorted alphabetically with custom grouping for key, ref, and callbacks (on*) (perfectionist/sort-jsx-props)
Union Types: Sorted alphabetically with defined group order (perfectionist/sort-union-types)

Plugin Rule Naming

To avoid conflicts and provide clarity, plugin rules are prefixed:

Next.js rules: frgttn-next/... (e.g., frgttn-next/no-img-element)
JSX A11y rules: frgttn-jsx-a11y/... (e.g., frgttn-jsx-a11y/alt-text)
React rules: frgttn-react/... (e.g., frgttn-react/jsx-key)

Extending the Configuration

You can easily extend the configuration by passing additional ESLint flat config objects after the options object:

// eslint.config.js
import { eslint } from '@frgttn/eslint-config';
import someOtherPlugin from 'eslint-plugin-some-other-plugin';

export default eslint(
  { react: true },
  // Custom config 1
  {
    files: ['src/utils/**/*.js'],
    rules: {
      'no-restricted-imports': ['error', 'lodash']
    }
  },
  // Custom config 2 with a plugin
  {
    plugins: {
      'custom-plugin': someOtherPlugin
    },
    rules: {
      'custom-plugin/some-rule': 'warn'
    }
  }
);

VS Code Integration

Ensure you have the ESLint extension for VS Code installed.

To enable auto-fixing on save, add the following to your VS Code settings.json:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.experimental.useFlatConfig": true // Required for ESLint Flat Config
}