JavaScript Formatter

Beautify JavaScript, TypeScript and JSX code.

JavaScript or TypeScript235 characters

Language

Print width

Add semicolons

Use single quotes

Indent size

What does JavaScript Formatter do?

Format JavaScript, TypeScript, JSX and TSX with a real parser rather than regular expressions, so the output is always syntactically identical to the input. Configurable indentation, quotes, semicolons and line width.

How to Use JavaScript Formatter

1
Paste your codeJS, TS, JSX or TSX.
2
Set your preferencesIndentation, quotes, semicolons, line width.
3
Copy the formatted codeOr download it as a file.

Key Features

Parses the code properly, so formatting can never change behaviour
JavaScript, TypeScript, JSX and TSX all supported
Configurable indent width, quote style, semicolons and print width
Syntax errors reported with the exact position
Formatter loaded only when you use it, so it does not slow the page down

Frequently Asked Questions

Can formatting break my code?

No. The code is parsed into a syntax tree and printed back out, so the program is identical. Only whitespace, quote style and line breaks change.

Does it support TypeScript?

Yes, including type annotations, generics, decorators and enums. Select the TypeScript parser so type syntax is understood rather than rejected.

What print width should I use?

80 is the traditional default; 100 or 120 suits modern wide screens. The setting is a guide, not a hard limit — the formatter breaks at sensible points, not mid-expression.