Shiklo Tools
PDF40
Image20
Calculators & Converters25
Text & Writing13
Developer26
Video14
Audio14
Document14
Data & Spreadsheet12
Web & SEO9
OCR & Scanning5
Archive & File12
Security & Privacy23
Health & Medical29
QR & Barcode5

JavaScript Formatter

Beautify JavaScript, TypeScript, JSX and JSON with Prettier: indent, quotes, semicolons and line width. Syntax errors with line and column. Private.

Turn minified, cramped or inconsistently written JavaScript into clean, readable code. The JavaScript Formatter uses Prettier, the formatter used by millions of developers, so the result looks the way most modern projects format their code. It handles JavaScript, JSX for React, TypeScript and JSON, and lets you choose the indent, the line width, single or double quotes, semicolons and trailing commas.

If the code has a syntax error, the formatter shows the line and column where parsing stopped, which makes it a quick syntax checker too. It all runs in your browser: your source code is never uploaded.

How to use JavaScript Formatter

  1. Paste your code, open a .js, .ts, .jsx or .json file, or click Sample.
  2. Choose the language: JavaScript / JSX, TypeScript or JSON.
  3. Set the indent (2, 4 or Tab), line width (80, 100 or 120), quotes, semicolons and trailing commas.
  4. Copy or download the formatted code. Fix any error shown with its line and column.

Features

  • Powered by Prettier, the most widely used JavaScript code formatter.
  • JavaScript (ES2024 and later), JSX, TypeScript and JSON.
  • Indent with 2 spaces, 4 spaces or tabs.
  • Line width of 80, 100 or 120 characters.
  • Semicolons on or off; single or double quotes.
  • Trailing commas: all, ES5 only, or none.
  • Syntax errors shown with the line and column.
  • The TypeScript parser loads only when you choose TypeScript.
  • Private: code is formatted in your browser and never uploaded.

How the formatter works

Prettier does not just add line breaks. It parses the code into a syntax tree, throws away the original layout, and prints the tree again using consistent rules. Lines longer than the chosen width are wrapped at the most natural point, such as between function arguments or object properties, and short expressions are kept on one line. Because the output depends only on the code and the options, formatting the same code twice gives exactly the same result, which is why teams use it to end arguments about style.

Options explained

The defaults match Prettier's own defaults, which most open-source projects use. Change them to match your project's style.

OptionChoicesWhat it does
LanguageJavaScript / JSX, TypeScript, JSONWhich parser reads the code
Indent2, 4, TabWidth of each indentation level
Line width80, 100, 120Lines longer than this are wrapped where possible
Trailing commasAll, ES5, NoneCommas after the last item in lists, objects and arguments
SemicolonsOn or offOff removes semicolons and adds them only where needed for safety
Single quotesOn or offUse single quotes for strings unless that needs more escaping

Unminifying JavaScript

Minified scripts from websites are squeezed onto one line to load faster. Pasting such code here spreads it over many readable lines with proper indentation, which helps when you need to debug a library, inspect what a script does, or understand a bundle. Formatting cannot restore the original variable names if the minifier shortened them to single letters, but the structure of the code becomes clear again.

Finding syntax errors

The formatter must parse the code completely before it can print it. If there is a missing bracket, an extra comma in the wrong place or a stray character, it stops and shows the message with the line and column, and the input is marked at that spot. Pick the right language first: TypeScript-only syntax such as as casts and enums is an error when JavaScript is selected, code is an error when JSON is selected, and comments are not allowed in strict JSON.

Same output as your editor

This page uses Prettier 3, the same formatter that runs in VS Code, WebStorm and most build pipelines. With the same options, the code you format here matches what your editor's Prettier extension produces, so you can paste the result into your project without creating noisy changes.

Frequently asked questions

Is the JavaScript formatter free and private?

Yes. It is free with no sign-up, and the code is formatted entirely in your browser. Nothing is uploaded or saved.

Does formatting change what my code does?

No. Prettier only changes layout: spaces, line breaks, quotes and optional semicolons and commas. The program behaves exactly the same.

Can it format TypeScript and React JSX?

Yes. Choose TypeScript for .ts and .tsx files. JSX is supported by the JavaScript / JSX option.

Why do I see a syntax error?

The code could not be parsed, for example because of a missing bracket or a wrong language choice. The message gives the line and column where the parser stopped.

Can it unminify or deobfuscate code?

It unminifies by restoring line breaks and indentation. It cannot bring back original variable names that a minifier removed.

Which Prettier version is used?

Prettier 3.9, loaded from this site. With the same options, the output matches the Prettier extension in your editor.

Can I format JSON here?

Yes, choose JSON. For JSON with extra features such as sorting keys, tree view and repair, use the JSON Formatter.

Related tools