[Deprecated] JSX Brackets

2025-06-06

以前のPrettierの動作（このオプションが存在していた頃）

かつてPrettierにはjsxBracketSameLineというオプションがありました。これは、JSXタグの最後の>を、開くタグの属性の最後の行と同じ行に配置するか、それとも新しい行に配置するかを制御するものでした。

jsxBracketSameLine: false

<MyComponent
  attribute="value"
  anotherAttribute={someValue}
>                                // 閉じ括弧が新しい行
  <p>Hello</p>
</MyComponent>

<MyComponent
  attribute="value"
  anotherAttribute={someValue} >  // 閉じ括弧が属性と同じ行
  <p>Hello</p>
</MyComponent>

なぜ「Deprecated」（非推奨）になったのか？

Prettierの開発チームは、このjsxBracketSameLineオプションがほとんど使われておらず、コードの可読性を一貫して向上させるものではないと判断しました。また、Prettierの哲学として、設定オプションを最小限に抑え、一貫したフォーマットを提供することを目指しています。

そのため、Prettierの特定のバージョン（おそらく2.0以降）でこのオプションは非推奨となり、最終的には削除されました。

現在、PrettierはjsxBracketSameLineオプションに関わらず、JSXタグの閉じ括弧（>）の配置に関して、独自の判断に基づいて最適なフォーマットを適用します。 一般的には、タグの属性が複数行にわたる場合、閉じ括弧は新しい行に配置されることが多いです。

例：

<MyComponent
  attribute="value"
  anotherAttribute={someValue}
>
  <p>Hello</p>
</MyComponent>

または、属性が1行に収まる場合：

<MyComponent attribute="value" anotherAttribute={someValue}>
  <p>Hello</p>
</MyComponent>

「[Deprecated] JSX Brackets」は、かつてPrettierに存在した、JSXの閉じ括弧（>）の位置を制御するjsxBracketSameLineというオプションが、もはや使われておらず、非推奨となり、最終的に削除されたことを指します。

Prettier の [Deprecated] JSX Brackets に関する一般的なエラーとトラブルシューティングは、このオプションがすでに非推奨となり削除されているため、主に古い Prettier の設定や、関連するツール（ESLintなど）との連携による問題に起因します。

「Deprecated」オプションに関する一般的なエラーとその意味

現在、jsxBracketSameLine オプションは Prettier の公式ドキュメントには存在せず、使用すると警告が出るか、単に無視される可能性があります。

- 意味
  最も一般的なパターンです。prettier.config.js や .prettierrc などの Prettier 設定ファイル、または CLI コマンドで jsxBracketSameLine オプションを使用している場合に表示されます。このオプションはもうサポートされていませんよ、という Prettier からの通知です。
- 原因
  Prettier のバージョンアップ（主に2.0以降）に伴い、このオプションが非推奨となり、最終的には削除されました。
- トラブルシューティング
  - 設定ファイルから削除する
    .prettierrc, prettier.config.js などの設定ファイルから jsxBracketSameLine: true や jsxBracketSameLine: false の記述を完全に削除してください。
  - CLI オプションの確認
    もし Prettier をコマンドラインで実行している場合、--jsx-bracket-same-line のようなオプションを使用していないか確認し、削除してください。
  - エディタの設定確認
    VS Codeなどのエディタの拡張機能が古い設定を保持している場合があります。エディタの設定（例: VS Codeの settings.json）を確認し、関連する設定を削除してください。
  - 連携ツールの設定確認
    ESLint や Stylelint など、Prettier と連携しているツールがある場合、それらの設定ファイル（例: .eslintrc.js）内で Prettier 関連の設定がこの古いオプションを参照していないか確認してください。
フォーマットが期待通りにならない（以前の jsxBracketSameLine の動作を期待している場合）
- 意味
  jsxBracketSameLine: true のように、JSX の閉じ括弧を同じ行に維持するフォーマットを期待しているにもかかわらず、Prettier が閉じ括弧を新しい行に移動してしまう。
- 原因
  前述の通り、jsxBracketSameLine オプションは削除されました。現在の Prettier は、このフォーマットをユーザーが制御するのではなく、独自の判断に基づいて最適なスタイルを適用します。一般的に、属性が複数行にわたるJSX要素では、閉じ括弧は新しい行に配置される傾向があります。
