Prettier Config

Prettier Config

关于我们

关于 Prettier Config

一个免费、开源的工具,旨在帮助开发者无障碍地配置 Prettier

这个工具是什么?

Prettier Config Generator 是一个交互式网络应用程序,让配置 Prettier 变得轻松无比。您无需手动编写 JSON 或逐个查找文档中的选项,而是可以直观地切换和调整每个 Prettier 设置,用您的配置在 16 种语言中格式化真实代码,并通过单个链接分享结果。它是为那些更愿意把时间花在写代码而不是配置工具上的开发者打造的。

功能特点

导入你现有的配置

粘贴现有的 .prettierrc、prettier.config.js,或 package.json 中的 prettier 键 —— 表单会自动填充以匹配。调整、分享或复制出来,所有键都将完整保留。

全部 Prettier 版本

可选择任何 Prettier 3.x 版本(3.0 – 3.6 及 latest)。该版本的精确选项会按需从 jsDelivr 加载。

所有语言,两个 tab 都支持

Preview 为每个 parser 都内置了专门设计的示例(TypeScript / JS、CSS、HTML、JSON / JSON5 / JSONC、Markdown、YAML、Vue、GraphQL 等等),让每一个 Prettier 选项都有展示效果的地方。Your Code 会从你粘贴的内容中自动检测 parser,并支持手动覆盖。

真实代码编辑器

CodeMirror 6 为输入面板提供语法高亮、行号、Tab 缩进,以及随浅色/深色模式切换的主题。

可分享的配置

点击分享,您的版本、选项、代码和解析器会被打包到 URL hash 中。可发送到任何地方;所有内容都保留在浏览器中。

GitHub 风格的 Diff

通过统一或拆分的 diff 准确查看 Prettier 的修改,并配有像 pull request 一样的 +X / −Y 摘要标题。

AI Token 计数器

针对 GPT-4o、GPT-4、GPT-3.5、Claude、Gemini、Llama 3 和 Mistral 实时计算输入与输出的 token 数——便于 AI pipeline 的成本估算。

暴露解析错误

当 Prettier 拒绝您的输入时,确切的 SyntaxError 及其行:列位置会显示在 diff 上方,而不是被静默吞掉。

持久化选择

您的 Prettier 版本和选项选择会保存到 localStorage,所以刷新——或者明天再回来——一切依然完好。

20 种语言

完整本地化为英语、泰语、中文、西班牙语、印地语、德语、法语、葡萄牙语、日语、韩语、俄语、越南语、印尼语、意大利语、波兰语、土耳其语、乌克兰语、孟加拉语,以及阿拉伯语和波斯语(RTL)。

技术栈

Next.js 16React 19TypeScriptTailwind CSS v4shadcn/uinext-intlCodeMirror 6prettier/standalone (CDN)lz-string

开源

此工具完全免费且开源,欢迎贡献、错误报告和建议。

在 GitHub 上查看

创作者

由以下人员构建

NooobtimeX

为开发者社区用心打造。如果您觉得此工具有用,请考虑在 GitHub 上为仓库加星。