DiffCheck

.prettierrc ジェネレーター

Prettier設定ファイル(.prettierrc)を生成します。Airbnb、Googleなどのプリセットに対応。

スタイルプリセット
フォーマット

printWidth

折り返しまでの最大行長

80

tabWidth

インデントのスペース数

2
クォート

quoteProps

オブジェクトのプロパティ名のクォート方法

カンマと括弧

trailingComma

末尾カンマを追加

arrowParens

単一引数のアロー関数に括弧を追加

その他

endOfLine

改行コードのスタイル

proseWrap

Markdownの折り返し

.prettierrc
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf",
  "singleAttributePerLine": false,
  "proseWrap": "preserve"
}

What Is the .prettierrc Generator?

The .prettierrc generator builds a Prettier configuration file by letting you visually toggle and select formatting options. Start from a preset (Prettier defaults, Airbnb, Google, or Standard JS) and adjust printWidth, tabWidth, singleQuote, semi, trailingComma, bracketSpacing, arrowParens, endOfLine, and more. The output updates in real time and can be downloaded as a .prettierrc file.

How to Use the .prettierrc Generator

  1. Choose a preset to apply a well-known style guide as a starting point.
  2. Adjust any formatting, quote, comma, and bracket options to match your team's preferences.
  3. The .prettierrc JSON output updates instantly on the right.
  4. Click Download to save the file directly, or Copy and paste it into your project root.

Features

  • Presets: Prettier defaults, Airbnb, Google, Standard JS
  • Configurable printWidth (60–160) and tabWidth (1–8)
  • Toggle switches for useTabs, semi, singleQuote, jsxSingleQuote, and more
  • Radio groups for trailingComma, quoteProps, arrowParens, endOfLine, proseWrap
  • Real-time JSON output with Download and Copy

FAQ

What is .prettierrc?

.prettierrc is the configuration file for Prettier, an opinionated code formatter. Prettier reads this file to determine how to format your code — line length, quote style, semicolons, trailing commas, and more.

Should I use singleQuote or double quotes?

Both are valid. Single quotes are common in JavaScript communities following Airbnb or Standard style. Double quotes are the Prettier default. Pick one and apply it consistently across your project.

What trailingComma option should I use?

all adds trailing commas wherever valid in ES2017+ syntax (the Prettier v3 default). es5 adds them in objects and arrays but not function parameters. none removes all trailing commas. "all" generally produces cleaner git diffs.

What is the difference between bracketSameLine and bracketSpacing?

bracketSpacing controls spaces inside object literals: { foo: bar } vs { foo: bar }. bracketSameLine controls where the closing > of a multi-line JSX element is placed — on the last line or on its own line (the default).