JavaScript Formatter – JS, JSX & TypeScript

Example

Before (minified)

const debounce=(fn,ms=300)=>{let t;return(...args)=>{clearTimeout(t);t=setTimeout(()=>fn.apply(this,args),ms)}};document.querySelector('#q').addEventListener('input',debounce(e=>search(e.target.value)))

After

const debounce = (fn, ms = 300) => {
  let t;
  return (...args) => {
    clearTimeout(t);
    t = setTimeout(() => fn.apply(this, args), ms);
  };
};
document.querySelector("#q").addEventListener(
  "input",
  debounce((e) => search(e.target.value)),
);

Use the same settings in your project

Save the options you picked as a .prettierrc file so editors and CI format code the same way:

.prettierrc

{
  "semi": true,
  "singleQuote": false,
  "trailingComma": "all",
  "tabWidth": 2,
  "printWidth": 80
}

Shell

npm install --save-dev prettier
npx prettier --write .        # format everything
npx prettier --check .        # fail CI if files aren't formatted

Formatting data rather than code? Use the JSON formatter, which keeps big numbers exact. For markup and styles, see the HTML formatter and CSS formatter.

Frequently asked questions

Can it unminify JavaScript?

It restores the layout: line breaks, indentation and spacing, so minified code becomes readable. It can’t restore the original variable names, which minifiers shorten to a, b, c, or comments that were stripped. For production bundles, a source map gives you the original source; check for a //# sourceMappingURL comment at the end of the file.

Is TypeScript and JSX supported?

Yes. JavaScript mode understands modern syntax and JSX (React, Preact, Solid). Switch to TypeScript for type annotations, interfaces, generics, enums, decorators and TSX.

Semicolons or no semicolons?

Both are valid. JavaScript inserts missing semicolons automatically (ASI), and the formatter adds a leading semicolon where leaving it out would change the meaning, for example before a line starting with ( or [. Pick one style for a project and let the formatter enforce it.

Does formatting change what my code does?

No. Prettier parses the code into a syntax tree and prints that tree again, so the program is the same; only whitespace, parentheses that don’t matter, quote style and trailing commas change. If the code has a syntax error, nothing is changed and the error position is shown.

How is this different from a linter like ESLint?

A formatter decides how code looks: line breaks, indentation, quotes. A linter finds likely bugs and bad patterns, such as unused variables or missing await. Most projects use both: Prettier for formatting and ESLint (or Biome, which does both) for code quality.