Question 1

What is Prettier?

Accepted Answer

Prettier is an opinionated code formatter supporting JavaScript, TypeScript, CSS, HTML, JSON, Markdown and more. It automatically formats code with consistent rules, eliminating style debates in team collaboration.

Question 2

How to configure Prettier?

Accepted Answer

Prettier config can be .prettierrc (JSON/YAML), prettier.config.js, or the prettier field in package.json. Key options include printWidth (line width), tabWidth (indent), semi (semicolons), singleQuote (quote style), and trailingComma.

Question 3

What's the difference between Prettier and ESLint?

Accepted Answer

Prettier focuses on code formatting (indentation, quotes, spacing), while ESLint focuses on code quality (errors, best practices, unused variables). They work together: ESLint finds issues, Prettier formats code. Use eslint-config-prettier to avoid conflicts.

🎨 Prettier Config Generator

⚙️ Basic Settings

🔧 Advanced Settings

📄 Generated Config