Prettier and ESLint Configuration in Next.js Projects

Setting up a clean and consistent codebase is crucial for any Next.js project. Utilizing tools like Prettier and ESLint ensures your code is well-formatted and adheres to specified rules, making collaboration smoother and improving code quality.

This blog post guides you through integrating Prettier and ESLint into your Next.js 13 project, answering common questions, and providing practical steps and code snippets.

Why Use Prettier and ESLint Together?

Prettier and ESLint serve different purposes. Prettier focuses on code formatting, while ESLint enforces coding standards and catches syntax errors. Combining both allows you to maintain a clean, error-free codebase, enhancing your development workflow.

Key Benefits:

• Prettier: Automatically formats your code to improve readability.

• ESLint: Ensures your code follows specific rules and catches potential errors.

Setting Up Prettier in a Next.js Project

First, let's set up Prettier in your Next.js project. This involves installing the necessary packages and configuring the prettier configuration file.

Step 1: Install Prettier

Run the following command to install Prettier as a development dependency:

1npm install --save-dev prettier

​

Step 2: Create a Prettier Configuration File

Create a .prettierrc file in the root of your project:

1{
2  "semi": true,
3  "singleQuote": true,
4  "printWidth": 80,
5  "trailingComma": "es5"
6}

​

Step 3: Configure VSCode to Use Prettier

If you use Visual Studio Code, you can configure it to use Prettier automatically. Add the following settings to your settings.json:

1{
2  "editor.formatOnSave": true,
3  "[javascript]": {
4    "editor.defaultFormatter": "esbenp.prettier-vscode"
5  },
6  "[typescript]": {
7    "editor.defaultFormatter": "esbenp.prettier-vscode"
8  }
9}

​

Setting Up ESLint in a Next.js Project

Next, let's configure ESLint. The process involves installing ESLint, configuring the ESLint configuration file, and integrating it with Prettier.

Step 1: Install ESLint

Run the following command to install eslint:

1npm install --save-dev eslint

​

Step 2: Create an ESLint Configuration File

Create a .eslintrc.json file in the root of your project:

1{
2  "env": {
3    "browser": true,
4    "es2021": true
5  },
6  "extends": [
7    "eslint:recommended",
8    "plugin:@next/next/recommended",
9    "plugin:prettier/recommended"
10  ],
11  "parserOptions": {
12    "ecmaFeatures": {
13      "jsx": true
14    },
15    "ecmaVersion": 12,
16    "sourceType": "module"
17  },
18  "rules": {
19    "prettier/prettier": ["error", { "endOfLine": "auto" }],
20    "react/react-in-jsx-scope": "off"
21  }
22}

​

Step 3: Integrate Prettier with ESLint

To ensure Prettier and ESLint work together seamlessly, install the following plugins:

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

​

Update your .eslintrc.json to include Prettier configurations:

1{
2  "extends": [
3    "eslint:recommended",
4    "plugin:@next/next/recommended",
5    "plugin:prettier/recommended"
6  ],
7  "plugins": ["prettier"],
8  "rules": {
9    "prettier/prettier": ["error"]
10  }
11}

​

Step 4: Configure ESLint to Automatically Fix Errors

Add the following script to your package.json:

1"scripts": {
2  "lint": "eslint . --fix"
3}

​

Now, you can run ESLint with the following command:

1npm run lint

​

Setting Up a Pre-commit Hook with Lint-staged

To ensure your code is linted and formatted before each commit, set up a pre-commit hook using lint-staged and husky.

Step 1: Install Husky and Lint-staged

1npm install --save-dev husky lint-staged

​

Step 2: Configure Husky and Lint-staged

Add the following configuration to your package.json:

1"husky": {
2  "hooks": {
3    "pre-commit": "lint-staged"
4  }
5},
6"lint-staged": {
7  "*.js": [
8    "eslint --fix",
9    "prettier --write"
10  ],
11  "*.ts": [
12    "eslint --fix",
13    "prettier --write"
14  ],
15  "*.jsx": [
16    "eslint --fix",
17    "prettier --write"
18  ],
19  "*.tsx": [
20    "eslint --fix",
21    "prettier --write"
22  ]
23}

​

Integrating Tailwind CSS with Prettier

To ensure your Tailwind CSS classes are sorted automatically, use the prettier-plugin-tailwindcss.

Step 1: Install the Plugin

1npm install --save-dev prettier-plugin-tailwindcss

​

Step 2: Update the Prettier Configuration

Add the prettier-plugin-tailwindcss to your .prettierrc:

1{
2  "plugins": ["prettier-plugin-tailwindcss"]
3}

​

This plugin will automatically sort tailwind classes, ensuring a consistent order.

Next Core Web Vitals

Next Core Web Vitals are metrics essential for a smooth user experience, focusing on performance, responsiveness, and visual stability. Using ESLint and Prettier helps you adhere to best practices, indirectly improving these vital metrics.

Conclusion

Integrating Prettier and ESLint in your Next.js project ensures a clean, maintainable, and error-free codebase. By following the steps outlined in this blog post, you can set up a robust development environment, leveraging the power of both tools. Happy coding!

Remember, combining Prettier and ESLint in your Next.js 13 project is not just about adhering to standards but also about creating a seamless development experience. With the proper configuration, your code will be cleaner, more consistent, and ready for any collaboration or scaling needs.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.