@winnerpc/eslint-config-next

Reusable ESLint configuration for Next.js projects.

Note

This configuration uses the Allman brace style approach (opening braces on a new line).

This package provides a consistent ESLint setup for Next.js and React projects that can be easily shared across multiple projects.

---

📦 Installation

Important

ESLint version 9.25.1 is required as a peer dependency. Please ensure it is installed in your project's devDependencies.

Peer Dependencies:

• eslint@9.25.1
• next@14.2.28
• react@18.x
• typescript@5.8.x

npm install --save-dev --save-exact @winnerpc/eslint-config-next eslint@9.25.1

yarn add --dev --exact @winnerpc/eslint-config-next eslint@9.25.1

pnpm add --save-dev --save-exact @winnerpc/eslint-config-next eslint@9.25.1

---

🚀 Usage

🔧 Basic Usage

Important

For VS Code users: Ensure you have the ESLint extension installed and that your VS Code settings are configured to enable ESLint's flat config support. This typically involves setting "eslint.useFlatConfig": true in your VS Code settings.json file.

To use the shared configuration, create an eslint.config.js file in the root of your project. Next, depending on your project type, paste the appropriate export from the options below:

For Next.js Projects (Default Export)

export { default } from "@winnerpc/eslint-config-next"

For React Projects (React Config)

If you're working on a pure React project (not using Next.js), use the reactConfig export:

export { reactConfig as default } from "@winnerpc/eslint-config-next"

Recommended Project Structure

Here's a simple example of how your project structure might look:

my-project/
├── node_modules/
├── src/
│   └── index.tsx
├── eslint.config.js    # Paste the appropriate export for your project type here 👈
└── package.json

---

🗂️ Files and Extensions

🎯 Targeted Extensions

The configuration automatically applies to the following file extensions:

**/*.{js,mjs,cjs,ts,jsx,tsx}

🚫 Ignored Paths

The following directories and files are automatically ignored:

coverage/
.next/
out/
build/
dist/
dist-ssr/
next-env.d.ts

---

👍 Useful Scripts

Add these scripts to your package.json for easier usage:

{
    "scripts": {
        "lint": "eslint .",
        "lint:inspect": "eslint --inspect-config"
    }
}

Lint the entire project using ESLint:

npm run lint
# Or Yarn
yarn lint
# Or pnpm
pnpm lint

Inspect the ESLint configuration:

npm run lint:inspect
# Or Yarn
yarn lint:inspect
# Or pnpm
pnpm lint:inspect

Each command above can be run in the terminal from the root of your project. These scripts help automate repetitive tasks and ensure consistency across your codebase.

---

🤝 Contributing

Contributions are welcome! If you have ideas, improvements, or run into any issues, feel free to open an issue.

---

🔗 Links

• npm
• GitHub

---

📃 License

MIT © Winner-pc