ESLint + eslint-plugin-prettier Docs & Use Cases | Web Formatter Blog

Introduction

When it comes to maintaining code quality in JavaScript and TypeScript projects, ESLint and Prettier are two essential tools that work together to ensure both code correctness and consistent formatting. While ESLint focuses on catching bugs and enforcing coding standards, Prettier handles code formatting with an opinionated approach.

This comprehensive guide explores how to integrate these tools using eslint-plugin-prettier, providing you with practical configurations and solutions for common use cases.

ESLint Basics

ESLint is a static code analysis tool that identifies problematic patterns in JavaScript code. It helps maintain code quality by enforcing style guidelines and catching potential errors.

Installation

# Using npm
npm install eslint --save-dev

# Using yarn
yarn add eslint --dev

Basic Configuration

ESLint configuration is typically stored in a{" "} .eslintrc.js, .eslintrc.json, or{" "} .eslintrc.yml file in your project root.

// .eslintrc.js
module.exports = {
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "indent": ["error", 2],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

Integrating Prettier with ESLint

While ESLint can handle some formatting rules, Prettier is specialized for code formatting. Integrating the two tools provides the best of both worlds: code quality checks from ESLint and consistent formatting from Prettier.

Installation

# Using npm
npm install prettier eslint-plugin-prettier eslint-config-prettier --save-dev

# Using yarn
yarn add prettier eslint-plugin-prettier eslint-config-prettier --dev

These packages serve the following purposes:

• prettier: The core Prettier formatting engine
• eslint-plugin-prettier: Runs Prettier as an ESLint rule
• eslint-config-prettier: Disables ESLint rules that might conflict with Prettier

eslint-plugin-prettier

eslint-plugin-prettier is a plugin that adds Prettier as an ESLint rule. It formats your code using Prettier and reports the differences as ESLint issues.

How It Works

The plugin works by:

1. Running Prettier on your files
2. Comparing the output with your original code
3. Reporting differences as ESLint issues
4. Automatically fixing those issues when you run ESLint with the{" "} --fix flag

Basic Setup

// .eslintrc.js
module.exports = {
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended" // This enables the plugin and config in one line
  ],
  "rules": {
    // Your other rules...
  }
}

The "plugin:prettier/recommended" preset does three things:

1. Enables eslint-plugin-prettier
2. Sets the "prettier/prettier" rule to "error"
3. Extends eslint-config-prettier to disable rules that conflict with Prettier

Configuration Options

You can customize how eslint-plugin-prettier works by configuring the "prettier/prettier" rule.

Passing Prettier Options

// .eslintrc.js
module.exports = {
  "extends": ["plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": ["error", {
      "singleQuote": true,
      "trailingComma": "es5",
      "printWidth": 100,
      "tabWidth": 2,
      "semi": false
    }]
  }
}

Using a Prettier Configuration File

Alternatively, you can keep your Prettier configuration in a separate file:

// .prettierrc.js
module.exports = {
  singleQuote: true,
  trailingComma: 'es5',
  printWidth: 100,
  tabWidth: 2,
  semi: false
}

With this approach, eslint-plugin-prettier will automatically use these settings.

Common Use Cases

TypeScript Integration

For TypeScript projects, you'll need additional configuration:

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

// .eslintrc.js
module.exports = {
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  }
}

React Integration

For React projects, add the React ESLint plugin:

npm install eslint-plugin-react --save-dev

// .eslintrc.js
module.exports = {
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

Next.js Integration

For Next.js projects, you can use the Next.js ESLint configuration:

npm install eslint-config-next --save-dev

// .eslintrc.js
module.exports = {
  "extends": [
    "next",
    "next/core-web-vitals",
    "plugin:prettier/recommended"
  ]
}

Troubleshooting

Conflicting Rules

If you're seeing conflicts between ESLint and Prettier rules, ensure you've properly set up eslint-config-prettier and that it's the last extension in your "extends" array.

Double Formatting Issues

If your code is being formatted twice (once by ESLint and once by Prettier), you might have Prettier running as both an ESLint rule and as a separate process. Consider using only one approach.

Performance Issues

If you're experiencing slow linting, consider:

• Using ESLint's cache option: eslint --cache
• Running Prettier and ESLint separately
• Using editor integrations that only check changed files

Best Practices

Editor Integration

Most modern code editors have plugins for both ESLint and Prettier:

• VS Code: ESLint and Prettier extensions
• WebStorm: Built-in support for both
• Sublime Text: SublimeLinter-eslint and JsPrettier

Pre-commit Hooks

Use tools like husky and lint-staged to run ESLint and Prettier on staged files before committing:

npm install husky lint-staged --save-dev

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix"
    ]
  }
}

CI/CD Integration

Add ESLint checks to your CI/CD pipeline to ensure code quality:

# .github/workflows/lint.yml
name: Lint

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  eslint:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '16'
    - name: Install dependencies
      run: npm ci
    - name: Run ESLint
      run: npm run lint

Conclusion

Integrating ESLint with Prettier using eslint-plugin-prettier provides a powerful workflow for maintaining both code quality and consistent formatting. By following the configurations and best practices outlined in this guide, you can ensure your codebase remains clean, consistent, and error-free.

Remember that while these tools are powerful, they should be configured to match your team's preferences and project requirements. Don't be afraid to customize the rules to fit your specific needs.