代码格式化似乎是一个无关紧要的问题，但它会影响代码的质量和正确性、如何控制版本以及如何与他人协作。但是，如果你不想陷入每一个大括号的细节中，那么可以尝试将问题外包给开源工具Prettier。

格式化很重要

软件开发团队在历史上浪费了无数个小时来争论最大的行长度或者括号应该放在哪一行。不管个人喜好如何，大多数人至少同意一件事：代码格式在整个项目中应该是一致的。

Prettier是一个专门为实现这一点而设计的工具。给它一些代码，它将返回相同的代码，以一致的方式格式化。Prettier集成了文本编辑器、命令行工具和在线演示。

说正确的语言

首先，你想知道Prettier是否与你通常使用的语言兼容。Prettier目前专注于一组主要用于前端web开发的核心语言，包括：

• JavaScript语言
• HTML格式
• CSS格式
• 萨斯
• 降价
• 亚马尔

还通过插件对其他语言提供开放式支持。

使用在线游乐场尝试更漂亮的游戏

在尝试安装更漂亮的之前，你可能想看看操场。使用web界面，您可以粘贴一些示例代码，并观察Prettier将如何对其进行转换。这是一个很好的方法，可以让你了解这个工具的实际功能，但是如果你的需求比较轻松的话，它也可以作为你使用Prettier的主要方法。

默认情况下，操场应该看起来像两个基本的文本编辑器面板，一个在左侧用于输入，一个在右侧显示Prettier的输出。最初您将看到一些示例代码，但您可以简单地删除所有这些代码并粘贴到自己的代码中。

例如，尝试输入以下JavaScript：

(function (){ window.alert('ok')}())

更漂亮的人应该把它变成：

(function () { window.alert("ok");})();

请注意，默认情况下，Prettier所做的更改包括：

• 将单引号字符串转换为双引号字符串
• 添加分号
• 将缩进转换为两个空格

左下角有一个按钮，可以查看选项。在前面的示例中，尝试调整选项卡宽度，在Common下切换--single quote标志，或者在JavaScript下切换--no半标志。

配置选项

Prettier自称“固执己见”，这是一种经过深思熟虑的设计选择，意味着为了简单和一致性而牺牲了对细节的控制。它的设计目的是让您先设置，然后忘记，而不是专注于代码的每一个最后的格式化细节。（对于对每个最后的格式化细节都有更细粒度控制的替代方法，请尝试eslint。）

然而，作者也认识到，有些决策的功能影响不仅仅是代码的外观。有些选项（包括用于遗留目的的选项）仍然存在，因此您至少应该了解它们的作用，即使您在默认状态下使用Prettier。

管理更漂亮的选项的最佳方法是将它们保存在配置文件中。有很多方法可以组织它，但是首先要创建一个名为的文件。prettierrc.json文件在本地项目目录中。它可以在标准JSON对象中包含任何受支持的选项，例如。

{ "tabWidth": 8}

无论是通过命令行还是支持的文本编辑器运行，Prettier都会读取相同的配置文件。

基本安装和命令行工具

使用纱线或npm，安装应简单明了。对于纱线：

$ yarn global add prettier

对于npm：

$ npm install --global prettier

在全球范围内安装Prettier后，您应该能够键入：

$ prettier

默认情况下，您将获得一个帮助文本屏幕，该屏幕将确认工具已安装并正常运行。

清理文件

要重新格式化文件，请使用类似以下命令：

$ prettier --write filename.js

这将覆盖原始文件，这通常是最方便的方法。或者，您可能只想让prettier处理项目中的每个文件：

$ prettier --write .

Prettier将运行在当前目录下的所有文件中，格式化它识别的所有文件。

也可以将结果打印到标准输出，而不是更改原始文件，这样可以将输出保存到其他文件，或将其重定向到其他位置：

$ prettier test.js > test2.js

检查文件

若要在不进行任何更改的情况下获得更漂亮的代码清洁度报告，请将--check标志与单个或多个文件名一起使用：

$ prettier --check .

根据Prettier的配置，对于每个与预期格式不匹配的文件，您将获得一行输出：

Checking formatting...[warn] .prettierrc[warn] .prettierrc.json[warn] Code style issues found in the above file(s). Forgot to run Prettier?

命令行选项

如果需要，Prettier的标准选项可以作为命令行选项使用。下面是一个--single quote标志如何影响输出的示例：

$ prettier tmp.jsfunction example() { c***ole.log("hello, world");}$ prettier --single-quote tmp.jsfunction example() { c***ole.log('hello, world');}

寻求帮助

命令行工具通过--help标志提供有关任何选项的信息性帮助：

$ prettier --help trailing-comma--trailing-comma <es5|none|all> Print trailing commas wherever possible when multi-line.Valid opti***: es5 Trailing commas where valid in ES5 (objects, arrays, etc.) none No trailing commas. all Trailing commas wherever possible (including function arguments).Default: es5

使用文本编辑器

一旦安装了Prettier，就可以在各种场景中使用它，这取决于您已经使用的工具集。很可能，你会使用一个文本编辑器。Prettier为大多数流行的应用程序提供了绑定，下面是如何设置其中三个：

崇高的文本

JsPrettier是一个极好的文本插件，它使Prettier在编辑器中可用。尽管安装JsPrettier有几种不同的方法，但我们建议使用包控制方法。您需要已经安装了Prettier，然后打开Sublime Text的命令面板并选择“Package Control:Install Package”：

然后搜索“jsprettier”并单击以安装：

一旦安装了JsPrettier，您可以右键单击任何打开的文件来格式化它。您还可以在JsPrettier的设置中将auto\u format\u on\u save的值设置为true，这将导致JsPrettier在您将兼容文件保存为崇高文本时自动清除它们。

原子

Atom的安装与Sublime Text非常相似：只需使用编辑器的内置包管理器安装更漂亮的Atom：

安装后，使用方法很熟悉：快捷方式或菜单项允许您按需格式化文件，而Atom设置允许您在保存文件时自动运行Prettier。

维姆

Vim是一个非常强大的基于命令行的编辑器，不适合初学者。使用vim变得更漂亮是相当复杂的，但仍然只有几个步骤：

mkdir -p ~/.vim/pack/plugins/startgit clone https://github.com/prettier/vim-prettier \ ~/.vim/pack/plugins/start/vim-prettier

Git可能是下载必要文件的最简单方法，但是任何让vim prettier进入start目录的方法都应该可以完成这项工作。

一旦安装，当文件保存在vi中时，Prettier将自动运行。也可以随时通过Prettier命令手动运行：

这将产生一个干净的文件：

将prettier集成到您的项目中

使用诸如Prettier之类的代码格式化程序可以帮助维护更易于阅读的代码库。它还可以帮助避免关于在编码时使用哪种特定样式的争论——只是将这些决策外包给更漂亮的人！

最后，可以设置一个git钩子，以确保代码在提交到项目存储库时总是得到清理。单个开发人员可以随意格式化他们的代码，但是中心副本将始终是干净和一致的。