How to format code
- Paste your code on the left, or open a file. The language is detected for you.
- Set print width, indentation, quotes, semicolons, and trailing commas.
- Copy the formatted result or download it.
Supported languages: JavaScript, TypeScript, JSX, TSX, JSON, CSS, SCSS, Less, HTML, Vue, Markdown, YAML, and GraphQL. Only the formatter for the language you use is downloaded, the first time you use it. HTML and Vue files also get their embedded scripts and styles formatted.
Questions
Is my code uploaded?
No. Prettier runs inside your browser tab, so your source code never leaves your device.
Which languages can it format?
JavaScript, TypeScript, JSX and TSX, JSON, CSS, SCSS, Less, HTML, Vue, Markdown, YAML, and GraphQL. It works as a JavaScript formatter, a TypeScript formatter, an HTML beautifier, a CSS formatter, and a JSON beautifier in one page.
Does formatting change what my code does?
No. Prettier only changes layout: spacing, line breaks, quotes, and commas. It checks the syntax first, so code with a syntax error is reported instead of being changed.
How does language auto-detect work?
When you open a file, its extension decides. For pasted code, the page looks at the first characters and keywords. If it guesses wrong, pick the language yourself from the list.
Why do some options look greyed out?
Semicolons and trailing commas only exist in JavaScript-like languages, so they are disabled for CSS, Markdown, and the rest.
Credits
Built on Prettier (MIT). OneTooling is not affiliated with that project.