Prettier 08 🎨 JSX Formatting — jsxBracketSameLine and JSX-specific behavior - KandZ

⏱️ Estimated read: 9 min | |

JSX is not HTML, and it is not JavaScript. It is its own syntax with its own formatting rules. Prettier treats it accordingly: it wraps JSX in parentheses in return statements, it preserves double quotes for JSX attributes even when singleQuote is true for JavaScript, and it places the closing > of a multi-line tag according to a dedicated option. The jsxBracketSameLine option controlled that placement, but it was deprecated in Prettier 2.4 and replaced by the broader bracketSameLine option, which also covers HTML, Vue, and Angular .

Quick How-To Guides & Fast FixesNeed a quick fix or step-by-step solution? Browse our fast answers on HowTo.KandZ.me:

Operating Systems CLI →Dev Environment Languages →Web Network Tools →Security Accounts →Security Access Tech →Device Phone Basics →Social Messaging →Digital Files Media →

This chapter covers the bracketSameLine option (and its deprecated jsxBracketSameLine predecessor), the JSX-specific formatting that Prettier applies regardless of configuration, and the jsxSingleQuote option that decouples JSX attribute quotes from the rest of the file.

Key point: jsxBracketSameLine is deprecated. Use bracketSameLine instead. It controls whether the > of a multi-line tag sits on the last line or on its own line, and it applies to JSX, HTML, Vue, and Angular alike.

Why JSX formatting has its own rules

The HTML heritage problem. JSX was designed to look like HTML. HTML attributes are conventionally written with double quotes, and browser developer tools display them with double quotes regardless of the source. Prettier follows this convention: singleQuote: true changes JavaScript strings to single quotes, but JSX attributes remain double-quoted unless jsxSingleQuote is set separately . The two quote styles can coexist in the same file because they serve different syntactic purposes.

The semicolon problem. In JavaScript, a stray semicolon after a statement is harmless. In JSX, a stray semicolon inside the markup can end up as plain text on the page. Prettier wraps JSX in parentheses in return statements partly to make the boundaries explicit and reduce the chance of leaving a semicolon behind . The parentheses are not required by JSX, but they make the formatted output safer to edit.

The tag-close problem. A multi-line JSX element has two valid shapes for its closing angle bracket. It can sit on the last attribute’s line, or it can sit alone on the next line. The choice is visual, but it affects the diff when a new attribute is added. The option that controls this was originally named jsxBracketSameLine and later renamed to bracketSameLine when the same behavior was extended to HTML, Vue, and Angular .

a. The bracketSameLine option

The option is a boolean. false places the > on its own line; true places it on the last line of the tag.

{
  "bracketSameLine": false
}

With false, the default, a multi-line JSX element closes like this:

<button
  type="button"
  onClick={handleClick}
>
  Click
</button>

The > is on its own line, aligned with the opening <. This is the Prettier default and the form that many teams adopt because it makes the tag boundaries visually distinct.

With true, the > moves to the last attribute’s line:

<button
  type="button"
  onClick={handleClick}>
  Click
</button>

The option was introduced as jsxBracketSameLine in early Prettier versions and renamed to bracketSameLine in Prettier 2.4 . The old name is deprecated. A project still using jsxBracketSameLine in its configuration is using a deprecated key; the behavior is the same, but the key may be removed in a future major version. The React repository itself updated its .prettierrc to replace the deprecated key .

b. JSX-specific formatting that is not configurable

Several JSX formatting behaviors are not controlled by an option. They are part of Prettier’s core handling of the syntax.

Parentheses around JSX in return. A return statement that returns JSX is wrapped in parentheses, even if the JSX is a single element. This is a deliberate choice: it matches the style that many developers already used, and it makes the boundaries of the returned expression explicit .

function Greeting() {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  )
}

The parentheses are always added. They are not optional, and no configuration removes them.

Double quotes for JSX attributes. The singleQuote option applies to JavaScript strings. JSX attributes remain double-quoted unless jsxSingleQuote is set to true. The rationale is the HTML heritage: HTML attributes are conventionally double-quoted, and JSX follows that convention by default .