- トラブルシューティング
  - Prettier の現在の動作を受け入れる
    このフォーマットの変更は、Prettier の設計思想によるものです。Prettier は「意見のあるフォーマッター」であり、一部のフォーマットに関する選択肢をユーザーに提供しないことで、一貫性と設定の手間を減らすことを目指しています。多くの場合、これは慣れの問題であり、プロジェクト全体で一貫したスタイルが適用されることのメリットの方が大きいです。
  - 代替案を探す（推奨されないが、やむを得ない場合）
    どうしても特定のフォーマットにこだわりたい場合は、Prettier 以外のフォーマッターを検討するか、Prettier のルールを上書きするために他のリンター（ESLintなど）と併用する方法もあります。しかし、これは Prettier の哲学に反し、設定が複雑になり、競合が発生する可能性が高いため、強く推奨されません。

「[Deprecated] JSX Brackets」に限らず、Prettier のオプション関連で問題が発生した場合の一般的なトラブルシューティング手順は以下の通りです。

Prettier のバージョンを確認する
- プロジェクトで使用している Prettier のバージョンを確認します (package.json または npm list prettier)。
- 公式ドキュメントで、そのバージョンにおけるオプションの状況を確認します。古いバージョンを使用している場合は、最新版にアップデートすることも検討してください。
設定ファイルを確認する
- .prettierrc, prettier.config.js, .prettierrc.json, .prettierrc.yaml など、プロジェクト内のすべての Prettier 設定ファイルを確認し、非推奨のオプションが残っていないか調べます。
エディタの設定を確認する
- VS Code、Sublime Text、WebStorm などのエディタに Prettier 拡張機能を入れている場合、エディタ自体の設定（例: settings.json）で Prettier オプションが設定されていないか確認します。エディタ固有の設定がプロジェクトの設定を上書きしている場合があります。
リンター（ESLintなど）との連携を確認する
- ESLint と Prettier を併用している場合、eslint-config-prettier や eslint-plugin-prettier などのプラグインを使用しているはずです。これらの設定が、Prettier の動作に影響を与えたり、古いオプションを参照したりしていないか確認します。
- ESLint のルールが Prettier のフォーマットと競合している場合、eslint-config-prettier を使用して競合する ESLint のフォーマットルールを無効にすることが推奨されます。
キャッシュをクリアする
- 稀に、エディタやビルドツールがキャッシュを保持していて、設定変更が反映されない場合があります。エディタの再起動、node_modules の削除と再インストール (rm -rf node_modules && npm install)、ビルドキャッシュのクリアなどを試してみてください。

「[Deprecated] JSX Brackets」は、Prettier のオプションである jsxBracketSameLine が非推奨となり、削除されたことを指します。したがって、具体的な「プログラミングに関連する例コード」というのは、このオプションが有効だった頃のコードと、それが非推奨になった後の Prettier の動作の違いを示すものになります。

以下に、それぞれの状況での JSX コードのフォーマット例と、設定ファイルでの扱いの変化を説明します。

jsxBracketSameLine オプションが有効だった頃（Prettier 1.x 系まで）

このオプションが存在していた頃は、ユーザーが JSX タグの閉じ括弧（>）の位置を制御できました。

1-1. `jsxBracketSameLine: true` の場合

Prettier の設定ファイル（例: .prettierrc.json）に以下のように記述します。

// .prettierrc.json
{
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "jsxBracketSameLine": true // このオプションが有効だった頃
}

この設定の場合、以下のソースコードは、Prettier によって次のようにフォーマットされます。

ソースコードの例

// Before Prettier formatting
const MyComponent = () => (
  <div
    className="container"
    data-test="my-component"
    onClick={() => console.log('clicked')}
  >
    <span>Hello, world!</span>
  </div>
);

const AnotherComponent = () => (
  <MyChildComponent
    propA="valueA"
    propB={someValue}
    propC={anotherValue}
  >
    <p>Some content</p>
  </MyMyChildComponent>
);

jsxBracketSameLine: true でフォーマット後
（特に属性が複数行にわたる場合、閉じ括弧が最後の属性と同じ行に配置されます）

const MyComponent = () => (
  <div
    className="container"
    data-test="my-component"
    onClick={() => console.log('clicked')} > // ここに注目
    <span>Hello, world!</span>
  </div>
);

const AnotherComponent = () => (
  <MyChildComponent
    propA="valueA"
    propB={someValue}
    propC={anotherValue} > // ここに注目
    <p>Some content</p>
  </MyMyChildComponent>
);

1-2. `jsxBracketSameLine: false` の場合（またはデフォルト）

