Mellowfmt

Configure and compare options for Prettier and Oxfmt. Preview real-time changes and export your configuration.

Print Width

printWidth

Specify the line length that the printer will wrap on. For readability, it is recommended not to exceed 80 characters.

CLI: --print-width <int>API: printWidth: <int>

Standard line width for readability

function example() {
  const message = "Hello";
  return message;
}

Tab Width

tabWidth

Specify the number of spaces per indentation-level.

CLI: --tab-width <int>API: tabWidth: <int>

function example() {
  if (true) {
    return "nested";
  }
}

Tabs

useTabs

Indent lines with tabs instead of spaces.

CLI: --use-tabsAPI: useTabs: <bool>

Use spaces for indentation

function example() {
  return "spaces";
}

Semicolons

semi

Print semicolons at the ends of statements.

CLI: --no-semiAPI: semi: <bool>

Add a semicolon at the end of every statement

const greeting = "Hello";
const name = "World";
console.log(greeting, name);

Quotes

singleQuote

Use single quotes instead of double quotes. JSX quotes ignore this option.

CLI: --single-quoteAPI: singleQuote: <bool>

Use double quotes

const greeting = "Hello";
const message = "It's a nice day";

Quote Props

quoteProps

Change when properties in objects are quoted.

CLI: --quote-props <as-needed|consistent|preserve>API: quoteProps: "<as-needed|consistent|preserve>"

Only add quotes around object properties where required

const obj = {
  foo: "bar",
  "foo-bar": "baz",
  123: "number"
};

JSX Quotes

jsxSingleQuote

Use single quotes instead of double quotes in JSX.

CLI: --jsx-single-quoteAPI: jsxSingleQuote: <bool>

Use double quotes in JSX

<button
  className="btn"
  id="submit"
  onClick={handleClick}
>
  Click Me
</button>

Trailing Commas

trailingComma

Print trailing commas wherever possible in multi-line comma-separated syntactic structures.

CLI: --trailing-comma <all|es5|none>API: trailingComma: "<all|es5|none>"

Trailing commas wherever possible (including function parameters)

const obj = {
  foo: "bar",
  baz: "qux",
};

function example(
  param1,
  param2,
) {
  return [
    item1,
    item2,
  ];
}

Bracket Spacing

bracketSpacing

Print spaces between brackets in object literals.

CLI: --no-bracket-spacingAPI: bracketSpacing: <bool>

Spaces inside brackets

const obj = { foo: bar };
import { useState } from "react";

Object Wrap

objectWrap

Configure how Prettier wraps object literals when they could fit on one line or span multiple lines.

CLI: --object-wrap <preserve|collapse>API: objectWrap: "<preserve|collapse>"

Keep as multi-line if there is a newline between opening brace and first property

const expanded = {
  foo: "bar",
  baz: "qux",
};

const compact = { foo: "bar", baz: "qux" };

Bracket Line

bracketSameLine

Put the > of a multi-line HTML (HTML, JSX, Vue, Angular) element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).

CLI: --bracket-same-lineAPI: bracketSameLine: <bool>

Bracket on its own line

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}
>
  Click Here
</button>

Arrow Function Parentheses

arrowParens

Include parentheses around a sole arrow function parameter.

CLI: --arrow-parens <always|avoid>API: arrowParens: "<always|avoid>"

Always include parens

const add = (x) => x + 1;
const multiply = (x) => (y) => x * y;
const greet = (name) => `Hello, ${name}!`;

Prose Wrap

proseWrap

By default, Prettier will not change wrapping in markdown text since some services use a linebreak-sensitive renderer.

CLI: --prose-wrap <always|never|preserve>API: proseWrap: "<always|never|preserve>"

Do nothing, leave prose as-is

This is a long line of text that will remain on a single line regardless of the print width setting.

This paragraph
has intentional
line breaks.

HTML Whitespace Sensitivity

htmlWhitespaceSensitivity

Specify the global whitespace sensitivity for HTML, Vue, Angular, and Handlebars.