Escape preservation. Prettier maintains the way a string is escaped. A Unicode character written as an escape sequence is not converted to the literal character, and vice versa. This applies to JSX attributes as well as JavaScript strings .

c. The jsxSingleQuote option

The jsxSingleQuote option is separate from singleQuote. It controls only the quotes of JSX attributes.

{
  "singleQuote": true,
  "jsxSingleQuote": true
}

With both options set, JavaScript strings and JSX attributes both use single quotes. With only singleQuote set, JavaScript strings use single quotes and JSX attributes remain double-quoted. The two options are independent because the two contexts have different conventions .

A team that wants a uniform single-quote style across the entire file must set both options. A team that wants JavaScript single quotes and HTML-style double quotes in JSX sets only singleQuote.

Complete Example Session

// ============================================
// PART 1: THE CONFIGURATION
// ============================================
{
  "bracketSameLine": false
}

// ============================================
// PART 2: bracketSameLine: false (DEFAULT)
// ============================================
<button
  type="button"
  onClick={handleClick}
>
  Click
</button>

// ============================================
// PART 3: bracketSameLine: true
// ============================================
{
  "bracketSameLine": true
}

// ============================================
// PART 4: bracketSameLine: true OUTPUT
// ============================================
<button
  type="button"
  onClick={handleClick}>
  Click
</button>

// ============================================
// PART 5: THE DEPRECATED OPTION
// ============================================
{
  "jsxBracketSameLine": true
}

// Deprecated since Prettier 2.4.
// Use bracketSameLine instead.

// ============================================
// PART 6: JSX PARENTHESES IN RETURN
// ============================================
function Greeting() {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  )
}

// The parentheses are always added.
// They are not configurable.

// ============================================
// PART 7: QUOTE SEPARATION
// ============================================
{
  "singleQuote": true
}

// ============================================
// PART 8: SINGLE QUOTES IN JS, DOUBLE IN JSX
// ============================================
const message = 'Hello'

// JSX attribute remains double-quoted
<div className="container" />

// ============================================
// PART 9: jsxSingleQuote
// ============================================
{
  "singleQuote": true,
  "jsxSingleQuote": true
}

// ============================================
// PART 10: UNIFORM SINGLE QUOTES
// ============================================
const message = 'Hello'

// JSX attribute now uses single quotes
<div className='container' />

The ten parts covered the default false, the true value, the deprecated jsxBracketSameLine, JSX parentheses, quote separation, and jsxSingleQuote.

Quick Reference

bracketSameLine

Value	Output	Default
`false`	`>` on its own line	Yes
`true`	`>` on the last attribute line	No
Deprecated name	`jsxBracketSameLine`	Replaced in 2.4

JSX-specific options

Option	Scope	Default
`bracketSameLine`	JSX, HTML, Vue, Angular	`false`
`jsxSingleQuote`	JSX attributes only	`false`
`singleQuote`	JavaScript strings	`false`

Non-configurable JSX behavior

Behavior	Detail
Parentheses in `return`	Always added
Attribute quotes	Double by default
Escape sequences	Preserved

Best Practices

✅ Do This:

// Use bracketSameLine, not jsxBracketSameLine
{ "bracketSameLine": true }                                 // ✅

// Set jsxSingleQuote separately if single quotes are wanted in JSX
{ "singleQuote": true, "jsxSingleQuote": true }             // ✅

// Let Prettier add the parentheses in return
return (
  <div />
)                                                          // ✅

❌ Don’t Do This:

// Use the deprecated option name
{ "jsxBracketSameLine": true }                              // ❌

// Assume singleQuote affects JSX attributes
{ "singleQuote": true }  // JSX attributes stay double       // ❌

// Write JSX in return without parentheses and expect Prettier to keep it
return <div />  // Prettier adds parentheses                 // ❌

Common Pitfalls

Pitfall	Why It Happens	Fix
Configuration key is deprecated	`jsxBracketSameLine` still works but is deprecated	Rename to `bracketSameLine`
JSX attributes still double-quoted	`singleQuote` does not apply to JSX	Set `jsxSingleQuote: true`
Parentheses appear unexpectedly	Prettier always wraps JSX in `return`	Accept the behavior; it is not configurable
`bracketSameLine` affects HTML	It is the intended scope	The option covers HTML, Vue, and Angular

