本期推荐的Prettier 是一个固执己见的代码格式化程序。它通过解析您的代码并使用自己的规则重新打印它来执行一致的样式，这些规则考虑了最大行长度，并在必要时包装代码。

什么是Prettier？

Prettier 是一个固执己见的代码格式化程序，支持：

• JavaScript (including experimental features)
• JSX
• Angular
• Vue
• Flow
• TypeScript
• CSS, Less, and SCSS
• HTML
• Ember/Handlebars
• JSON
• GraphQL
• Markdown, including GFM and MDX
• YAML

Prettier 通过考虑行长来获取您的代码并从头开始重新打印它。

例如，采用以下代码：

foo(arg1, arg2, arg3, arg4);

它适合一行，所以它会保持原样。但是，我们都遇到过这种情况：

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

突然之间，我们之前调用函数的格式就崩溃了，因为它太长了。Prettier 会为你做这样的工作：

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne()
);

Prettier在整个代码库中强制执行一致的代码样式（即不会影响 AST 的代码格式），因为它忽略了原始样式*通过解析它并使用其自己的规则重新打印解析的 AST，这些规则采用最大行长度考虑到，必要时包装代码。

基本原理

正确性

Prettier 的第一个要求是输出与格式化之前具有完全相同行为的有效代码。请报告 Prettier 未能遵循这些正确性规则的任何代码——这是一个需要修复的错误！

字符串

双引号还是单引号？Prettier 选择逃生次数最少的那个。”It’s gettin’ better!”，不是’It\’s gettin\’ better!’。如果平局或字符串不包含任何引号，Prettier 默认使用双引号（但可以通过singleQuote选项更改）。

JSX 有自己的引号选项：jsxSingleQuote。JSX 源于 HTML，其中属性引号的主要用途是双引号。即使源代码使用单引号，浏览器开发工具也始终使用双引号显示 HTML，从而遵循此约定。一个单独的选项允许对 JS 使用单引号，对 “HTML” (JSX) 使用双引号。

空行
事实证明，空行很难自动生成。Prettier 采用的方法是保留原始源代码中的空行。还有两个附加规则：

• Prettier 将多个空行折叠成一个空行。
• 块（和整个文件）开头和结尾的空行被删除。（不过，文件总是以一个换行符结尾。）

多行对象

