Setup Prettier and Eslint for NextJS project

As front-end applications grow in complexity, maintaining code quality becomes increasingly important. Two essential tools in a modern NextJS developer's toolkit are ESLint and Prettier. When properly configured, they work together to catch errors, enforce coding standards, and ensure consistent formatting across your entire codebase. In this tutorial, you will learn how to set up ESLint and Prettier in a Next.js project to ensure code quality, consistency and maintainability

Why Use ESLint and Prettier?

Before diving into the setup, let's understand why these tools are valuable:

Prettier: An opinionated code formatter that ensures consistent styling across your codebase.
ESLint: A linting tool that catches syntax errors, enforces best practices, and maintains code quality.

Together, they complement each other: Prettier handles formatting, while ESLint focuses on code quality and patterns.

Let's dive into the setup process!

Create a Next.js app with eslint

npx create-next-app@latest my-next-app
# or
npx create-next-app@latest "next-app" --ts --no-turbopack --no-interactive --typescript --eslint --tailwind --app --src-dir --import-alias "@/*"

cd my-next-app

Install dependencies

Run the following command to install Prettier, and other required plugins:

# for existing next eslint
npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier

prettier: Code formatter to ensure consistent styling.
eslint-config-prettier: Disables ESLint rules that conflict with Prettier.
eslint-plugin-prettier: Integrates Prettier into ESLint so that formatting errors are flagged.

Update `eslint.config.mjs` in the root directory

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.config({
    extends: ["next/core-web-vitals", "next/typescript", "prettier"],
    plugins: ["prettier"],
    rules: {
      //
      "prettier/prettier": "error",
    },
  }),
];

export default eslintConfig;

Create Prettier Configuration File (`.prettierrc`)

Add the following Prettier configuration to a .prettierrc file:

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "jsxSingleQuote": false,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}

printWidth: Sets the maximum line length.
tabWidth: Sets the number of spaces per indentation level.
useTabs: Uses spaces for indentation.
semi: Don't use semicolons at the end of statements.
singleQuote: Uses single quotes for strings.
trailingComma: Adds trailing commas wherever possible. E.g { foo: bar, }
jsxSingleQuote: false: Uses double quotes for JSX attributes. E.g <Component prop="value" />
bracketSpacing: true: Adds spaces inside curly braces. E.g { foo: bar }

arrowParens: "always": Always includes parentheses around arrow function arguments. E.g const foo = (bar) => {}
endOfLine: "lf": Enforces Unix-style line endings for cross-platform consistency.

Ignore Files

Create .prettierignore in the root directory

build/
public
node_modules/
package-lock.json
yarn.lock
.yarn/
.next

Update your `package.json` with useful scripts:

Modify package.json to include these useful scripts:

{
  "scripts": {
    ...
    "lint": "next lint",
    "lint:fix": "next lint --fix --ext .js,.jsx,.ts,.tsx",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

Demo

Create `src/app/about/page.tsx` in the root directory

export default function About() {
  let x =10
  return (
    <div className=""><h1 className="">About</h1>
    </div>
  )
}

There are some errors in the code above:

let x =10 should be const x = 10
<h1 className="">About</h1> should be new line

Run ESLint & Prettier

Run npm run lint to check for linting errors.
Run npm run lint:fix to automatically fix linting errors.
Run npm run format to format your code.
Run npm run format:check to check if files are formatted correctly

Run Build

npm run build

# Creating an optimized production build ...
# Linting and checking validity of types ...

You will see the following error:

Failed to compile.

./src/app/about/page.tsx
2:7  Error: 'x' is never reassigned. Use 'const' instead.  prefer-const
2:7  Error: 'x' is assigned a value but never used.  @typescript-eslint/no-unused-vars
2:10  Error: Insert `·`  prettier/prettier
4:23  Error: Insert `⏎······`  prettier/prettier

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/app/api-reference/config/eslint#disabling-rules

Thus, when building the project, ESLint and linting will run to check the validity of types including ESLint and Prettier rules.

(Optional) Set Up VSCode Integration

Install Vscode Extensions

ESLint (dbaeumer.vscode-eslint)
Prettier - Code formatter (esbenp.prettier-vscode)

After installing these extensions, ESLint and Prettier errors will be displayed in VSCode, making it easier to fix errors and format code.

Formar and Fix Linting Errors manually:

Cmd + Shift + P
- Format Document with Prettier
- Fix all auto-fixable Problems

Enable Format on Save:

Open VSCode Settings (settings.json) and or create .vscode/settings.json in the root directory

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "eslint.enable": false,
  "eslint.alwaysShowStatus": true,
  "eslint.autoFixOnSave": false,
  "eslint.validate": [
    "javascript",
    "typescript"
  ],
  "prettier.disableLanguages": [
    "vue"
  ],
  "json.format.enable": false
}

Conclusion

By setting up ESLint and Prettier in your Next.js/React project, you ensure consistent, readable, and maintainable code. Following these steps will help you and your team write cleaner code with minimal errors. 🚀

References

Next Steps

Setup Husky and Lint-staged with EsLint and Prettier