开始正确使用Prettier

背景

如果你和我一样，安装了 Prettier 扩展程序，启用了保存时格式化，却发现保存后代码格式总是乱跳，最终不得不禁用它，那么你肯定也遇到过类似的情况。我花了很长时间才真正掌握 Prettier 的正确用法。这篇文章的目的就是为了帮助你避免我曾经犯过的错误。

设置 Prettier

如果您尚未安装 Prettier，请立即安装。
安装 Prettier

在项目根目录下创建以下文件：.prettierrc

此文件将包含我们希望 Prettier 在此项目中遵循的所有规则。

如果你想要漂亮的代码却不知道为什么，只需将代码粘贴到新文件中即可。

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true
}

如果想了解每一行的含义，请继续阅读。

解释

尾随逗号

从 ES5 开始，我们可以在 JavaScript 中使用尾随逗号（注意 JSON 中不允许）。我非常喜欢这个特性，因为它允许你立即向对象添加属性，而无需查看上面的代码行是否记得输入逗号。一个字符看似无关紧要，但相信我，它确实很重要。

让我们来看看这个选项是如何运作的。

{ "trailingComma": 2 }

// turns this
let obj = {
  foo: "foo",
  bar: "bar"
}

// into this
let obj = {
  foo: "foo",
  bar: "bar",
}

标签页宽度

这是最容易解释的改动之一。我将 Tab 键的宽度从 4 个空格（默认值）改为 2 个空格。这样代码看起来更简洁，也更容易阅读。

选项的实际应用。

{ "tabWidth": 2 }

// turns this
let obj = {
    foo: "foo",
    bar: {
        bar: "bar"
    },
}

// into this
let obj = {
  foo: "foo",
  bar: {
    bar: "bar"
  },
}

分号

JavaScript 的一大优点是自动插入分号。但当团队中有人习惯使用分号而有人不习惯时，这可能会很麻烦。`semi` 选项会在格式化时自动添加分号，让团队中的每个人都能看到实际的分号位置。

选项的实际应用。

{ "semi": true }

// turns this
let foo = 0
let bar = 10

// into this
let foo = 0;
let bar = 10;

规范报价

最后两个选项的功能相同。最后一个选项仅在编写 JSX 时需要。这些选项会将所有双引号转换为单引号。如果您需要使用撇号，只需使用 Esc 键，Prettier 就会将该字符串格式化为双引号。

选项的实际应用。

{ "singleQuote": true }

// turns this
let foo = "Hello World"
let bar = 'Don\'t try this at home.'

// into this
let foo = 'Hello World'
let bar = "Don't try this at home."

最后想说的话

现在我开始真正了解 Prettier 以及如何将其用于我的特定工作流程，它正逐渐成为一个非常宝贵的工具，使我成为一个更高效的开发人员，编写出更简洁的代码。

我是否遗漏了您认为任何文件中都必不可少的选项.prettierrc？
您是否希望看到更多关于 Prettier 或其他编码工具的文章？请告诉我！

非常感谢您的阅读！