🚀 ESLint + Prettier Setup for Next.js 15

This script automates the setup of ESLint and Prettier for Next.js 15 projects, ensuring high code quality and consistency. It detects the package manager, removes existing configurations, installs necessary dependencies, and configures the project automatically.

📌 Features

• 🏗 Automatic Package Manager Detection (npm, yarn, pnpm, or bun)
• 🧹 Removes Old ESLint & Prettier Configurations
• 📦 Installs Latest ESLint & Prettier Dependencies
• 🛠 Adds ESLint & Prettier Configuration Files
• 🔄 Updates package.json Scripts

📥 Installation

You can run this setup in a Next.js 15 project using the following command:

npx eslint-prettier-next-15

or if using yarn:

yarn dlx eslint-prettier-next-15

or with pnpm:

pnpm dlx eslint-prettier-next-15

or with bun:

bunx eslint-prettier-next-15

📦 Dependencies Installed

The following dependencies will be installed:

• @eslint/[email protected]
• @eslint/[email protected]
• @ianvs/[email protected]
• @typescript-eslint/[email protected]
• @typescript-eslint/[email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]
• [email protected]

📖 Usage

After running the script, you can use the following commands in your project:

Linting Commands

• 🛠 Check for linting errors

  npm run lint

  yarn lint

  pnpm run lint

  bun run lint

• 🔧 Fix linting issues

  npm run lint:fix

  yarn lint:fix

  pnpm run lint:fix

  bun run lint:fix

Formatting Commands

• ✨ Format files

  npm run format

  yarn format

  pnpm run format

  bun run format

• 🔍 Check formatting (without modifying files)

  npm run format:check

  yarn format:check

  pnpm run format:check

  bun run format:check

🛠 Configuration Files

After setup, the following configuration files will be created in your project:

.prettierrc.json

{
  "printWidth": 120,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "plugins": [
    "@ianvs/prettier-plugin-sort-imports",
    "prettier-plugin-sort-json"
  ],
  "importOrder": [
    "^(react/(.*)$)|^(react$)",
    "^(next/(.*)$)|^(next$)",
    "<THIRD_PARTY_MODULES>",
    "",
    "^@/(.*)$",
    "^[./]"
  ],
  "importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy"]
}

.prettierignore

/node_modules
/.next
/out
/build

eslint.config.mjs

import path from "node:path";
import { fileURLToPath } from "node:url";
import { FlatCompat } from "@eslint/eslintrc";
import js from "@eslint/js";
import typescriptEslintEslintPlugin from "@typescript-eslint/eslint-plugin";
import tsParser from "@typescript-eslint/parser";
import prettier from "eslint-plugin-prettier";

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,
});

export default [
  ...compat.extends("next", "next/core-web-vitals", "prettier"),
  {
    plugins: {
      prettier,
    },
    rules: {
      "prettier/prettier": "error",
      camelcase: "off",
      "import/prefer-default-export": "off",
      "react/jsx-filename-extension": "off",
      "react/jsx-props-no-spreading": "off",
      "react/no-unused-prop-types": "off",
      "react/require-default-props": "off",
      "react/no-unescaped-entities": "off",
      "import/extensions": [
        "error",
        "ignorePackages",
        {
          ts: "never",
          tsx: "never",
          js: "never",
          jsx: "never",
        },
      ],
    },
  },
  ...compat
    .extends("plugin:@typescript-eslint/recommended", "prettier")
    .map((config) => ({
      ...config,
      files: ["**/*.+(ts|tsx)"],
    })),
  {
    files: ["**/*.+(ts|tsx)"],
    plugins: {
      "@typescript-eslint": typescriptEslintEslintPlugin,
    },
    languageOptions: {
      parser: tsParser,
    },
    rules: {
      "@typescript-eslint/explicit-function-return-type": "off",
      "@typescript-eslint/explicit-module-boundary-types": "off",
      "no-use-before-define": [0],
      "@typescript-eslint/no-use-before-define": [1],
      "@typescript-eslint/no-explicit-any": "off",
      "@typescript-eslint/no-var-requires": "off",
    },
  },
];

⚙️ Requirements

• Next.js >= 13
• Node.js >= 16

❓ Help

To display the help message, run:

npx eslint-prettier-next-15 --help

or

npm dlx eslint-prettier-next-15 --help

🤝 Contributing

This project is open-source, and contributions are welcome!

To contribute:

1. Fork the repository.
2. Clone your fork and create a new branch.
3. Make your changes and commit them.
4. Push your branch and open a pull request.

We appreciate your contributions! 🚀