用 Prettier 格式化 JavaScript 代码

假如你有过编程经验的话，你应该很清楚，很难做到既让代码简洁明了，又使不同的代码书写风格在一个项目中保持一致性。即便你花了很多时间达到了这个目的，其它的开发者也会提交他们的修改或者禁用某些标志以方便他们快速提交代码，从而让你的努力功亏一篑。

在格式化代码上浪费时间是一件很枯燥的事情，Prettier 的目标便是解决这个问题。它将用简单的设置来帮助你克服格式化带来的困扰。

Prettier 可以做什么？

Prettier 是一个很有特色的代码格式化工具，它可以使整个代码库的格式化过程自动化。因此在设置好 Prettier 之后，你不再需要与同事讨论代码格式化规则、分号、换行符等问题了。它会导入你所有代码，删除所有格式，并根据其样式规则重新格式化代码。

在 Prettier 环境下，所有的 javascript 代码都会转换为抽象语法树，然后被重新格式化。因此，它确保不会对编写的代码进行任何破坏更改。对你来说，所有的东西都会被神奇地格式化，这你并不用担心。

例如：

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());会被被格式化为

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

如果你想让体验一下，可以使用 playground 来试试。总结一下:

与ESLint 的差异

这是最常见的问题之一，简明的回答是ESLint 只是一个代码质量工具(确保没有未使用的变量、没有全局变量，等等)。而Prettier 只关心格式化文件(最大长度、混合标签和空格、引用样式等)。你可以将ESLint 和Prettier 结合起来使用，以获得双赢的组合。

Editorconfig 的作用

Prettier 1.9 版本之前会从 editorconfig 中读取配置值，推荐的配置选项包括:indent_style、indent_size/tab_width 和 max_line_length。

如何设置

如上所述，Prettier 的自动化程序会将整个代码库格式化。以下是你可以使用 Prettier 的场景:

• 编辑器插件
• CLI
• Pre-commit hooks

在编辑器中使用

进入网站的交互页面并下载相应的插件，在你的IDE/ 编辑器中安装它。这应该是一个非常简单的过程。对于Visual Studio Code，你只需要从市场下载便可。之后，在用户设置中添加了一个首选项(“editor.formatOnSave”: true)。这样便可以起效了。我还根据我的需要设置了"prettier.singleQuote": true，其它的编辑器属性也可以在这里设置。

在项目中使用

你需要先安装Prettier 的CLI。我们将把它添加为dev 依赖项， (yarn add prettier --dev --exact or npm install --save-dev --save-exact prettier)。Prettier 推荐在项目中安装恰当的版本，因为Prettier 会在补丁发布时引入代码格式的变化。安装成功后，要针对某个特定文件运行的话，只需要运行命令yarn prettier --write index.js，这样便可在当前目录生成index.js 文件。

你可以根据需要配置Prettier 的其他选项，通常使用配置文件来做。也可以将这些添加到.prettierrc 文件中并放置在项目的根文件夹下。可用选项可以在网站上找到。

然后，你可以将这个命令添加到你的NPM 脚本中，并将src 文件夹作为一个glob 传递给它，而不是一个单独的文件。格式化脚本是这样的：prettier --write ‘./src/**/*.{ts,js,css,json}’。

如果你没有使用这种复杂的配置，也没用.prettierrc 文件，你也可以使用命令行参数指定选项配置。

然后你可以将其作为构建步骤的一部分进行调用。所有的改变也都会生效的。

在项目中，你可以更进一步将Prettier 代码整合为一个pre-commit hook。你需要安装husky 来配合lint-stage /pretty-quick 使用(如果你正在使用其他工具，比如ESLint，请使用lint-stage)。从NPM 安装这些包作为dev 依赖项之后，你可以将以下配置添加到package.json 文件中:

pretty-quick:

"scripts": {
    "precommit": "pretty-quick --staged”
  }

lint-staged:

"scripts": {
   "precommit": "lint-staged",
   "lint-staged": {
    "*.{ts,js,css,json}": [
       "prettier --write", 
       "git add"
     ]
  }
}

要注意的是，当你将 prettier 作为一个 pre-commit hook 运行时，它会破坏你项目的状态。一个解决方案 ( gocarsno 在 Reddit 上建议的) 是在提交之前存储所有尚未载入的变更 (git stash -k)。

你可以更进一步在项目的构建步骤中添加另一个检查。Facebook 是这样做的，我是在一个员工会议演讲中知道这件事的。你可以在文件上的 CI/CD 服务器上运行 Prettier，如果 Prettier 的文件输出与签入的文件不同，那么服务器编译就会失败。你可以选择这样做，这取决于你依赖它的程度。

你还在等什么? 赶紧去配置使用 Prettier 吧！别再人工格式化项目代码了，让机器为你做这事。

分享这篇文章，我也是为了让更多的人发现 Prettier 的魅力。

英文原文链接： Using Prettier to format your JavaScript code