默认情况下，Prettier 的打印算法在适合的情况下将表达式打印在一行上。但是，对象在 JavaScript 中用于许多不同的事情，有时如果它们保持多行，它确实有助于提高可读性。例如，参见对象列表、嵌套配置、样式表和键控方法。我们无法为所有这些情况找到一个好的规则，所以如果{原始源代码中的第一个键和第一个键之间有换行符，Prettier 会保持对象多行。这样做的结果是长的单行对象会自动展开，但短的多行对象永远不会折叠。
提示：如果您有一个多行对象，您想合并成一行：

const user = {
  name: "John Doe",
  age: 30,
};

您需要做的就是在以下内容之后删除换行符{：

const user = {  name: "John Doe",
  age: 30
};

然后运行 ​Prettier：

const user = { name: "John Doe", age: 30 };

如果您想再次使用多行，请在之后添加换行符{：

const user = {
 name: "John Doe", age: 30 };

然后运行 ​​Prettier：

const user = {
  name: "John Doe",
  age: 30,
};

JSX

当涉及 JSX 时，Prettier 打印的内容与其他 JS 相比略有不同：

function greet(user) {
  return user
    ? `Welcome back, ${user.name}!`
    : "Greetings, traveler! Sign up today!";
}

function Greet({ user }) {
  return (
    <div>
      {user ? (
        <p>Welcome back, {user.name}!</p>
      ) : (
        <p>Greetings, traveler! Sign up today!</p>
      )}
    </div>
  );
}

首先，很多人已经将他们的 JSX 包裹在括号中，尤其是在return语句中。Prettier 遵循了这种常见的风格。

其次，备用格式使编辑 JSX 更容易。很容易留下分号。与普通 JS 不同，JSX 中剩余的分号最终会以纯文本形式显示在您的页面上。

<div>
  <p>Greetings, traveler! Sign up today!</p>; {/* <-- Oops! */}
</div>

注释

说到评论的内容，Prettier 真的无能为力。注释可以包含从散文到注释掉的代码和 ASCII 图表的所有内容。由于它们可以包含任何东西，Prettier 不知道如何格式化或包装它们。所以他们保持原样。唯一的例外是 JSDoc 样式的注释（每行以 a 开头的块注释*），Prettier 可以修复它的缩进。

然后是在哪里放置评论的问题。事实证明，这是一个非常困难的问题。Prettier 尽最大努力将您的评论大致保留在原处，但这并非易事，因为评论几乎可以放置在任何地方。

通常，将注释放在自己的行而不是行尾时，您会得到最好的结果。更喜欢// eslint-disable-next-line.// eslint-disable-line

请注意，由于 Prettier 将表达式分成多行，因此有时需要手动移动“魔术注释”，例如eslint-disable-next-lineand 。$FlowFixMe

想象一下这段代码：
// eslint-disable-next-line no-eval
const result = safeToEval ? eval(input) : fallback(input);

然后你需要添加另一个条件：

// eslint-disable-next-line no-eval
const result = safeToEval && settings.allowNativeEval ? eval(input) : fallback(input);

Prettier 会将上述内容变为：

// eslint-disable-next-line no-eval
const result =
  safeToEval && settings.allowNativeEval ? eval(input) : fallback(input);

这意味着该eslint-disable-next-line评论不再有效。在这种情况下，您需要移动评论：

const result =
  // eslint-disable-next-line no-eval
  safeToEval && settings.allowNativeEval ? eval(input) : fallback(input);

如果可能，更喜欢在行范围（例如eslint-disableand eslint-enable）或语句级别（例如/* istanbul ignore next */）上操作的注释，它们甚至更安全。可以使用 来禁止使用eslint-disable-line和eslint-disable-next-line评论
eslint-plugin-eslint-comments。

安装Prettier

首先，在本地安装 Prettier：

npm install --save-dev --save-exact prettier

然后，创建一个空配置文件，让编辑器和其他工具知道您正在使用 Prettier：

echo {}> .prettierrc.json

接下来，创建一个.prettierignore文件，让 Prettier CLI 和编辑器知道哪些文件不能格式化。这是一个例子：

# Ignore artifacts:
build
coverage

现在，使用 Prettier 格式化所有文件：

npx prettier --write .

prettier –write .非常适合格式化所有内容，但对于大型项目可能需要一点时间。你可以运行prettier –write app/格式化某个目录，或者prettier –write app/components/Button.js格式化某个文件。或者使用glob likeprettier –write “app/**/*.test.js”格式化目录中的所有测试（请参阅fast-glob以了解支持的 glob 语法）。

如果您有 CI 设置，请在其中运行以下命令以确保每个人都运行 Prettier。这避免了合并冲突和其他协作问题！

npx prettier --check .

–check就像–write，但只检查文件是否已经格式化，而不是覆盖它们。prettier –write并且prettier –check是运行 Prettier 最常用的方法。

与 Linter 集成

Linter 通常不仅包含代码质量规则，还包含样式规则。使用 Prettier 时，大多数风格规则都是不必要的，但更糟糕的是——它们可能与 Prettier 冲突！使用 Prettier 解决代码格式问题，使用 linter 解决代码质量问题，如Prettier vs. Linters中所述。

在 Internet 上搜索 Prettier 和您的 linter 时，您可能会找到更多相关的项目。这些通常不被推荐，但在某些情况下可能很有用。

首先，我们有一些插件可以让你像运行 linter 规则一样运行 Prettier：

• eslint Prettier
• stylelint-prettier

这些插件在 Prettier 刚推出时特别有用。通过在你的 linter 中运行 Prettier，你不必设置任何新的基础设施，你可以为 linter 重新使用你的编辑器集成。但是现在你可以运行prettier –check .并且大多数编辑器都有 Prettier 支持。

这些插件的缺点是：

• 你最终会在你的编辑器中看到很多红色的波浪线，这很烦人。Prettier 应该让你忘记格式化——而不是面对它！
• 它们比直接运行 Prettier 慢。
• 它们仍然是事情可能中断的间接层。

—END—

开源协议：MIT license