Bracket Spacing

2025-06-06

Prettierの「Bracket Spacing」とは、オブジェクトリテラルや分割代入などで使われる波括弧 {} の内側のスペースの有無を制御する設定です。

具体的には、{ foo: bar } のように波括弧の内側にスペースを入れるか、それとも {foo: bar} のようにスペースを入れないか、という挙動を決定します。

この設定は、Prettierの設定ファイル（例: .prettierrc や package.json）で bracketSpacing というオプションとして指定します。

設定値と挙動

bracketSpacing オプションには、以下の2つの値が指定できます。

- 波括弧の内側にスペースが挿入されます。
- 例:
```
// 入力
const obj = {foo:bar};
function func({a,b}) { return a + b; }

// Prettier適用後 (bracketSpacing: true)
const obj = { foo: bar };
function func({ a, b }) {
  return a + b;
}
```
- 多くのJavaScriptのコーディングスタイルガイド（例: Airbnbスタイルガイド）で推奨されている形式です。可読性が向上すると考えられています。
false
- 波括弧の内側にスペースが挿入されません。
- 例:
```
// 入力
const obj = { foo: bar };
function func({ a, b }) { return a + b; }

// Prettier適用後 (bracketSpacing: false)
const obj = {foo: bar};
function func({a, b}) {
  return a + b;
}
```
- 古いJavaScriptのスタイルや、特定のプロジェクトのコーディング規約によってはこの形式が好まれることもあります。

なぜこの設定があるのか？

Prettierは「意見のある（opinionated）」フォーマッターであり、ほとんどのスタイルはデフォルトで固定されています。しかし、「Bracket Spacing」のような一部のスタイルは、開発コミュニティ内で意見が分かれることがあり、またプロジェクトごとに異なる規約が存在するため、設定で変更できるようになっています。

PrettierのbracketSpacing設定自体が直接的にエラーメッセージを吐き出すことは稀ですが、意図しないフォーマットや、設定の誤解によって開発者が「エラー」と感じることがあります。ここでは、そうした一般的な問題と解決策を説明します。

意図しないスペースの挿入/削除

問題

Gitの差分（diff）で、bracketSpacingに関する変更が大量に発生している。
bracketSpacing: false に設定しているのに、波括弧の内側にスペースが挿入されてしまう。
bracketSpacing: true に設定しているのに、波括弧の内側にスペースが挿入されない。

原因

構文の誤解
bracketSpacingは、オブジェクトリテラルや分割代入、インポート/エクスポートの波括弧に適用されます。配列の括弧 [] やテンプレートリテラルの波括弧 ${} には適用されません。
Prettierのバージョン
古いバージョンのPrettierでは、特定の構文に対してbracketSpacingが期待通りに動作しない場合があります。
他のフォーマッターとの競合
ESLintやVS Codeのデフォルトフォーマッターなど、他のツールがPrettierと同時に動作し、Prettierの設定を上書きしている。
設定が正しく適用されていない
最も一般的な原因です。
- .prettierrc などの設定ファイルが正しく読み込まれていない。
- 複数のPrettier設定ファイルが存在し、意図しないものが優先されている。
- Prettierを適用する方法（CLI、IDE拡張など）が、設定ファイルを考慮していない。

トラブルシューティング

- プロジェクトルートに .prettierrc や .prettierrc.json、prettier.config.js などのファイルがあるか確認してください。
- package.json に prettier キーがある場合も確認してください。
- ファイル内で bracketSpacing が意図した値（true または false）になっているか確認してください。
- 重要
  プロジェクト内に複数のPrettier設定ファイルがないか確認し、意図しないファイルが優先されていないかチェックします（例: 親ディレクトリの設定が子ディレクトリに影響している場合など）。
Prettierの実行方法の確認
- CLIでテスト
  ターミナルで直接Prettierを実行し、設定が反映されるか確認します。
```
npx prettier --write "src/**/*.{js,ts,jsx,tsx}" --config .prettierrc.json
```
  もし .prettierrc.json 以外の設定ファイルを使っている場合は適宜変更してください。
