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 修复和翻译改进。

常见问题