Integrating ESLint and Prettier

This guide details the setup for integrating ESLint for code quality analysis and Prettier for code formatting with in a Next.js project using TypeScript. The configuration enables automatic formatting and linting on file save in VS Code.

Required VS Code Extensions

• ESLint: Extension ID dbaeumer.vscode-eslint
• Prettier - Code formatter: Extension ID esbenp.prettier-vscode

Configuration Files

The setup requires the following configuration files:

• eslint.config.mjs - ESLint configuration using the flat config format.
• .prettierrc - Prettier formatting rules.
• .prettierignore - Files and directories to exclude from Pretttier formatting.
• .vscode/settings.json - Workspace-specific VS Code settings to enable auto-formattting.

Configuration Details

ESLint Configuration (eslint.config.mjs)

import { defineFlatConfig } from '@eslint/eslintrc';
import nextCore from 'eslint-config-next/core-web-vitals';
import nextTypeScript from 'eslint-config-next/typescript';
import prettierConfig from 'eslint-config-prettier';

export default defineFlatConfig([
  ...nextCore,
  ...nextTypeScript,
  // Disable ESLint stylistic rules handled by Prettier
  prettierConfig,
  {
    ignores: [
      '.next/',
      'out/',
      'build/',
      'next-env.d.ts'
    ]
  }
]);

Prettier Configuration (.prettierrc)

{
  "semi": true,
  "singleQuote": false,
  "trailingComma": "es5",
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "always"
}

Prettier Ignore File (.prettierignore)

.next
out
build
node_modules

VS Code Workspace Settings (.vscode/settings.json)

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Package.json Scripts

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

Common Commands (using pnpm)

Execute these commands from the project root directory:

• Run ESLint checks: pnpm lint
• Run ESLint with auto-fix: pnpm lint:fix
• Format entire project with Prettier: pnpm format
• Check formatting without writing (for CI): pnpm format:check

Resolving Rule Conflicts

ESLint contains stylistic rules that overlap with Prettier's formatting responsibilities. This can cause conflicts where each tool repeatedly undoes the other's changes. The eslint-config-prettier package is used to disable these specific ESLint rules, ensuring Prettier has sole responsibility for code formatting.