- IDE拡張（VS Codeなど）
  - VS Codeの場合:
    - settings.json で editor.defaultFormatter が esbenp.prettier-vscode になっていることを確認。
    - editor.formatOnSave が true になっていることを確認。
    - ワークスペース設定がユーザー設定を上書きしていないか確認。
    - コマンドパレットから「Format Document With...」を選択し、Prettierが選択されていることを確認。
    - 拡張機能が有効になっているか確認し、必要であれば再ロード/再インストールを試す。
他のフォーマッターとの競合解決
- ESLint
  - PrettierとESLintを併用する場合、eslint-plugin-prettier と eslint-config-prettier を導入するのが一般的です。
  - eslint-config-prettier は、Prettierと競合するESLintのルールを無効にする役割があります。これが正しく設定されているか確認してください。
  - .eslintrc ファイルで extends: ["prettier"] がリストの最後にあることを確認してください。
  - PrettierがESLintの警告/エラーとして表示される場合は、ESLintの設定を見直してください。
- VS Codeのデフォルトフォーマッター
  VS CodeのデフォルトのJavaScript/TypeScriptフォーマッターがPrettierより優先されている可能性があります。settings.json で "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } のように明示的に設定してください。
Prettierのバージョンアップ
- package.json で prettier のバージョンを確認し、最新版（または安定版）に更新してみます。
- npm install prettier@latest または yarn add prettier@latest
キャッシュのクリア
- Node.jsプロジェクトの場合、node_modules ディレクトリを削除し、npm install または yarn install を再実行することで、依存関係のキャッシュがクリアされ、問題が解決することがあります。

コミットフックの問題

問題

husky や lint-staged などを使ったコミットフックでPrettierを実行しているが、bracketSpacingの設定が反映されない、または予期せぬ変更が発生する。

原因

CI/CD環境とローカル環境でPrettierのバージョンや設定の読み込みが異なる。
husky の設定で、Prettierが正しく呼び出されていない。
lint-staged の設定で、Prettierに渡す引数が不足している、または間違っている。

トラブルシューティング

package.json の lint-staged 設定確認

以下のように、適切なオプションが渡されているか確認します。

// package.json
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write" // --config オプションは通常不要（Prettierが自動で設定を探すため）
    ]
  }
}

--write オプションがあることを確認してください。

コミットフックのデバッグ
- 一時的にlint-staged や husky の設定を簡素化し、問題がどこにあるかを特定します。
- CI/CD環境で実行されるスクリプトをローカルで再現し、比較します。

チーム内のスタイル不一致

問題

Gitの差分が大量に発生し、コードレビューが困難になる。
チームメンバー間で bracketSpacing の設定が異なり、フォーマットが衝突する。

原因

IDEのフォーマットオンセーブ機能が、プロジェクトのPrettier設定ではなく個人の設定を参照している。
チームメンバーがそれぞれのローカル環境で異なるPrettier設定を上書きしている。
Prettierの設定ファイルがGit管理されていない、または無視されている（.gitignoreに入っているなど）。

トラブルシューティング

設定ファイルの統一とGit管理
- .prettierrc などの設定ファイルをGitリポジトリにコミットし、全員が同じ設定を使うようにします。
- .prettierignore も忘れずにコミットし、フォーマット対象外のファイルを指定します。
プロジェクト設定の強制
- VS Codeを使用している場合、.vscode/settings.json に以下のような設定を追加し、ワークスペースの設定を推奨することで、個人の設定がプロジェクトに影響を与えないようにできます。
```
// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.configPath": "./.prettierrc.json" // 必要に応じて
}
```
開発ワークフローの整備
- コミットフック（husky + lint-staged）を導入し、コミット時に自動的にフォーマットを強制する。これにより、スタイルの不一致がリポジトリに混入するのを防ぎます。

「Bracket Spacing」は、オブジェクトリテラルや分割代入などで使用される波括弧 {} の内側にスペースを入れるかどうかに影響します。Prettierの設定ファイル（例: .prettierrc または package.json）でこのオプションを制御します。

設定ファイルの準備

まず、プロジェクトのルートディレクトリに .prettierrc ファイルを作成します。このファイルにPrettierの設定を記述します。

.prettierrc (JSON形式)

{
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true
}

または

{
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": false
}

