Set up ESlint 9 for Next.js 15 with Typescript and TailwindCSS

eslint.config.mjs

import path from "node:path";
import { fileURLToPath } from "node:url";

import react from "eslint-plugin-react";
import jsdoc from "eslint-plugin-jsdoc";
import tailwindcss from "eslint-plugin-tailwindcss";
import typescriptEslint from "@typescript-eslint/eslint-plugin";
import globals from "globals";
import tsParser from "@typescript-eslint/parser";
import js from "@eslint/js";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
    baseDirectory: __dirname,
    recommendedConfig: js.configs.recommended,
    allConfig: js.configs.all
});

const eslintConfig = [{
    ignores: ["**/node_modules", "**/build", "**/dist", "**/public"],
}, ...compat.extends(
    "next",
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:tailwindcss/recommended",
    "plugin:@typescript-eslint/recommended",
), {
    plugins: {
        react,
        jsdoc,
        tailwindcss,
        "@typescript-eslint": typescriptEslint,
    },

    languageOptions: {
        globals: {
            ...globals.browser,
            ...globals.node,
        },

        parser: tsParser,
        ecmaVersion: 2024,
        sourceType: "module",

        parserOptions: {
            project: "./tsconfig.json",

            ecmaFeatures: {
                jsx: true,
                arrowFunctions: true,
            },
        },
    },

    settings: {
        react: {
            version: "detect",
        },
    },

    rules: {
        "no-unused-vars": "warn",
        "eqeqeq": ["warn", "always"],
        "no-var": "error",

        "prefer-arrow-callback": ["warn", {
            allowNamedFunctions: false,
        }],

        "func-style": ["warn", "expression", {
            allowArrowFunctions: true,
        }],

        "react/prop-types": "off",
        "react/react-in-jsx-scope": "off",
        "react/no-array-index-key": "error",
        "react/self-closing-comp": "warn",
        "react/no-unescaped-entities": "error",
        "react/jsx-no-target-blank": "error",

        "react/jsx-no-useless-fragment": ["warn", {
            allowExpressions: true,
        }],

        "react/sort-comp": "error",
        "react-hooks/exhaustive-deps": "warn",
        "react-hooks/rules-of-hooks": "error",
        "@next/no-img-element": "off",
        "@typescript-eslint/explicit-function-return-type": "warn",
        "@typescript-eslint/consistent-type-imports": "error",
        "@typescript-eslint/consistent-type-exports": "error",
        "@typescript-eslint/consistent-type-definitions": ["error", "type"],

        "sort-imports": ["error", {
            ignoreCase: true,
            ignoreDeclarationSort: true,
            ignoreMemberSort: false,
        }],

        "import/order": ["error", {
            "groups": ["builtin", "external", "internal"],

            "pathGroups": [{
                pattern: "react",
                group: "external",
                position: "before",
            }],

            "newlines-between": "always",
        }],

        "jsdoc/require-jsdoc": ["error", {
            require: {
                ArrowFunctionExpression: true,
                ClassDeclaration: true,
                FunctionDeclaration: true,
                FunctionExpression: true,
                MethodDefinition: true,
            },
        }],

        "jsdoc/require-param": "error",
        "jsdoc/require-param-type": "error",
        "jsdoc/require-returns": "error",
        "jsdoc/require-returns-type": "error",
        "jsdoc/require-property": "error",
        "jsdoc/require-property-description": "error",
        "jsdoc/require-property-type": "error",
    },
}];

export default eslintConfig;

ESLINT9_NEXTJS_V15.md

Set up ESlint 9 for Next.js 15 with Typescript and TailwindCSS

Install dependencies

Using yarn

yarn add --dev eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-next eslint-plugin-jsdoc eslint-plugin-tailwindcss husky

Using npm

npm install --save-dev eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-next eslint-plugin-jsdoc eslint-plugin-tailwindcss husky

Setup Eslint 9 config

• Replace the content of eslint.config.mjs file with the file attached below
• Include "eslint.config.mjs" inside tsconfig.json file

Setup Husky

npx husky init

Paste the below inside .husky/pre-commit

# .husky/pre-commit
echo "Running husky pre-commit hook"
eslint --fix
prettier $(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g') --write --ignore-unknown
git update-index --again