CLI: --html-whitespace-sensitivity <css|strict|ignore>API: htmlWhitespaceSensitivity: "<css|strict|ignore>"

Respect the default value of CSS display property

<span class="dolorum atque aspernatur">Est molestiae sunt facilis qui rem.</span>
<div class="voluptatem architecto">
  Architecto rerum architecto.
</div>

Single Attribute Per Line

singleAttributePerLine

Enforce single attribute per line in HTML, Vue, and JSX.

CLI: --single-attribute-per-lineAPI: singleAttributePerLine: <bool>

Do not enforce single attribute per line

<button className="btn" id="submit" type="button">
  Submit
</button>

End of Line

endOfLine

Specify the line ending style. LF is common on Linux and macOS, CRLF is common on Windows.

Line Feed only (\n), common on Linux/macOS and in git repos

const a = 1;
const b = 2;
// Lines end with \n

Embedded Language Formatting

embeddedLanguageFormatting

Control whether Prettier formats quoted code embedded in the file.

CLI: --embedded-language-formatting=<off|auto>API: embeddedLanguageFormatting: "<off|auto>"

Format embedded code if Prettier can automatically identify it

const html = /* html */ `
  <div class="container">
    <p>Formatted HTML</p>
  </div>
`;

Experimental Ternaries

experimentalTernaries

Try prettier's new ternary formatting before it becomes the default behavior.

CLI: --experimental-ternariesAPI: experimentalTernaries: <bool>

Keep question marks on the same line as the consequent

const result = condition1
  ? value1
  : condition2
  ? value2
  : value3;

Oxfmt Options

These options are exclusive to Oxfmt, a blazingly fast Rust-based JavaScript formatter.

Object Wrap (Always)

objectWrap

Oxfmt extends the objectWrap option with an additional "always" value that forces object literals to always span multiple lines, even if they could fit on one line.

CLI: --object-wrap <preserve|collapse|always>API: objectWrap: "<preserve|collapse|always>"

Keep as multi-line if there is a newline between opening brace and first property

const expanded = {
  foo: "bar",
};

Insert Final Newline

insertFinalNewline

Whether to insert a final newline at the end of the file.

CLI: --insert-final-newlineAPI: insertFinalNewline: <bool>

Add a newline at the end of every file

const message = "Hello";
export default message;
// File ends with a newline ↵

Experimental Sort Imports

experimentalSortImports

Sort import statements automatically. Supports custom groups, internal patterns, case sensitivity, and partitioning by comments or newlines.

CLI: --experimental-sort-importsAPI: experimentalSortImports: { ... }

Do not sort import statements

import { z } from 'Zod';
import { client } from 'axios';
import fs from 'node:fs';
import path from 'node:path';
import { theme } from '@/Beta/theme';
import { cn } from '@/alpha/utils';

Experimental Sort Package.json

experimentalSortPackageJson

Automatically sort keys in `package.json` files according to a conventional order.

CLI: --experimental-sort-package-jsonAPI: experimentalSortPackageJson: <bool>

Sort package.json keys in conventional order

{
  "name": "my-package",
  "version": "1.0.0",
  "description": "A package",
  "main": "index.js",
  "scripts": { ... },
  "dependencies": { ... },
  "devDependencies": { ... }
}

Experimental Tailwind CSS

experimentalTailwindcss

Enable Tailwind CSS class sorting in JSX class/className attributes. Supports custom attributes, functions (like clsx, cn, cva), and Tailwind v3/v4 configuration.

CLI: --experimental-tailwindcssAPI: experimentalTailwindcss: { ... }

Do not sort Tailwind CSS classes

<div className="text-red-500 p-4 flex items-center bg-white mt-2">
  Content
</div>

Ignore Patterns

ignorePatterns

Glob patterns to ignore files when formatting. Uses the current working directory as the root.

CLI: --ignore-pattern <glob>API: ignorePatterns: ["<glob>", ...]

No files are ignored by default

// All files are formatted
// src/index.ts ✓
// dist/bundle.js ✓
// node_modules/pkg/index.js ✓