Real-World Examples

1. Default bracketSameLine

<button
  type="button"
>

2. bracketSameLine: true

<button
  type="button">

3. Deprecated key

{ "jsxBracketSameLine": true }

4. JSX parentheses

return (
  <div />
)

5. Double quotes in JSX

<div className="container" />

6. jsxSingleQuote

{ "jsxSingleQuote": true }

7. Single quotes in JSX

<div className='container' />

8. Escape preservation

<div title="🙂" />

9. The rename

jsxBracketSameLine → bracketSameLine (Prettier 2.4)

10. The scope

bracketSameLine applies to JSX, HTML, Vue, Angular.

Visual

bracketSameLine

┌─────────────────────────────────────────────────────────────┐
│  false (default)              true                           │
│                                                              │
│  <button                      <button                        │
│    type="button"                type="button"                │
│    onClick={fn}                 onClick={fn}>                │
│  >                                                           │
│    Click                        Click                        │
│  </button>                    </button>                      │
└─────────────────────────────────────────────────────────────┘

The quote separation

┌─────────────────────────────────────────────────────────────┐
│  singleQuote: true, jsxSingleQuote: false                    │
│                                                              │
│  const x = 'hello'         ← single quote (JS)              │
│  <div className="x" />      ← double quote (JSX)            │
│                                                              │
│  singleQuote: true, jsxSingleQuote: true                     │
│                                                              │
│  const x = 'hello'         ← single quote                   │
│  <div className='x' />      ← single quote                  │
└─────────────────────────────────────────────────────────────┘

The deprecated rename

┌─────────────────────────────────────────────────────────────┐
│  Prettier < 2.4: jsxBracketSameLine                          │
│  Prettier 2.4+:  bracketSameLine                             │
│                                                              │
│  The old key still works but is deprecated.                  │
│  The new key also covers HTML, Vue, Angular.                 │
└─────────────────────────────────────────────────────────────┘

JSX in return

┌─────────────────────────────────────────────────────────────┐
│  Prettier always adds parentheses:                           │
│                                                              │
│  return (                                                    │
│    <div />                                                   │
│  )                                                           │
│                                                              │
│  The parentheses are not configurable.                       │
└─────────────────────────────────────────────────────────────┘

Summary

Item	Value
Option	`bracketSameLine`
Deprecated name	`jsxBracketSameLine`
Default	`false`
`false` behavior	`>` on its own line
`true` behavior	`>` on the last attribute line
Scope	JSX, HTML, Vue, Angular
JSX attribute quotes	Controlled by `jsxSingleQuote`
JSX in `return`	Always wrapped in parentheses

Key takeaways:

jsxBracketSameLine is deprecated. It was renamed to bracketSameLine in Prettier 2.4, and the new name extends the same behavior to HTML, Vue, and Angular . The old key still works, but it should be replaced.
The option controls the closing > placement. With false (the default), the > sits on its own line. With true, it sits on the last attribute’s line. The choice is visual and affects the diff when an attribute is added.
JSX attributes are double-quoted by default, even with singleQuote: true. The jsxSingleQuote option is the separate switch for JSX attribute quotes. The two options are independent because JavaScript strings and HTML-style attributes have different conventions .
Prettier always wraps JSX in parentheses in return statements. This is not configurable. It matches common practice and reduces the risk of a stray semicolon appearing as page text .
The JSX formatting rules exist because JSX is neither JavaScript nor HTML. The parentheses and the quote separation are deliberate choices that reflect the syntax’s hybrid nature, not arbitrary style preferences.

Remember: jsxBracketSameLine is a deprecated name for bracketSameLine. Use the new key. The option controls where the closing > sits on a multi-line tag, and it applies to JSX, HTML, Vue, and Angular. JSX attributes are double-quoted by default; jsxSingleQuote is the option that changes them. Prettier always wraps JSX in parentheses in return statements, and that behavior is not configurable. The JSX rules are not arbitrary—they exist because JSX borrowed HTML’s conventions while living inside JavaScript’s syntax.

Was this helpful?

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!