JS Formatter

What is JavaScript formatting?

JavaScript formatting re-prints code with consistent layout: one statement per line, a semicolon at the end of each, spaces around operators and after commas, and blocks indented. This formatter uses Prettier, which parses the code first, so regular expressions, template literals, comments, JSX, and statements that end at a line break keep their meaning, and code it can't parse gets an error with the line and column instead of broken output. Minify uses Terser. Both run in your browser.

How the formatter lays out JavaScript

Prettier parses the code with Babel and prints it from the syntax tree: one statement per line, each ending in a semicolon, spaces around operators and after commas and colons, braces on the same line as if, else, function, and class, and every block indented by 2 or 4 spaces, as you choose.

Lines are kept within 80 characters where the code allows it: a long call, array, object, or chain of conditions breaks across lines, and a list that breaks gets a comma after its last item too. Comments stay where they were, and blank lines between statements are kept (several in a row become one). JSX is laid out like HTML: an element that contains other elements puts each child on its own line, wrapped in parentheses.

What formatting changes, and what it keeps

The program itself is kept: names, values, regular expressions, template literals, comments, and the order of statements. Statements that end at a line break end there in the output too, so return followed by a new line still returns nothing, and Prettier writes the semicolon that makes that visible.

Prettier does change how some things are written, in ways JavaScript treats as identical: strings use double quotes unless that needs more escapes, quotes are removed from object keys that don't need them, arrow function parameters get parentheses, numbers are written in lowercase without trailing zeros (.50 becomes 0.5 and 0XFF becomes 0xff), extra parentheses and empty statements are removed, a missing semicolon is added, and lists broken across lines end with a comma.

Errors with line and column

Code that can't be parsed produces no output. Instead the tool shows where the problem is, such as "Line 1, column 12: Unexpected token." for an object that is never closed, and marks it in the editor. Go to error moves the cursor there.

Format for editing, minify for production

Readable code is for the people who maintain it; minified code is for the browser. Minify uses Terser with its default settings: it removes comments (except license comments such as /*! … */) and whitespace, removes code that can never run and unused local variables, shortens expressions, and renames local variables and parameters to one or two letters. Names other code can see, such as global variables and exports, are kept. Format while you work, and minify as a build step before deploying.

How to format JavaScript

1. 1Paste your code. Paste a function, module, or snippet into the input, or load the sample.
2. 2Choose Format or Minify. Format re-indents the code with 2 or 4 spaces, as you choose, and the output updates as you type; Minify compresses it. If the code can't be parsed, the error shows the line and column.
3. 3Copy the result. Copy the formatted or minified JavaScript into your project, or share a link to it.

Examples

function add(a,b){return a+b}const x=add(1,2);

function add(a, b) {
  return a + b;
}
const x = add(1, 2);

function f(){return
42}

function f() {
  return;
  42;
}

const re=/[{}]/g;const msg=`Total: ${items.map(i=>`${i.name} x${i.qty}`).join(", ")}`;

const re = /[{}]/g;
const msg = `Total: ${items.map((i) => `${i.name} x${i.qty}`).join(", ")}`;

const App=({title})=><div className="app"><h1>{title}</h1></div>;

const App = ({ title }) => (
  <div className="app">
    <h1>{title}</h1>
  </div>
);

if(ready){start()}else{wait()}

if (ready) {
    start();
} else {
    wait();
}

const a = {

Line 1, column 12: Unexpected token.

const sum = (a, b) => {
  return a + b;
};

const sum=(s,c)=>s+c;

/*! MyLib v1.0 | MIT */
// helper
function double(value) {
  return value * 2;
}
export { double };

/*! MyLib v1.0 | MIT */
function double(e){return 2*e}export{double};

What the formatter changes

Layout always changes; these are the other changes, all ones JavaScript treats as identical.

Frequently asked questions