What is Prettier and how does it differ from ESLint?

prettier

formatting

code-style

eslint

Quick Answer

Prettier is an opinionated code formatter that automatically formats code for consistent style. Unlike ESLint (which checks code quality and some style), Prettier only handles formatting. Use both together: ESLint for bugs, Prettier for formatting.

Detailed Explanation

Prettier vs ESLint:

ESLint:

Code quality rules
Catches bugs/errors
Some formatting rules
Configurable rules

Prettier:

Only formatting
Opinionated (few options)
Consistent output
Fast auto-format

Using Together:

ESLint for code quality
Prettier for formatting
eslint-config-prettier to avoid conflicts

Prettier Philosophy:

Minimal config options
End style debates
Format on save

Code Examples

Prettier configuration

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "bracketSpacing": true,
  "arrowParens": "always"
}

// .prettierignore
node_modules/
dist/
build/
coverage/
*.min.js

Resources

Prettier Documentation

docs

What is Prettier and how does it differ from ESLint?

Detailed Explanation

Code Examples

Resources

Prettier Documentation

Related Questions

What is Prettier and how does it differ from ESLint?

Detailed Explanation

Code Examples

Resources

Prettier Documentation

Related Questions