jsxBracketSameLine: false を明示的に設定するか、このオプションを指定しない場合のデフォルト（当時は）は、閉じ括弧が新しい行に配置されていました。

// .prettierrc.json
{
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "jsxBracketSameLine": false // このオプションが有効だった頃
}

上記のソースコードを、jsxBracketSameLine: false でフォーマットした場合：

jsxBracketSameLine: false でフォーマット後

const MyComponent = () => (
  <div
    className="container"
    data-test="my-component"
    onClick={() => console.log('clicked')}
  > // ここに注目
    <span>Hello, world!</span>
  </div>
);

const AnotherComponent = () => (
  <MyChildComponent
    propA="valueA"
    propB={someValue}
    propC={anotherValue}
  > // ここに注目
    <p>Some content</p>
  </MyMyChildComponent>
);

jsxBracketSameLine オプションが非推奨・削除された後（Prettier 2.x 系以降）

Prettier 2.0 以降、jsxBracketSameLine オプションは非推奨となり、最終的には削除されました。現在では、Prettier が独自のルールに基づいて最適なフォーマットを適用します。

2-1. 非推奨オプションを使用した場合の警告

もし、現在の Prettier の設定ファイルに jsxBracketSameLine が残っている場合、Prettier を実行すると以下のような警告が表示されることがあります。

[warn] Deprecated: Option "jsxBracketSameLine" is deprecated.
[warn] It has been renamed to "bracketSameLine".

注釈
上記の警告メッセージの「It has been renamed to "bracketSameLine".」は、HTML や Vue のテンプレートなど、JSX以外の部分における bracketSameLine オプションへの移行を示唆している可能性がありますが、JSXの閉じ括弧の配置に関しては、このオプションでは制御できなくなっています。Prettier のドキュメントでは、bracketSameLine は HTML、Vue、Angular、Ember などのテンプレートのリントに関するオプションとして説明されています。JSXには適用されません。

2-2. 現在の Prettier の動作（オプション削除後）

jsxBracketSameLine オプションは削除されたため、Prettier は以下のソースコードを、ユーザーの設定に関わらず、独自のルールでフォーマットします。

ソースコードの例

// Before Prettier formatting
const MyComponent = () => (
  <div
    className="container"
    data-test="my-component"
    onClick={() => console.log('clicked')}
  >
    <span>Hello, world!</span>
  </div>
);

const AnotherComponent = () => (
  <MyChildComponent
    propA="valueA"
    propB={someValue}
    propC={anotherValue}
  >
    <p>Some content</p>
  </MyMyChildComponent>
);

const SimpleComponent = () => (
  <div className="simple-div">Hello</div>
);

現在の Prettier でフォーマット後
（属性が複数行にわたる場合は閉じ括弧が新しい行に、1行に収まる場合は同じ行に配置される傾向があります）

const MyComponent = () => (
  <div
    className="container"
    data-test="my-component"
    onClick={() => console.log('clicked')}
  > {/* 属性が複数行の場合、閉じ括弧は新しい行 */}
    <span>Hello, world!</span>
  </div>
);

const AnotherComponent = () => (
  <MyChildComponent
    propA="valueA"
    propB={someValue}
    propC={anotherValue}
  > {/* 属性が複数行の場合、閉じ括弧は新しい行 */}
    <p>Some content</p>
  </MyMyChildComponent>
);

const SimpleComponent = () => (
  <div className="simple-div">Hello</div> // 属性が1行に収まる場合、閉じ括弧は同じ行
);

「[Deprecated] JSX Brackets」に関連するプログラミング例コードは、主に以下の点を理解するためのものです。

過去の制御
かつて jsxBracketSameLine オプションで JSX の閉じ括弧の位置を制御できたこと。
現在の自動化
現在の Prettier は、このオプションが削除されたため、開発者が明示的に設定しなくても、内部的なルールに基づいて最適な JSX フォーマットを自動的に適用すること。

したがって、もし古い Prettier の設定ファイルに jsxBracketSameLine が残っている場合は、上記の警告メッセージが表示されるので、その行を削除することが推奨されます。現在の Prettier を使用している場合は、JSX の閉じ括弧の位置に関して特別な設定を気にする必要はありません。 Prettier の [Deprecated] JSX Brackets に関するプログラミングの例コードは、このオプションがすでに非推奨となり削除されているため、「現在、このように書くと動かない（または警告が出る）」という例を示すことになります。

