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:

Copy
1npm install --save-dev prettier

Step 2: Create a Prettier Configuration File

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

Copy
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:

Copy
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:

Copy
1npm install --save-dev eslint

Step 2: Create an ESLint Configuration File

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

Copy
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:

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

Update your .eslintrc.json to include Prettier configurations:

Copy
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:

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

Now, you can run ESLint with the following command:

Copy
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

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

Step 2: Configure Husky and Lint-staged

Add the following configuration to your package.json:

Copy
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

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

Step 2: Update the Prettier Configuration

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

Copy
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.