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.
- 🏗 Automatic Package Manager Detection (
npm
,yarn
,pnpm
, orbun
) - 🧹 Removes Old ESLint & Prettier Configurations
- 📦 Installs Latest ESLint & Prettier Dependencies
- 🛠 Adds ESLint & Prettier Configuration Files
- 🔄 Updates
package.json
Scripts
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
The following dependencies will be installed:
@eslint/eslintrc@3.2.0
@eslint/js@9.18.0
@ianvs/prettier-plugin-sort-imports@4.4.0
@typescript-eslint/eslint-plugin@8.19.1
@typescript-eslint/parser@8.19.1
eslint@9.18.0
eslint-config-next@15.1.4
eslint-config-prettier@9.1.0
eslint-plugin-prettier@5.2.1
prettier@3.4.2
prettier-plugin-sort-json@4.1.1
After running the script, you can use the following commands in your project:
-
🛠 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
-
✨ 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
After setup, the following configuration files will be created in your project:
{
"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"]
}
/node_modules
/.next
/out
/build
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",
},
},
];
- Next.js
>= 13
- Node.js
>= 16
To display the help message, run:
npx eslint-prettier-next --help
or
npm dlx eslint-prettier-next --help
This project is open-source, and contributions are welcome!
To contribute:
- Fork the repository.
- Clone your fork and create a new branch.
- Make your changes and commit them.
- Push your branch and open a pull request.
We appreciate your contributions! 🚀