かつて存在した jsxBracketSameLine オプションは、JSX の閉じ括弧（>）の位置を制御するものでした。

以前の Prettier の設定例（非推奨となる前）

prettier.config.js や .prettierrc などの Prettier 設定ファイルで、以下のように記述されていました。

jsxBracketSameLine: true の場合

この設定は、JSX の閉じ括弧をタグの最後の属性と同じ行に配置しようとします。

// .prettierrc (または prettier.config.js の一部)
{
  "jsxBracketSameLine": true
}

この設定が有効な場合、以下のような JSX コードは、通常、次のようにフォーマットされます。

入力コード

<MyComponent
  prop1="value1"
  prop2={someExpression}
  prop3={
    longExpression
  }
>
  <p>Hello, World!</p>
</MyComponent>

<SelfClosingComponent
  propA="a"
  propB="b"
/>

jsxBracketSameLine: true でフォーマットされた出力（以前の Prettier の動作）

<MyComponent
  prop1="value1"
  prop2={someExpression}
  prop3={
    longExpression
  } > // ここが同じ行になる
  <p>Hello, World!</p>
</MyComponent>

<SelfClosingComponent
  propA="a"
  propB="b" /> // 自己閉じタグも同じ行になる

jsxBracketSameLine: false の場合

この設定は、JSX の閉じ括弧を常に新しい行に配置しようとします（自己閉じタグを除く）。

// .prettierrc (または prettier.config.js の一部)
{
  "jsxBracketSameLine": false
}

この設定が有効な場合、上記の入力コードは次のようにフォーマットされます。

jsxBracketSameLine: false でフォーマットされた出力（以前の Prettier の動作）

<MyComponent
  prop1="value1"
  prop2={someExpression}
  prop3={
    longExpression
  }
> // ここが新しい行になる
  <p>Hello, World!</p>
</MyComponent>

<SelfClosingComponent
  propA="a"
  propB="b"
/> // 自己閉じタグは影響を受けないことが多かった

現在の Prettier の動作（`jsxBracketSameLine` オプションは削除済み）

現在、jsxBracketSameLine オプションは存在しません。Prettier は、JSX の閉じ括弧の配置に関して、独自の内部ロジックに基づいて最適なフォーマットを自動的に適用します。 これは通常、bracketSameLine オプション（Prettier 2.4以降で導入され、HTML、Vue、Angular、JSX に適用される）の動作と似ていますが、ユーザーが直接 jsxBracketSameLine を設定することはできません。

多くの場合、属性が複数行にわたる JSX 要素では、閉じ括弧は新しい行に配置されます。

現在の Prettier のフォーマット例（jsxBracketSameLine オプションなし）

<MyComponent
  prop1="value1"
  prop2={someExpression}
  prop3={
    longExpression
  }
> // 現在の Prettier は、通常このように新しい行に配置する
  <p>Hello, World!</p>
</MyComponent>

<SelfClosingComponent
  propA="a"
  propB="b"
/>

もし、現在の Prettier のバージョンで古い jsxBracketSameLine オプションをprettier.config.jsなどに記述した場合、Prettier はそれを無視するか、以下のような警告メッセージを表示する可能性があります。

prettier.config.js に非推奨オプションが残っている例

// prettier.config.js
module.exports = {
  semi: true,
  trailingComma: 'all',
  singleQuote: true,
  // !!! この行が非推奨オプションであり、警告の対象となる !!!
  jsxBracketSameLine: true,
  printWidth: 80,
  tabWidth: 2,
};

この設定で Prettier を実行した際の警告メッセージの例

[warn] Deprecated option: jsxBracketSameLine. Use `bracketSameLine` instead.

または、より古い Prettier のバージョンでは、単に無視されるか、エラーになることもあります。

[Deprecated] JSX Brackets に関する例コードは、**「かつてこのようなオプションが存在し、特定の方法でコードをフォーマットしていたが、現在は削除され、Prettier が自動的にフォーマットを決定する」**ということを示すものです。

まず重要な点として、jsxBracketSameLine オプションは Prettier のバージョン 2.4 で非推奨となり、最終的に削除されました。これは Prettier が「意見のあるフォーマッター (Opinionated Formatter)」であるという哲学に基づいています。つまり、ユーザーが細かいフォーマットの選択肢をたくさん持つよりも、Prettier が一貫性のある最適なフォーマットを自動的に適用することを目指しています。

