Prettier 配置生成器
按需选择 printWidth、tabWidth、引号、分号、尾随逗号、换行符与插件，生成 .prettierrc（JSON）或 prettier.config.js 配置模板，实时预览可复制。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
格式化选项
对应 Prettier 的 Options，改完立刻看到配置文件内容。
生成的配置
.prettierrc无（不需要额外安装）{
"printWidth": 100,
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": true,
"arrowParens": "always",
"endOfLine": "lf"
}
这个工具能做什么
- 新建前端项目时确定一套统一的代码风格：调好 printWidth、引号、分号、尾随逗号，直接生成 .prettierrc 提交进仓库。
- 团队对「用不用分号」「单引号还是双引号」有分歧时，用配置页把选项摆出来对比，谁也不用凭记忆争论。
- 接了 Tailwind 或需要统一 import 顺序时，勾上插件就能拿到带 plugins 数组的配置，省掉查包名的步骤。
- 想从 .prettierrc 换成 prettier.config.js（或反过来）时，同一份选项切换格式即可，不用手写两份。
示例
输入
输出格式 .prettierrc（JSON），printWidth 100，singleQuote 关掉（用双引号），勾选 prettier-plugin-tailwindcss
输出
{
"printWidth": 100,
"tabWidth": 2,
"semi": true,
"singleQuote": false,
"trailingComma": "all",
"bracketSpacing": true,
"arrowParens": "always",
"endOfLine": "lf",
"plugins": [
"prettier-plugin-tailwindcss"
]
}字段顺序固定，方便和仓库里的旧配置逐行对比 diff；插件包名同时会显示在结果区的「需要安装的插件」一栏。
常见问题
.prettierrc 和 prettier.config.js 该用哪个？
只改选项就用 .prettierrc，它只是 JSON，任何语言的项目都能读。需要写注释、条件判断或动态取值（比如按环境切换 printWidth）时才用 prettier.config.js；本项目用的是 ESM 写法，注意 package.json 里的 type 字段。
为什么生成的配置里没有 tabWidth 之外的缩进相关项？
Prettier 只认 useTabs 和 tabWidth 两个缩进选项，其余细节（比如对象换行位置）由 Prettier 自己决定，这正是它和 ESLint 格式规则冲突的根源，所以 ESLint 那边要额外勾「Prettier 兼容」。
prettier-plugin-tailwindcss 必须配合 Tailwind 使用吗？
是的，它只负责把 class 字符串按 Tailwind 的推荐顺序重排，没有 Tailwind 的项目勾了也没有效果。另外 Tailwind v4 建议同时把 tailwindStylesheet 指向入口 CSS，生成的配置只负责加上 plugins 数组，路径仍需你按项目情况补充。
生成的配置能直接覆盖我现有的文件吗？
可以，但注意它会完整替换原有内容：现有配置里手写的 overrides、parser 等字段不会保留。建议先把生成结果和现有文件对比一遍，确认没有丢东西再覆盖。
这些设置会被发送到哪里吗？
不会。整个页面都在你的浏览器里运行，选项只存在浏览器内存里，刷新即恢复默认值，也不会写入你的项目文件。
关键词：prettierprettier configprettierrccode formatter格式化配置prettier 配置代码风格tailwind prettier pluginimport 排序前端工程化