上記の bracketSpacing の値を true または false に変更することで、挙動が変わります。

bracketSpacing: true の場合 (デフォルト)

bracketSpacing を true に設定した場合、Prettierは波括弧の内側にスペースを挿入します。これは、より可読性が高いと一般的に考えられているスタイルです。

.prettierrc

{
  "bracketSpacing": true
}

Prettier適用前のコード (入力)

// オブジェクトリテラル
const myObject = {key:"value",another:123};

// 分割代入
const {name,age}=person;

// インポート文
import {Component,useState} from 'react';

// エクスポート文
export {someVar,anotherVar};

Prettier適用後のコード (出力)

// オブジェクトリテラル
const myObject = { key: "value", another: 123 };

// 分割代入
const { name, age } = person;

// インポート文
import { Component, useState } from "react";

// エクスポート文
export { someVar, anotherVar };

解説：波括弧 {} の内側 (key: "value", name, age など) にスペースが追加されています。

bracketSpacing: false の場合

bracketSpacing を false に設定した場合、Prettierは波括弧の内側のスペースを削除します。

.prettierrc

{
  "bracketSpacing": false
}

Prettier適用前のコード (入力)

// オブジェクトリテラル
const myObject = { key: "value", another: 123 };

// 分割代入
const { name, age } = person;

// インポート文
import { Component, useState } from 'react';

// エクスポート文
export { someVar, anotherVar };

Prettier適用後のコード (出力)

// オブジェクトリテラル
const myObject = {key: "value", another: 123};

// 分割代入
const {name, age} = person;

// インポート文
import {Component, useState} from 'react';

// エクスポート文
export {someVar, anotherVar};

解説：波括弧 {} の内側からスペースが削除されています。

影響を受けない例

bracketSpacing は、オブジェクトリテラルや分割代入、import/export 構文の波括弧にのみ影響します。以下のケースには影響しません。

関数の括弧 ()

// 入力
function func( arg1, arg2 ) { /* ... */ }
const arrowFunc = ( param ) => { /* ... */ };

// 出力 (bracketSpacing の設定に関わらず変化なし)
function func(arg1, arg2) { /* ... */ }
const arrowFunc = (param) => { /* ... */ };

テンプレートリテラルの波括弧 ${}

// 入力
const greeting = `Hello, ${ name }!`;

// 出力 (bracketSpacing の設定に関わらず変化なし)
const greeting = `Hello, ${name}!`; // 変数名の前後にスペースは入りません

// 入力
const myArray = [1, 2, 3];
const [first, second] = arr;

// 出力 (bracketSpacing の設定に関わらず変化なし)
const myArray = [1, 2, 3];
const [first, second] = arr;

Prettierの実行方法

上記の .prettierrc ファイルを配置した後、プロジェクトのルートディレクトリで以下のコマンドを実行すると、設定が適用されます。

# プロジェクト内の全てのJS/TS/JSONファイルをフォーマット
npx prettier --write "**/*.{js,jsx,ts,tsx,json}"

または、VS CodeなどのIDEにPrettier拡張機能をインストールし、「保存時にフォーマット（Format On Save）」を有効にすることで、ファイルを保存するたびに自動的にフォーマットされます。

PrettierのbracketSpacingオプション自体が非常にシンプルであるため、これに直接的な「代替」はあまり多くありません。しかし、以下の方法で同様の効果を得たり、Prettierのフォーマットに影響を与えたりすることができます。

ESLintのルールを使用する

Prettierを使わずにコードスタイルを強制したい場合、またはPrettierとESLintを併用していてより詳細な制御が必要な場合に、ESLintのルールを使用できます。

関連するESLintルール

import/extensions (eslint-plugin-import): インポート文の波括弧に関する直接的なルールではありませんが、インポート文の構文に関する問題を解決する際に参照されることがあります。

object-curly-spacing: オブジェクトリテラルや分割代入の波括弧内のスペースを制御します。

"always": bracketSpacing: true と同じ挙動 ({ foo: bar })
"never": bracketSpacing: false と同じ挙動 ({foo: bar})

例:

