JavaScript Formatter
Format JavaScript and JSX code with Prettier — choose indentation, line width, semicolons and quote style.
What is the JavaScript Formatter?
Consistent formatting removes style debates and makes code easier to review.
How does it work?
The code is parsed into a syntax tree with Babel and re-printed by Prettier. Syntax errors are reported instead of producing broken output.
Example
const f=(a,b)=>{return a+b} becomes neatly spaced, multi-line code.
What the formatter changes
The formatter uses Prettier, the most widely used code formatter for JavaScript. It reads your code into a syntax tree and prints it again from scratch with consistent rules. That means it fixes much more than indentation:
- Indentation and spacing around operators, commas and braces.
- Line breaks: long function calls, arrays and objects are wrapped to fit the line width, and short ones are joined onto one line.
- Quotes: all strings use single or double quotes, whichever you choose.
- Semicolons: added at the end of every statement, or removed where it is safe.
- Trailing commas in multi-line arrays, objects and parameter lists.
- JSX: attributes and child elements in React components are wrapped consistently.
What it does not change
Formatting never changes what the code does. Variable names, logic and comments are kept. Prettier does not reorder imports, remove unused variables or fix bugs; those are jobs for a linter such as ESLint.
If the code has a syntax error, such as a missing bracket, the formatter reports the line and column instead of guessing. Fix the error and format again.
Choosing the options
The most important thing is consistency across a project. If your project already has a .prettierrc file, use the same settings here so that pasted code matches the rest of the codebase.
| Option | Common choice | Why |
|---|
| Indentation | 2 spaces | The default in most JavaScript projects and style guides |
| Line width | 80 or 100 characters | Keeps side-by-side diffs readable |
| Semicolons | On | Avoids rare automatic-semicolon-insertion surprises |
| Quotes | Single | Common in JavaScript; JSX attributes still use double quotes |
Formatting in a project
- Install Prettier as a development dependency and add a .prettierrc file with your chosen options.
- Enable “format on save” in your editor; VS Code, WebStorm and most other editors support Prettier.
- Run a format check in continuous integration so unformatted code cannot be merged.
- Use this online formatter for quick snippets, code from chat messages or Stack Overflow, and machines where you cannot install tools.
Privacy
Formatting runs entirely in your browser. The code you paste is not uploaded, logged or stored, so it is safe to format proprietary code. Prettier is loaded only when you open this tool.
Frequently asked questions
Is my data sent to a server?
No. This tool runs entirely in your browser; nothing you paste is uploaded or stored.
Does formatting change behaviour?
No. Prettier only changes formatting, never the meaning of the code.
Can it format TypeScript or minified code?
Use the TypeScript formatter for TypeScript. Minified JavaScript can be formatted to make it readable, but variable names shortened during minification cannot be restored.
Related tools
Enable JavaScript to use this calculator.