# Introduction to Code Quality Tools — ESLint + Prettier

Source: https://www.geekswithgeeks.com/en/eslint-prettier/eslint-prettier-01

> Learn why ESLint and Prettier matter for professional development.

## The essential idea

**ESLint and Prettier** are complementary tools: ESLint catches errors and enforces code quality, while Prettier handles formatting. Together they ensure consistency and catch bugs early.

## See the workflow

ESLint checks for errors, Prettier formats code. They work together in your development pipeline.

![ESLint and Prettier workflow diagram.](assets/figures/eslint-prettier/eslint-prettier-workflow.svg) — Figure 1.1 — The complete quality workflow.

## Why this matters

Consistent code prevents merge conflicts, improves readability, and catches bugs automatically. Teams using ESLint and Prettier spend less time in code review.

Quick check

**Quiz:** What is the main difference between ESLint and Prettier?

- [x] ESLint catches errors; Prettier formats code.
- [ ] They do the same thing.
- [ ] Prettier catches errors; ESLint formats code.

*Answer:* ESLint catches errors; Prettier formats code.. ESLint is a linter (quality checker), Prettier is a code formatter. They complement each other.