したがって、このオプションに関する「代替手段」とは、ユーザーが以前のようにJSXの閉じ括弧の位置を細かく制御する手段は基本的に存在しないということを意味します。その代わりに、Prettier の現在の動作と、関連する他の設定について理解することが重要です。

bracketSameLine オプションの使用 (JSX 以外のタグにも適用)

jsxBracketSameLine が非推奨になった後、Prettier 2.4 で bracketSameLine という新しいオプションが導入されました。このオプションは、HTML、Vue、Angular そして JSX のマルチライン要素の閉じ括弧を、最後の属性と同じ行に配置するかどうかを制御します。

bracketSameLine: true
- このオプションを設定すると、閉じ括弧が最後の属性と同じ行に配置されます。
- これはかつての jsxBracketSameLine: true と似た動作を提供しますが、JSX 専用ではなく、他のHTMLライクな言語にも適用されます。
```
// .prettierrc
{
  "bracketSameLine": true
}
```
```
// 入力 (上記と同じ)
<MyComponent
  prop1="value1"
  prop2={someValue}
>
  <Child />
</MyComponent>

// Prettier の出力 (bracketSameLine: true)
<MyComponent
  prop1="value1"
  prop2={someValue} > // ここが同じ行になる
  <Child />
</MyComponent>
```
注意点
bracketSameLine: true は、自己閉じタグ（例: <img />）には影響しません。自己閉じタグの /> は常に最後の属性と同じ行に配置されます。

Prettier のデフォルトの動作です。
JSX の閉じ括弧は、通常、新しい行に配置されます。これが現在の推奨されるフォーマットです。

// 入力
<MyComponent
  prop1="value1"
  prop2={someValue}
>
  <Child />
</MyComponent>

// Prettier の出力 (bracketSameLine: false またはオプションなし)
<MyComponent
  prop1="value1"
  prop2={someValue}
>
  <Child />
</MyComponent>

Prettier のデフォルトのフォーマットを受け入れる

最も推奨される「代替手段」は、Prettier のデフォルトのフォーマットを受け入れることです。Prettier は「意見のあるフォーマッター」であり、細かいフォーマットのカスタマイズを減らすことで、チーム間のスタイル論争をなくし、一貫性を保つことを目的としています。

jsxBracketSameLine が削除されたのは、このオプションの必要性が低いと判断されたためです。ほとんどのプロジェクトでは、Prettier のデフォルトの JSX フォーマットで問題なく機能します。

極めて特殊なケースで、どうしても Prettier のデフォルトの JSX フォーマットに納得がいかない場合、ESLint などの他のリンターと組み合わせて、Prettier のフォーマット後に特定のルールを適用するという方法も考えられます。

例えば、ESLint の react/jsx-closing-bracket-location のようなルールを使って、JSX の閉じ括弧の位置を強制することができます。

// .eslintrc.js
module.exports = {
  // ...その他の設定
  rules: {
    'react/jsx-closing-bracket-location': [
      'error',
      'tag-aligned', // または 'line-aligned', 'props-aligned' など
    ],
    // Prettier と競合するESLintのフォーマットルールを無効にする設定（必須）
    'prettier/prettier': 'error', // eslint-plugin-prettier を使っている場合
    'no-unexpected-multiline': 'off', // 潜在的な競合を回避
  },
};

しかし、この方法は 強く推奨されません。

パフォーマンスの低下
2つのツールがコードを解析し、フォーマットしようとすることで、パフォーマンスが低下する可能性があります。
設定の複雑化
ESLint と Prettier の両方でフォーマットルールを管理すると、設定が複雑になり、メンテナンスが困難になります。
Prettier の哲学に反する
Prettier の目的は、フォーマットに関する議論をなくすことです。ESLint で Prettier のフォーマットを上書きしようとすると、競合や予測不能な動作の原因になります。

通常、Prettier と ESLint を併用する場合、eslint-config-prettier を使用して、Prettier と競合する ESLint のフォーマットルールをすべて無効にすることが推奨されます。これにより、フォーマットは Prettier に任せ、ESLint はコード品質やバグの検出に集中できます。

[Deprecated] JSX Brackets の代替手段として、最も適切なのは以下の2点です。

Prettier の新しい bracketSameLine オプションを検討する。 (これは jsxBracketSameLine の汎用版であり、HTMLライクなすべてのタグに適用されます。)
Prettier のデフォルトの JSX フォーマットをそのまま受け入れる。 これが Prettier の設計思想に最も合致しており、最もシンプルで推奨される方法です。

