@uxf/eslint-config

Shared ESLint flat config for UXF projects. Requires ESLint 9+ and TypeScript 5+.

What's included

• eslint:recommended + typescript-eslint/recommended
• eslint-plugin-import (recommended)
• eslint-plugin-react (recommended)
• eslint-plugin-react-hooks
• eslint-plugin-jsx-a11y (strict)
• eslint-plugin-tailwindcss (recommended)
• Custom rules for code quality, naming conventions, and restricted patterns

Installation

yarn add -D @uxf/eslint-config eslint @eslint/js eslint-import-resolver-typescript

All four packages are peer dependencies. eslint-import-resolver-typescript in particular must live in the project root's node_modules because eslint-plugin-import resolves it from the linted file's context, not from its own dependencies.

Usage

Create eslint.config.mjs in your project root:

import uxfConfig from "@uxf/eslint-config";

/** @type {import("eslint").Linter.Config[]} */
export default [
    // Global ignores
    {
        ignores: ["**/node_modules/", "**/*.js", "**/*.jsx", "**/*.d.ts"],
    },

    ...uxfConfig,

    // Project-specific config
    {
        languageOptions: {
            parserOptions: {
                project: "tsconfig.json",
                tsconfigRootDir: import.meta.dirname,
            },
        },
    },
];

With Next.js (eslint-config-next)

For Next.js 15+ with native flat config support:

import uxfConfig from "@uxf/eslint-config";
import nextPlugin from "@next/eslint-plugin-next";

/** @type {import("eslint").Linter.Config[]} */
export default [
    { ignores: ["**/node_modules/", ".next/", "**/*.js", "**/*.d.ts"] },

    ...uxfConfig,

    // Next.js rules
    {
        plugins: { "@next/next": nextPlugin },
        rules: {
            ...nextPlugin.configs.recommended.rules,
            ...nextPlugin.configs["core-web-vitals"].rules,
        },
    },

    // Project config
    {
        languageOptions: {
            parserOptions: {
                project: "tsconfig.json",
                tsconfigRootDir: import.meta.dirname,
            },
        },
    },
];

For Next.js 14 using the legacy eslint-config-next, use @eslint/eslintrc's FlatCompat:

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
import uxfConfig from "@uxf/eslint-config";

const __dirname = dirname(fileURLToPath(import.meta.url));
const compat = new FlatCompat({ baseDirectory: __dirname });

/** @type {import("eslint").Linter.Config[]} */
export default [
    { ignores: ["**/node_modules/", ".next/", "**/*.js", "**/*.d.ts"] },

    ...uxfConfig,
    ...compat.extends("next/core-web-vitals"),

    {
        languageOptions: {
            parserOptions: {
                project: "tsconfig.json",
                tsconfigRootDir: __dirname,
            },
        },
    },
];

CI behavior

Rules using the WARNING severity are turned off when CI=1 is set. This allows local development feedback without blocking CI pipelines.

Affected rules: no-restricted-imports, no-restricted-syntax, @typescript-eslint/naming-convention, @typescript-eslint/no-explicit-any, import/no-deprecated.

reportUnusedDisableDirectives also uses WARNING — unused eslint-disable comments are warned locally but ignored in CI.

Peer dependencies

| Package | Version | |---------|---------| | eslint | ^9.0.0 | | @eslint/js | ^9.0.0 | | eslint-import-resolver-typescript | ^3.0.0 | | typescript | >=5.0.0 |