ESLint + Prettier Setup for Next.js 💻

This repository provides a comprehensive guide for integrating ESLint and Prettier into a Next.js project with TailwindCSS.

Read this in other languages: Português

Project Overview 📋

This repository provides a setup for integrating ESLint and Prettier into your Next.js project with TailwindCSS.

• ESLint: Analyzes JavaScript/TypeScript code for potential issues and enforces best practices.
• Prettier: Formats code for consistent styling.
• TailwindCSS Support: Integrates prettier-plugin-tailwindcss to organize TailwindCSS classes.

Getting Started

To get started with this project, follow the steps below:

Prerequisites

Ensure you have the following:

• Node.js: Download from nodejs.org.
• npm or yarn: Comes with Node.js; for yarn, visit yarnpkg.com.
• Next.js Project: Create a new project with the command: npx create-next-app@latest my-next-app or yarn create next-app my-next-app
• When prompted, choose Yes for using ESLint.

If you're not using TailwindCSS, you can skip installing prettier-plugin-tailwindcss and remove it from your .prettierrc.json file.

1. Install Required Dependencies

Using npm:

npm install -D eslint-config-prettier eslint-plugin-jsx-a11y eslint-plugin-prettier prettier prettier-plugin-tailwindcss

Using yarn:

yarn add --dev eslint-config-prettier eslint-plugin-jsx-a11y eslint-plugin-prettier prettier prettier-plugin-tailwindcss

2. Configure ESLint and Prettier

If you're using Next.js 15+, create or update your eslint.config.mjs file instead of .eslintrc.json with the following configuration:

import { FlatCompat } from '@eslint/eslintrc'

const compat = new FlatCompat({
  // import.meta.dirname is available after Node.js v20.11.0
  baseDirectory: import.meta.dirname,
})

const eslintConfig = [
  ...compat.config({
    extends: [
      'next',
      'next/core-web-vitals',
      'next/typescript',
      'plugin:prettier/recommended',
      'plugin:jsx-a11y/recommended',
    ],
    plugins: ['prettier', 'jsx-a11y'],
    rules: {
      'prettier/prettier': 'error',
      'react/react-in-jsx-scope': 'off',
      'jsx-a11y/alt-text': 'warn',
      'jsx-a11y/aria-props': 'warn',
      'jsx-a11y/aria-proptypes': 'warn',
      'jsx-a11y/aria-unsupported-elements': 'warn',
      'jsx-a11y/role-has-required-aria-props': 'warn',
      'jsx-a11y/role-supports-aria-props': 'warn',
    },
  }),
]

export default eslintConfig

After installing the dependencies, create or update your .eslintrc.json file with the following configuration:

{
  "extends": [
    "next/core-web-vitals",
    "next/typescript",
    "plugin:prettier/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": ["prettier", "jsx-a11y"],
  "rules": {
    "prettier/prettier": "error",
    "react/react-in-jsx-scope": "off",
    "jsx-a11y/alt-text": "warn",
    "jsx-a11y/aria-props": "warn",
    "jsx-a11y/aria-proptypes": "warn",
    "jsx-a11y/aria-unsupported-elements": "warn",
    "jsx-a11y/role-has-required-aria-props": "warn",
    "jsx-a11y/role-supports-aria-props": "warn"
  }
}

Next, create a .prettierrc.json file to customize your Prettier settings, if desired:

{
    "trailingComma": "all",
    "semi": false,
    "tabWidth": 2,
    "singleQuote": true,
    "printWidth": 80,
    "endOfLine": "auto",
    "arrowParens": "always",
    "plugins": ["prettier-plugin-tailwindcss"]
}

If you're not using TailwindCSS, your configuration should be as follows:

{
  "trailingComma": "all",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 80,
  "endOfLine": "auto",
  "arrowParens": "always"
}

3. Configure VSCode for AutoFix

To set up ESLint in Visual Studio Code:

• Open VSCode and go to Extensions Ctrl + Shift + X or Command + Shift + X.
• Search "ESLint" and install the extension by Microsoft.
• (Optional) Restart VSCode.

To enable automatic code fixes on save in Visual Studio Code, add the following setting to your settings.json:

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": "always",
}

Contribute 🚀

If you want to contribute, clone this repo, create your work branch and get your hands dirty!

git clone https://github.com/aridanpantoja/eslint-prettier-nextjs.git

git checkout -b feature/NAME

At the end, open a Pull Request explaining the problem solved or feature made, if exists, append screenshot of visual modifications and wait for the review!

Documentations that might help

📝 How to create a Pull Request | 💾 Commit pattern

License 📃

This project is under MIT license