Initialize Next.js or Vite with ESLint and Prettier

0. What and why
1. Create a new project with ESLint
2. Install Prettier
3. Configure ESLint
4. Test it out

0. What and why

ESLint is a code linter: it statically analyzes your code for bugs. For example, ESLint would flag the following code:

// Here, ESLint would complain that '==' is used instead of '==='
// ('===' is better because it checks for both value and type equality)
if (a == b) {
  // do something
}

Prettier is a code formatter: it formats your code to ensure a consistent style. For example, Prettier would reformat the following code as follows:

// Before: inconsistent indentation and spacing
function foo() {
console.log('Hello, world!')
}

// After: consistent indentation and spacing
function foo() {
  console.log('Hello, world!')
}

Having both ESLint and Prettier in your project ensures that your code (1) looks consistent and (2) is free of select bugs and anti-patterns.

For various reasons, setting up a project with both ESLint and Prettier can be tricky and time-consuming! This guide aims to simplify that process.

1. Create a new project with ESLint

Modern React frameworks and build tools like Next.js and Vite come with built-in support for ESLint.

For example, when creating a new project via one of the commands below, the CLI will prompt you to choose whether to include ESLint in your project.

npx create-next-app@latest # if using Next.js

npm create vite@latest # if using Vite

Go into your project and install the dependencies:

cd your-project-name
npm install

TIP

Configuring Prettier can be a hairy process. Before moving on, I recommend saving your progress with git or your preferred version control system.

2. Install Prettier

npm install --save-dev \
  prettier \
  eslint-plugin-prettier \
  eslint-config-prettier

What each package does:

prettier is the core Prettier package
eslint-plugin-prettier loads and runs Prettier inside ESLint
eslint-config-prettier disables ESLint rules that conflict with Prettier

NOTE

While ESLint does have certain formatting rules, its primary focus is on code quality, while Prettier is focused on code formatting. To get the best of both worlds, we're going to disable ESLint's formatting rules and let Prettier handle formatting instead.

3. Configure ESLint

Append the highlighted below to your existing ESLint config file.

IMPORTANT

Do not overwrite your existing ESLint config file! Instead, append to it or merge the changes.

If you're using Next.js:

eslint.config.mjs

import js from "@eslint/js";

const compat = new FlatCompat({
  recommendedConfig: js.configs.recommended,
});

const eslintConfig = [
  ...compat.extends(
    "eslint:recommended",
    "plugin:prettier/recommended",
  ),
];

export default eslintConfig;

If you're using Vite:

eslint.config.js

import eslintPluginPrettier from "eslint-plugin-prettier/recommended"
import prettierConfig from 'eslint-config-prettier';

export default tseslint.config([
  {
    extends: [
      eslintPluginPrettier,
      prettierConfig,
    ],
  },
])

4. Test it out

Run ESLint to check that everything is working correctly:

npm run lint -- --fix

If you don't see any errors, congratulations! You've successfully set up a new React project with ESLint and Prettier.

Optionally, you can create a .prettierrc file to customize Prettier's formatting rules. Conflicts between your custom Prettier rules and the recommended Prettier rules will be automatically resolved and your custom rules will be prioritized.