// .eslintrc.js
module.exports = {
  rules: {
    "object-curly-spacing": ["error", "always"] // PrettierのbracketSpacing: true と同じ
    // または "object-curly-spacing": ["error", "never"] // PrettierのbracketSpacing: false と同じ
  }
};

注意点
PrettierとESLintを併用する場合、eslint-config-prettier を使用してPrettierと競合するESLintのフォーマットルールを無効にすることが強く推奨されます。これを怠ると、ESLintがPrettierのフォーマットを元に戻そうとし、無限ループのような状況に陥ることがあります。

// .eslintrc.js
module.exports = {
  extends: [
    "eslint:recommended",
    // 他のESLint設定
    "prettier" // これをリストの最後に追加する
  ],
  // ...
};

eslint-config-prettier を使用している場合、object-curly-spacing のようなフォーマットに関するESLintルールは無効になるため、PrettierのbracketSpacingが優先されます。したがって、この方法は「Prettierを使わずにスタイルを強制する」場合に有効であり、Prettierと併用する場合はPrettierの設定が主になります。

エディタ/IDEの自動フォーマット設定 (Prettierを使用しない場合)

Prettierを使用せず、Visual Studio Codeなどのエディタの組み込みフォーマッターや、他のフォーマッター（例: JavaScript Standard Style、AirbnbスタイルガイドのESLint設定など）を使用している場合、エディタの設定で波括弧内のスペースを制御できます。

例えば、VS CodeではJavaScript/TypeScriptの組み込みフォーマッターの設定で、関連するオプションがあるかもしれません。しかし、これらは通常、Prettierほど柔軟ではなく、言語のデフォルトのフォーマットに依存します。

例 (VS Codeの settings.json - Prettierが有効な場合は上書きされる可能性が高い)

// VS Codeの settings.json
{
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // これは関数呼び出しの括弧に影響し、bracketSpacingとは異なる
  // オブジェクトリテラル内のスペースを直接制御する組み込みオプションは通常ありません。
  // そのため、多くの開発者はPrettierのような外部フォーマッターを使用します。
}

注意点
これは「Bracket Spacing」に直接対応するものではなく、多くの場合、ESLintなどのリンターがフォーマットルールを補完します。

Prettierのoverridesオプションで特定のファイルに適用する

bracketSpacing はプロジェクト全体で一貫したスタイルを適用するのが一般的ですが、特定のファイルやディレクトリに対してのみ異なるbracketSpacing設定を適用したい場合があります。Prettierのoverridesオプションを使用すると、これが可能です。

例: 特定のファイルだけ bracketSpacing: false にする

// .prettierrc
{
  "bracketSpacing": true, // デフォルトは true

  "overrides": [
    {
      "files": "*.legacy.js", // 例えば、レガシーなファイルだけ
      "options": {
        "bracketSpacing": false
      }
    },
    {
      "files": ["**/components/**/*.jsx", "**/views/**/*.tsx"], // 特定のコンポーネントディレクトリだけ
      "options": {
        "bracketSpacing": false
      }
    }
  ]
}

この方法は、プロジェクトの一部で異なるコーディング規約に従う必要がある場合や、移行期間中に一時的に異なるスタイルを許可したい場合に便利です。

「Bracket Spacing」に関して、Prettierの代替方法を検討する場合、主に以下の点が考えられます。

PrettierとESLintの競合を避けたい場合
eslint-config-prettierを正しく設定する。
Prettierを使いつつ、より柔軟に制御したい場合
Prettierのoverridesオプションを使う。
Prettierを使わない場合
ESLintのobject-curly-spacingルールなどを活用する。

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を導入する際一度に全てのファイルをフォーマットするのが難しい場合、段階的に導入するために特定の範囲から始めることができます。

Bracket Spacing​

設定値と挙動

なぜこの設定があるのか？

意図しないスペースの挿入/削除

コミットフックの問題

チーム内のスタイル不一致

設定ファイルの準備

bracketSpacing: true の場合 (デフォルト)

bracketSpacing: false の場合

影響を受けない例

Prettierの実行方法

ESLintのルールを使用する

エディタ/IDEの自動フォーマット設定 (Prettierを使用しない場合)

Prettierのoverridesオプションで特定のファイルに適用する

Bracket Spacing