Prettier 配置生成器
指导
Prettier 配置生成器
构建一个正确的 Prettier 配置，无需查阅文档。从清单中选择每个格式选项，为 Markdown、HTML、YAML 和 JSON 添加按语言覆盖设置，并将结果导出为 .prettierrc.json, .prettierrc.yaml，一个 ES 模块，一个 CommonJS 模块，或一个可直接粘贴的 "prettier" 键 package.json。一个匹配的 .prettierignore 模板将与之生成，以便您的仓库在首次提交时即可格式化。
如何使用
- 选择一个 输出格式 — JSON 用于最简单的共享文件，YAML 用于更易编辑的人类格式，当需要条件逻辑时使用 JS 模块，或当希望在仓库中减少一个文件时使用 package.json 键。
- 设置 核心选项：行宽、制表符宽度、分号、引号风格、尾随逗号、括号间距、箭头函数括号以及换行符风格。
- 调整 JSX 块，如果您的代码库使用 React，以及 Markdown & HTML 块，用于处理文本换行和空白字符。
- 启用任何 按语言覆盖 以对特定文件类型应用不同规则 — 例如，为 JSON 设置更宽的
printWidth，或为 HTML 设置单属性每行。 - 点击 复制 或 下载 在生成的配置中。将其放置在项目根目录下并运行
npx prettier --write ..
特征
- 所有官方 Prettier 选项 — printWidth、tabWidth、useTabs、semi、singleQuote、quoteProps、jsxSingleQuote、trailingComma、bracketSpacing、bracketSameLine、arrowParens、endOfLine、proseWrap、htmlWhitespaceSensitivity、singleAttributePerLine。
- 五种输出格式 — JSON、YAML、ESM（.mjs）、CommonJS（.cjs）以及 package.json 片段。
- 按语言覆盖块 针对 Markdown、HTML、YAML 和 JSON 提供合理的默认值，您可以直接复制或进行调整。
- 自动生成
.prettierignore模板涵盖构建输出、依赖项、锁定文件、最小化资产以及常见框架缓存文件夹。 - JSDoc
@type注解 应用于 JS 模块输出，以便编辑器提供自动补全和类型检查。 - 实时预览 — 每次更改都会立即更新输出，因此您可以几秒钟内对比不同选项组合。
常问问题
-
为什么 Prettier 故意只有很少的选项？
Prettier 的设计目标是通过有明确立场来结束风格争论。每个选项都是经过谨慎添加的，因为关于“正确默认值”的共识是不可能达成的。团队明确反对新增选项，以保持配置的可移植性和跨项目的一致性。因此，像“关键字周围添加空格”这样的选项是不可配置的 —— Prettier 将格式化选择视为商品决策，而非个人表达。
-
尾随逗号 'es5' 与 'all' 有何区别？
'es5' 在数组和对象中添加尾随逗号，这些位置在 ECMAScript 5 中是允许的，但在函数参数或调用中不添加。'all' 也在函数参数列表和调用位置添加尾随逗号，这在 ES2017 及以上是有效的，当添加或移除参数时能产生更清晰的 git 差异。'all' 是当前 Prettier 的默认值，也是任何目标现代 JS 或进行编译的项目推荐的选择。
-
Prettier 如何与 ESLint 交互？
Prettier 负责格式化；ESLint 负责正确性。它们在引号和分号等风格规则上重叠，导致 ESLint 报告的问题被 Prettier 重新写入。解决方案是 eslint-config-prettier —— 一个可共享的配置，它禁用了 Prettier 已经控制的每一个 ESLint 规则。先运行 Prettier 进行格式化，再运行 ESLint 捕捉错误。像 eslint-plugin-prettier 这样的插件，将 Prettier 作为 lint 规则运行，不再推荐，因为它们会减慢 ESLint 并掩盖错误来源。
-
在 Markdown 文件中，proseWrap 做什么？
'preserve' 保留您现有的换行符。'always' 在 printWidth 处强制换行，使源代码在任何编辑器中都可读，这在文档仓库中效果良好。'never' 将换行段合并为单行，这是在文件将被工具编辑或在环境中渲染时显示为独立段落的正确选择。默认值为 'preserve'，因为某些 Markdown 味道中换行符可能改变语义。
-
何时应使用 JS 配置而非 JSON？
当配置是静态且在团队间共享时，使用 JSON —— 它是最简单且最可移植的形式。当需要从包中导入共享规则、根据环境变量切换选项、从代码中的 glob 列表推导覆盖规则，或使用 TypeScript 类型通过 JSDoc @type 导入时，使用 JS 配置。JS 配置加载较慢，因为 Prettier 需要执行它们，但在编辑器保存速度下这种开销是不可见的。
