Question 1

什么是 Prettier Config Generator？

Accepted Answer

Prettier Config Generator 是一个免费的交互式网络工具，让您可以直观地配置每个 Prettier 选项，并即时复制生成的 .prettierrc 文件，无需手动编辑。

Question 2

什么是 Prettier，为什么要使用它？

Accepted Answer

Prettier 是一个固执己见的代码格式化工具，可以在整个代码库中强制执行一致的代码风格，消除代码审查中关于代码风格的争论。

Question 3

什么是 .prettierrc 文件？

Accepted Answer

.prettierrc 文件是放置在项目根目录的配置文件，告诉 Prettier 如何格式化代码，控制缩进、引号风格和行宽等选项。

Question 4

如何使用这个工具生成配置？

Accepted Answer

在主页上选择您想要的 Prettier 选项，配置将在侧边栏实时更新。点击「复制配置」将 JSON 复制到剪贴板，然后粘贴到项目根目录的 .prettierrc 文件中。

Question 5

Prettier Config Generator 免费吗？

Accepted Answer

是的，完全免费。无需注册，无需账户，无使用限制。该工具也在 GitHub 上开源。

Question 6

此工具涵盖所有 Prettier 选项吗？

Accepted Answer

是的，此工具包含每个官方支持的 Prettier 选项，并为每个选项显示说明和默认值。

Question 7

如何复制并使用生成的配置？

Accepted Answer

在桌面端点击侧边栏中的「复制配置」按钮，或在移动端点击浮动操作按钮。将复制的 JSON 内容粘贴到项目根目录下名为 .prettierrc 的新文件中。

Question 8

.prettierrc、prettier.config.js 和 package.json 中的 prettier 键有什么区别？

Accepted Answer

三种都是配置 Prettier 的有效方式。.prettierrc 支持 JSON 或 YAML，prettier.config.js 是 JavaScript 模块，允许动态配置，package.json 中的 prettier 键将所有内容保存在一个文件中。功能相同，取决于个人偏好。

Question 9

Prettier 支持 TypeScript、React 和 Vue 吗？

Accepted Answer

是的，Prettier 内置支持 TypeScript、JSX/TSX (React)、Vue 单文件组件等多种格式。某些框架可能需要安装额外的插件。

Question 10

如何将 Prettier 与 VS Code 集成？

Accepted Answer

从 VS Code 市场安装「Prettier - Code formatter」扩展，然后在 VS Code 设置中添加 "editor.defaultFormatter": "esbenp.prettier-vscode" 和 "editor.formatOnSave": true。

Question 11

如何在整个项目上运行 Prettier？

Accepted Answer

在项目根目录运行 npx prettier --write .，这将格式化所有支持的文件。使用 npm install --save-dev prettier 添加 prettier 作为开发依赖。

Question 12

Prettier 支持哪些语言和文件类型？

Accepted Answer

Prettier 支持 JavaScript、TypeScript、JSX、TSX、CSS、SCSS、Less、HTML、Vue、Angular、JSON、YAML、Markdown 等。还可以通过插件扩展以支持其他语言。

Question 13

如何让 Prettier 忽略某些文件？

Accepted Answer

在项目根目录创建 .prettierignore 文件，使用与 .gitignore 相同的语法。列出的文件和目录将被 Prettier 跳过。

Question 14

可以同时使用 Prettier 和 ESLint 吗？

Accepted Answer

可以，安装 eslint-config-prettier 以禁用与 Prettier 冲突的 ESLint 格式规则。使用 Prettier 进行格式化，ESLint 进行代码质量检查，两者完美互补。

Question 15

printWidth 选项有什么作用？

Accepted Answer

printWidth 告诉 Prettier 尝试将代码适配到的行长度，默认值为 80。这是一个软目标——如果换行会降低代码可读性，Prettier 可能会超过此限制。

Question 16

singleQuote 和 jsxSingleQuote 有什么区别？

Accepted Answer

singleQuote 控制 Prettier 是否在 JavaScript/TypeScript 字符串中使用单引号，jsxSingleQuote 专门控制 JSX 属性字符串。您可以独立设置它们。

Question 17

如何使用此网站的搜索功能？

Accepted Answer

使用页面顶部的搜索栏按名称、描述或关键词过滤 Prettier 选项，结果会在您输入时即时更新。

Question 18

此网站支持暗色模式吗？

Accepted Answer

是的，点击标题中的主题切换按钮可在浅色模式、暗色模式和系统偏好设置之间切换，您的选择会自动保存。

Question 19

Prettier 的默认配置是什么？

Accepted Answer

Prettier 默认配置包括：printWidth: 80、tabWidth: 2、useTabs: false、semi: true、singleQuote: false、trailingComma: "all"、bracketSpacing: true 和 arrowParens: "always"。

Question 20

如何报告错误或为此项目做贡献？

Accepted Answer

在 GitHub 仓库上开 issue 或 pull request，项目欢迎各种形式的贡献，包括新功能、bug 修复和翻译改进。

Question 21

此工具支持哪些 Prettier 版本？

Accepted Answer

您可以从版本下拉菜单中选择任何 Prettier 3.x 版本——3.0 到 3.6 以及「latest」。所选版本的 bundle 会按需从 jsDelivr 加载，因此选项列表始终与该版本的实际 schema 匹配。

Question 22

在「您的代码」标签页中我可以格式化哪些语言？

Accepted Answer

TypeScript、JavaScript、Flow、CSS、SCSS、Less、HTML、Vue、Angular 模板、JSON、JSON5、带注释的 JSON、Markdown、MDX、YAML 和 GraphQL。解析器会根据输入自动检测，但您可以通过下拉菜单覆盖。

Question 23

可分享链接是如何工作的？

Accepted Answer

点击分享按钮，当前的 Prettier 版本、所选选项、代码和解析器覆盖会被 LZ 压缩后写入 URL hash，然后复制到您的剪贴板。打开该链接会恢复完全相同的配置。没有任何数据发送到服务器——一切都留在浏览器中。

Question 24

diff 旁边的 token 数表示什么？

Accepted Answer

它显示在所选模型下，您的输入和输出会消耗多少 AI tokens。GPT-4o / GPT-4 / GPT-3.5 使用官方 BPE tokenizer 进行精确计数；Claude、Gemini、Llama 和 Mistral 使用基于字符的近似值，前缀为「~」。

Question 25

我的工作在页面刷新后会保留吗？

Accepted Answer

会的。您的 Prettier 版本、选项选择以及拆分视图/tokenizer 偏好都会保存到 localStorage，所以刷新后一切都会恢复。如果打开页面时存在可分享的 URL hash，它优先生效。

Question 26

为什么格式化错误条有时会出现？

Accepted Answer

当 Prettier 的解析器无法解析您的输入时——通常是因为所选解析器与代码不匹配（例如选了 CSS 却粘贴了 JSX）——错误消息会显示在 diff 上方的红色条中。把解析器切换到与您的代码匹配，错误就会消失。

Question 27

我可以针对 JavaScript 以外的语言预览我的配置吗？

Accepted Answer

可以。Preview tab 在 diff 切换按钮旁边有自己的 parser dropdown，每个 parser 都配有专门设计的示例——CSS、SCSS、Less、HTML、Vue、Angular、JSON / JSON5 / JSONC、Markdown、MDX、YAML、GraphQL，以及 TypeScript / JS。切换 parser 会用你当前的选项重新格式化对应的示例，因此像 proseWrap、htmlWhitespaceSensitivity、vueIndentScriptAndStyle 这类语言特定选项都有地方展示其效果。你的选择会在重新加载后保留。

常见问题