Developer guide
How to format JavaScript without running it
JavaScript formatting parses source and prints it consistently, making control flow and nesting easier to review without executing the program.
Open the JavaScript FormatterWhat a JavaScript formatter changes
A formatter can normalize indentation, line breaks, quotes, semicolons, parentheses, and wrapping. Because it works from a parsed syntax tree, the output may look different while retaining the parsed program meaning.
Formatting does not fix incorrect logic, resolve imports, bundle packages, or make new syntax run in old browsers.
How to format JavaScript
- Paste JavaScript or open a UTF-8 source file.
- Choose two spaces, four spaces, or tabs.
- Select Format JavaScript.
- Correct any parser error before trying again.
- Review the diff, then copy or download the result.
The ToolPixels formatter uses Prettier with its Babel parser for JavaScript and JSX. It does not support TypeScript on this page, and submitted code is never run.
A formatting example
Input
const greet=(name)=>{if(name){return `Hello, ${name}`}}
Readable output
const greet = (name) => {
if (name) {
return `Hello, ${name}`;
}
};
Formatting versus other build steps
| Tool | Purpose |
|---|---|
| Formatter | Consistent source layout |
| Linter | Project rules and likely mistakes |
| Transpiler | Convert syntax for a target runtime |
| Bundler | Resolve and package modules |
Review points after formatting
- Check automatic semicolon insertion boundaries.
- Confirm the parser matched JavaScript or JSX rather than TypeScript.
- Run the project's tests and linter.
- Avoid mixing a one-off format with repository-wide settings.
- Keep generated or vendored files out of broad formatting changes when appropriate.
Use the browser tool
Format JavaScript or JSX locally with selectable indentation. The source is parsed as text and never executed.