Prettier Online Formatter

What Is Prettier?

Prettier is an opinionated code formatter created by James Long in 2017 and now maintained by the open-source community. It is the most widely adopted code formatter in the JavaScript ecosystem, used by millions of developers and teams worldwide.

Unlike linters (like ESLint), Prettier doesn't check your code for errors — it solely focuses on consistent style. It re-prints your entire code from scratch using its own rules, ensuring every file in your project looks identical regardless of who wrote it.

Languages Supported by Prettier

Key Prettier Options Explained

printWidth (default: 80)

The line length at which Prettier will try to wrap code. This is a soft limit — Prettier will only break lines when it helps readability. Most teams use 80 (terminal standard) or 100–120 (wide monitor friendly).

tabWidth (default: 2)

The number of spaces per indentation level. Most JavaScript projects use 2; Python and some others use 4.

useTabs (default: false)

Use hard tab characters instead of spaces for indentation. Tabs are preferred by some accessibility advocates since they can be resized by the reader.

singleQuote (default: false)

Use single quotes instead of double quotes for strings. In JSX, Prettier always uses double quotes regardless of this setting.

semi (default: true)

Add semicolons at the end of statements. Some teams prefer the "no-semicolons" style (Standard JS) — set this to false.

trailingComma (default: "all")

Add trailing commas to multi-line structures:

• "all" — Trailing commas everywhere valid in ES5+ (recommended)
• "es5" — Trailing commas in objects/arrays only
• "none" — No trailing commas

bracketSpacing (default: true)

Add spaces around object literals: { foo: bar } vs {foo: bar}.

arrowParens (default: "always")

Include parentheses around a sole arrow function argument: (x) => x vs x => x. The "always" default makes refactoring easier.

Why Use Prettier?

• Eliminates style debates — No more PR comments about spacing, quotes, or commas. Prettier is the arbiter.
• Saves developer time — Stop thinking about formatting. Write code, hit save (or Ctrl+Enter), it's formatted.
• Works with every editor — VS Code, JetBrains, Vim, Emacs, Sublime Text all have Prettier plugins.
• CI integration — Run prettier --check . in CI to fail builds with unformatted code.
• Works with ESLint — Use eslint-config-prettier to disable ESLint rules that conflict with Prettier.

Setting Up Prettier in Your Project

# Install
npm install --save-dev prettier

# Format all files
npx prettier --write .

# Check (for CI)
npx prettier --check .

# Format specific file types
npx prettier --write "src/**/*.{js,ts,css}"

Example .prettierrc config

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

Prettier vs ESLint — What's the Difference?

This is one of the most common questions for JavaScript developers:

• Prettier — handles formatting (whitespace, indentation, line length, quotes). It doesn't care about bugs.
• ESLint — handles code quality (unused variables, potential bugs, security issues). It can also do some formatting but Prettier does it better.
• They are complementary — use both together. Disable ESLint's formatting rules with eslint-config-prettier so they don't conflict.

How to Use This Online Prettier Tool

1. Paste your code in the left panel
2. Select the correct language from the dropdown
3. Adjust options (print width, quotes, semicolons) as needed
4. Click Format with Prettier or press Ctrl+Enter
5. Copy the formatted output or download the file