Prettier

Prettier, the formatter for JavaScript, TypeScript, and Markdown.

Formats: JavaScript, TypeScript, Markdown
In ur.toml: [format] style = "prettier"
Its options: https://prettier.io/docs/options

JavaScript, formatted

cart.js, as written

// What a cart costs.
export function subtotal(items){let sum=0;for(const item of items){sum+=item.price*item.quantity}return sum}
export const label = item => item.name+' x'+item.quantity

ur format --style prettier cart.js

// What a cart costs.
export function subtotal(items) {
  let sum = 0;
  for (const item of items) {
    sum += item.price * item.quantity;
  }
  return sum;
}
export const label = (item) => item.name + " x" + item.quantity;

Try it in the playground →

TypeScript, formatted

cart.ts, as written

// What a cart costs.
interface Item {name:string,price:number,quantity:number}
export function subtotal(items:Item[]):number{return items.reduce((sum,item)=>sum+item.price*item.quantity,0)}

ur format --style prettier cart.ts

// What a cart costs.
interface Item {
  name: string;
  price: number;
  quantity: number;
}
export function subtotal(items: Item[]): number {
  return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
}

Try it in the playground →

Markdown, formatted

README.md, as written

# Cart
Adds up what a cart costs.
## Usage
- `subtotal(items)` adds up each item's price times its quantity.
- `label(item)` names an item and its quantity.

ur format --style prettier README.md

# Cart

Adds up what a cart costs.

## Usage

- `subtotal(items)` adds up each item's price times its quantity.
- `label(item)` names an item and its quantity.

Try it in the playground →

Defaults

The shared options, as Prettier sets them when nothing configures it. Its own names for them are read from its configuration files, but ur.toml sets them by the shared name only.

Option	Default	Prettier calls it
`width`	`80`	`printWidth`
`indent.width`	`2`	`tabWidth`
`indent.style`		`useTabs`
`line-ending`	`"lf"`	`endOfLine`
`trailing-comma.add`	`"multiline"`	`trailingComma`
`trailing-comma.forces-break`	`false`
`quotes`	`"double"`	`singleQuote`
`target`

Its own options

Set in a table named for it, such as [format.prettier], or in a language's table, as prettier = { ... }.

Option	Default	What it does
`arrow-parens`	`"always"`	Whether an arrow function's sole parameter is wrapped in parentheses: `always`, or `avoid` where it can be. Takes "always", "avoid".
`bracket-same-line`	`false`	End a multi-line JSX element's opening tag with its `>` on the last line rather than a line of its own. Takes true or false.
`object-wrap`	`"preserve"`	Whether an object written across lines stays expanded (`preserve`) or is joined onto one line when it fits (`collapse`). Takes "preserve", "collapse".
`bracket-spacing`	`true`	Put spaces just inside an object literal's braces, as in `{ a: 1 }`. Takes true or false.
`semi`	`true`	End every statement with a semicolon; when off, only where the next line would otherwise continue it. Takes true or false.
`experimental-operator-position`	`"end"`	Break a long binary expression before its operators (`start`) or after them (`end`). Takes "start", "end".
`experimental-ternaries`	`false`	Lay out conditional expressions in Prettier's experimental ternary style. Takes true or false.
`jsx-single-quote`	`false`	Write JSX attribute values in single quotes. Takes true or false.
`quote-props`	`"as-needed"`	When an object's property names are quoted: only where needed (`as-needed`), all or none in each object (`consistent`), or as written (`preserve`). Takes "as-needed", "consistent", "preserve".
`single-attribute-per-line`	`false`	Put each JSX attribute on a line of its own when an element breaks. Takes true or false.
`html-whitespace-sensitivity`	`"css"`	Whether whitespace around HTML elements counts as content: as CSS display makes it (`css`), always (`strict`), or never (`ignore`). Takes "css", "strict", "ignore".
`vue-indent-script-and-style`	`false`	Indent the contents of a Vue file's `<script>` and `<style>` tags. Takes true or false.
`prose-wrap`	`"preserve"`	Whether Markdown prose is wrapped at the line width (`always`), unwrapped (`never`), or left as written (`preserve`). Takes "always", "never", "preserve".
`check-ignore-pragma`	`false`	Leave files that begin with a `@noformat` or `@noprettier` comment as written. Takes true or false.
`insert-pragma`	`false`	Add an `@format` comment to the top of each file formatted. Takes true or false.
`require-pragma`	`false`	Format only the files that begin with an `@format` or `@prettier` comment. Takes true or false.
`embedded-language-formatting`	`"auto"`	Whether code embedded in another language, such as CSS in a template literal, is formatted (`auto`) or left as written (`off`). Takes "auto", "off".
`parser`		The parser that reads every file, in place of the one its extension chooses. Takes "flow", "babel", "babel-flow", "babel-ts", "typescript", "acorn", "espree", "meriyah", "css", "less", "scss", "json", "json5", "jsonc", "json-stringify", "graphql", "markdown", "mdx", "vue", "yaml", "glimmer", "html", "angular", "lwc", "mjml".
`filepath`		The path whose extension chooses the parser for input that has no path of its own. Takes a string.
`plugins`	`[]`	Prettier plugins to load, which are code Ur does not run. Takes a list of strings.
`range-start`	`0`	The character offset formatting starts at; the code before it is left as written. Takes a number.
`range-end`		The character offset formatting stops at; the code after it is left as written. Takes any value.