Set Up Prettier In Next 16

To integrate ESLint and Prettier into a Next.js 16 project, follow these steps:

1. Install Dependencies:

Install Prettier, the ESLint configuration for Prettier, and the ESLint plugin for Prettier as development dependencies:

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
# or using yarn
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

2. Configure ESLint:

Modify your ESLint configuration file (e.g., eslint.config.mjs for flat config or .eslintrc.json for legacy config) to include Prettier.

For Flat Configuration (eslint.config.mjs):

// eslint.config.mjs
import { defineConfig, globalIgnores } from 'eslint/config';
import nextVitals from 'eslint-config-next/core-web-vitals';
import prettierConfig from 'eslint-plugin-prettier/recommended'; // Import Prettier config

const eslintConfig = defineConfig([
  ...nextVitals,
  prettierConfig, // Add Prettier config to the extends array
  globalIgnores([
    '.next/**',
    'out/**',
    'build/**',
    'next-env.d.ts',
  ]),
]);

export default eslintConfig;

For Legacy Configuration (.eslintrc.json):

// .eslintrc.json
{
  "extends": [
    "next/core-web-vitals",
    "prettier" // Add "prettier" to the END of extends
  ],
  "plugins": [
    "prettier" // Add "prettier" to the plugins array
  ],
  "rules": {
    "prettier/prettier": "error" // Enable the prettier/prettier rule
  }
}

3. Configure Prettier:

Create a .prettierrc file in your project root to define your Prettier formatting rules.

// .prettierrc
{
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "semi": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "endOfLine": "lf"
}

4. (Optional) Create .prettierignore:

Create a .prettierignore file to specify files or folders that Prettier should ignore.

// .prettierignore
.next
node_modules
out
build

5. (Optional) Integrate with VS Code:

• Install the “Prettier — Code formatter” and “ESLint” extensions.
• In VS Code settings, set “Editor: Default Formatter” to “Prettier — Code formatter”.
• Enable “Editor: Format On Save”.
• Ensure your ESLint extension is configured to use the project’s ESLint installation.

6. Run ESLint and Prettier:

You can now run ESLint and Prettier from your terminal to check and format your code:

npx eslint . --fix
npx prettier . --write

This setup ensures that ESLint catches potential issues and Prettier enforces consistent code formatting, with ESLint rules that conflict with Prettier being disabled by eslint-config-prettier.