Update 03-eslint.mdx to allow EsLint work properly with prettier

[MohammadAhmerMalick]

Title: Fix: Prettier Integration in eslint.config.mjs

Description: Documenting the fix for the Prettier extension in the eslint.config.mjs file

Date: 2024-12-23

---

Contribution: Fix Prettier Integration in eslint.config.mjs

Overview

This document details the fix implemented for an issue with the Prettier extension configuration in the eslint.config.mjs.

Problem Statement

The Prettier extension configuration in the Next.js documentation did not work as intended. Specifically, the following code snippet caused issues:

const eslintConfig = [
  ...compat.config({
    extends: ['next', 'prettier'],
  }),
]

Root Cause

The issue stemmed from using 'prettier' in the extends array. This configuration does not properly enable the Prettier integration with ESLint in Next.js projects.

Solution

The fix involved replacing 'prettier' with 'plugin:prettier/recommended' in the extends array. This adjustment ensures that Prettier is correctly integrated with ESLint.

Changes Made

Here is the corrected configuration:

const eslintConfig = [
  ...compat.config({
    extends: ['next', 'plugin:prettier/recommended'],
  }),
]

Steps Followed

1. Cloning the Repository

   • Create a new project by NEXT.JS Installation Guide.

2. Install Prettier

   • Install Prettier

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

3. Identifying the Issue

   • Create .prettierrc file in root directory

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

4. Identifying the Issue

   • Confirmed the problem by implementing the original configuration and observing that it did not properly integrate Prettier.

5. Implementing the Fix

   • Replaced 'prettier' with 'plugin:prettier/recommended' in the extends array as shown above.

   const eslintConfig = [
     ...compat.config({
       extends: ['next', 'plugin:prettier/recommended'],
     }),
   ]

6. Testing the Fix

   • Verified the updated configuration by running:

     npm run lint

   • Ensured Prettier worked according to .prettierrc file.

Conclusion

This fix updates the documentation to provide a working Prettier integration configuration for Next.js projects, improving the developer experience and ensuring consistent code formatting.

Related Links

• ESLint Plugin with Prettier

---

If you have any questions or feedback about this contribution, feel free to leave a comment on the pull request!

[ijjk]

Allow CI Workflow Run

• approve CI run for commit: 8e75911

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer