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).