Prettierのファイルパス徹底解説：エラー解決から設定、活用例まで

Prettierは、コードのフォーマットを自動で行うツールです。その際に「ファイルパス」という概念は非常に重要になります。簡単に言えば、どのファイルに対してPrettierを適用するか、あるいはPrettierの設定ファイルをどこに置くかを示す情報がファイルパスです。

Web開発者必見！PrettierのHTML Whitespace Sensitivity徹底ガイド

通常、HTMLにおいて、連続するスペースやタブ、改行の多くはブラウザによって単一のスペースとして扱われたり、無視されたりします。例えば、<span>Hello World!</span> と <span>Hello World!</span> は、ほとんどの場合同じように表示されます。

Prettierでコードを美しく：Pragmaオプションの活用と代替案

Prettierは、コードの自動整形ツールです。--insert-pragma オプション（または設定ファイルで insertPragma: true）を使用すると、Prettierは整形したファイルの先頭に特別なコメント（プラグマコメント）を挿入します。

JSXクォートの悩み解決！Prettierで一貫性のあるコードを手に入れる方法

JSXはReactなどでUIを記述する際に使われるJavaScriptの拡張構文ですが、その属性値はHTMLの属性と同様に文字列として扱われます。この文字列を囲む際に、シングルクォート（'）を使うか、ダブルクォート（"）を使うかをPrettierで設定できます。

Prettierパーサーの代替手段：コード整形ツールとライブラリの比較

PrettierのParserは、与えられたコードの文字列を解析し、それを抽象構文木（Abstract Syntax Tree, AST）と呼ばれるデータ構造に変換する役割を担います。具体的には、以下のことを行います。構文解析（Parsing）: コードの文字列を読み込み、それがその言語の正しい構文に従っているかをチェックします。例えば、JavaScriptの場合、変数宣言、関数定義、ループなどの構文要素を識別します。構文エラーがあれば、解析に失敗します。

PrettierのPrint Widthでよくあるエラーと解決策

Prettierにおける「Print Width」とは、コードの1行の最大文字数を指します。Prettierは、この設定値に基づいて、コードを自動的に整形し、指定された幅を超えないように改行を行います。もう少し詳しく説明します。例外: Prettierは賢く、必ずしもすべての行をPrint Widthに収めるわけではありません。例えば、長い文字列リテラルやURLなど、分割すると可読性が著しく低下する場合などは、Print Widthを超えてもそのままにする場合があります。

Prose Wrap

「Prose Wrap」はPrettierというプログラミングのフォーマッタにおける設定項目の一つで、主にコメントやMarkdownファイルのような「散文（プログラミングコードではない、自然言語の文章）」の折り返し方を制御するものです。Prettierは、JavaScript、TypeScript、CSS、HTML、Markdownなど、様々な種類のコードやファイルを一貫したスタイルに自動的にフォーマットしてくれるツールです。その中で、「Prose Wrap」は特に以下のファイルタイプに影響します。

Prettierの「Quote Props」徹底解説：JavaScriptプロパティの引用符をマスターする

Prettierで「Quote Props」という設定は、JavaScriptやTypeScriptなどのオブジェクトリテラルで、プロパティ名をいつ引用符で囲むかを制御します。より具体的に言うと、オブジェクトのプロパティ名に、引用符で囲む必要がある特殊文字（スペース、ハイフンなど）が含まれていない場合でも、引用符で囲むかどうかを設定するものです。

Quotes

具体的には、文字列をシングルクォート（'）で囲むか、ダブルクォート（"）で囲むかを指定することができます。Prettierには、この「Quotes」に関して主に以下のオプションがあります。singleQuote (または singleQuote: true/false): このオプションがtrueに設定されている場合、Prettierは可能な限り文字列をシングルクォートで囲むように整形します。例: const name = 'Alice'; falseに設定されている場合、可能な限りダブルクォートで囲むように整形します。例: const name = "Bob"; これはデフォルトではfalse（ダブルクォート）です。

Range

これは、以下のような場合に特に便利です。IDEやエディタとの連携一部のIDEやエディタのPrettierプラグインでは、選択範囲のみをフォーマットする機能があり、その内部で「Range」の概念が使われていることがあります。既存のコードベースにPrettierを導入する際一度に全てのファイルをフォーマットするのが難しい場合、段階的に導入するために特定の範囲から始めることができます。

[Deprecated] JSX Brackets​