How to Set Up ESLint and Prettier in Your Next.js Project: A Comprehensive Guide

In a world where web development projects are increasingly complex, it's crucial to maintain clean and organized code. The combination of ESLint and Prettier is a powerful toolset that will help you ensure consistent code formatting and style in your Next.js projects. In this article, we'll dive deep into how to set up ESLint and Prettier in your Next.js project, creating a better developer experience and more maintainable codebase.

What are ESLint and Prettier?link

ESLint is a popular linting tool that analyzes your JavaScript code for potential errors and enforces coding style rules. By using ESLint, you can catch potential bugs early in the development process and maintain a consistent code style, making it easier to read and understand.

Prettier is an opinionated code formatter that works with various languages, including JavaScript, TypeScript, HTML, CSS, and more. It removes any original styling and ensures that all outputted code conforms to a consistent style. Prettier is commonly used along with ESLint to guarantee a clean, consistent codebase.

Setting Up ESLint & Prettier in your Next.js Projectlink

First, ensure you have a Next.js project to begin with. If you don't have one, you can create a new project by running the following command:

npx create-next-app my-next-app

Replace my-next-app with the desired name for your project.

Step 1: Installing Dependencies

Navigate to the root directory of your Next.js project and install the necessary dependencies by running the following command:

npm install --save-dev eslint eslint-plugin-react eslint-config-airbnb prettier eslint-plugin-prettier eslint-config-prettier

This command installs the following packages:

• eslint: The core ESLint library.
• eslint-plugin-react: ESLint rules for React applications.
• eslint-config-airbnb: A popular ESLint configuration that follows the Airbnb style guide.
• prettier: The core Prettier library.
• eslint-plugin-prettier: Integrates Prettier as an ESLint rule.
• eslint-config-prettier: Disables ESLint rules that conflict with Prettier.

Step 2: Creating Configuration Files

Next, create an .eslintrc file in your project's root directory. This file contains the configuration settings for ESLint. Add the following content to the file:

{
  "extends": ["airbnb", "plugin:react/recommended", "prettier"],
  "plugins": ["react", "prettier"],
  "rules": {
    "prettier/prettier": "error",
    "react/react-in-jsx-scope": "off",
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  }
}

Then, create a .prettierrc file in the root directory to store Prettier configuration settings. Add the following content to the file:

{
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "useTabs": false
}

Feel free to tweak these settings according to your preferences.

Step 3: Updating package.json Scripts

Update the scripts section of your package.json file by adding a lint script for running ESLint:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "eslint . --ext .js,.jsx"
},

With the lint script added to your package.json, you can now easily check your code for linting issues by running npm run lint in the terminal.

Step 4: Integration with Visual Studio Code

To make ESLint and Prettier even more effective, integrating them into your code editor, such as Visual Studio Code, can be helpful. This way, you can automatically fix and format your code while writing it.

Installing the Extensions

For Visual Studio Code, install the following extensions from the marketplace:

• ESLint
• Prettier - Code Formatter

These extensions provide real-time linting and auto-fixing capabilities, making your development process smoother.

Configuring Visual Studio Code

To automatically format your code using Prettier when saving a file, add the following settings to your Visual Studio Code settings JSON (settings.json):

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": null
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": null
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

These settings ensure that ESLint auto-fixes your code on save, and Prettier formats the code upon saving.

Step 5: Ignore Files with .eslintignore and .prettierignore

Sometimes, you might need to exclude specific files or folders from linting and formatting. To do this, you can create .eslintignore and .prettierignore files in the root of your Next.js project.

In both files, list the files and folders that should be ignored, with one item per line. The syntax follows the .gitignore pattern. For example:

node_modules/
build/
public/
next.config.js

Now, when running ESLint or Prettier, the specified files and directories will be excluded from linting and formatting.

Conclusionlink

Congratulations! You have successfully set up ESLint and Prettier in your Next.js project. Moving forward, your code will be much more consistent, readable, and maintainable. Furthermore, the integration with Visual Studio Code ensures a smooth development experience, detecting and fixing potential issues in real-time.

As your project grows, you may need to tweak your ESLint and Prettier configurations to meet your development needs. Keep in mind that the primary goal is to maintain a clean and easy-to-understand codebase that fellow developers will appreciate.

Happy coding!