保持代码干净整洁

代码格式化似乎是一个琐碎的话题,但这会影响代码的质量和正确性,如何控制版本以及与他人协作的方式。但是,如果您不希望陷入困境,可以尝试将问题外包给开源工具Prettier。

格式化事项

在整个历史过程中,软件开发团队一直在浪费无数时间来争论最大行长或支架应该走哪条线。无论个人喜好怎么说,大多数人都同意至少一件事:代码格式应在整个项目中保持一致。

漂亮的工具旨在实现这一目标。给它一些代码,它将交出相同的代码,格式一致。 Prettier具有文本编辑器集成,命令行工具和在线演示。

说正确的语言

首先,您需要了解Prettier是否与您通常使用的一种或多种语言兼容。目前,Prettier专注于一组主要用于前端Web开发的核心语言,包括:

  • 的JavaScript
  • 的HTML
  • 的CSS
  • 萨斯
  • 降价促销
  • YAML

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

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

之前甚至试图安装更漂亮,你可能想看看操场。使用Web界面,您可以粘贴一些示例代码,并观察Prettier如何对其进行转换。这是了解该工具实际功能的好方法,但是如果您的要求较轻,它也可以用作使用Prettier的主要方法。

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

例如,尝试输入以下JavaScript:

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

漂亮的应该把它变成:

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

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

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

左下方的按钮允许您查看选项。在前面的示例中,尝试调整制表符宽度,在Common下切换–single-quote标志,或在JavaScript下切换–no-semi标志。

配置选项

漂亮的自我描述为“有条件的”,这是一种经过精心设计的选择,这意味着为了简化和保持一致性而牺牲了对细节的控制。它是为您设置的,然后让您忘却了,而不是全神贯注于代码的每个最后格式化细节。 (有关对每个最后一个格式化细节进行更细粒度控制的替代方法,请尝试使用eslint 。)

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

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

{
"tabWidth": 8
}

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

基本安装和命令行工具

使用yarn或npm,安装应简单明了。对于纱线:

 $ yarn global add prettier

对于npm:

 $ npm install --global prettier

全局安装Prettier之后,您应该可以输入:

 $ prettier

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

清理文件

要重新格式化文件,请使用类似于以下命令:

 $ prettier --write filename.js

这将覆盖原始文件,这通常是最方便的方法。另外,您可能只希望更漂亮地对项目中的每个文件进行操作:

 $ prettier --write .

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

您还可以将结果打印到标准输出中,而不用更改原始文件,这可以使您将输出保存到其他文件,或将其重定向到其他位置:

 $ prettier test.js > test2.js

检查文件

要使Prettier报告代码的整洁度而不实际进行任何更改,请对单个文件名或多个文件名使用–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.js
function example() {
console.log("hello, world");
}
$ prettier --single-quote tmp.js
function example() {
console.log('hello, world');
}

获得帮助

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

 $ prettier --help trailing-comma
--trailing-comma <es5|none|all>
Print trailing commas wherever possible when multi-line.
Valid options:
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是Sublime Text插件,可在编辑器中使用Prettier 。尽管有几种不同的安装JsPrettier的方法,但我们建议使用Package Control方法。您将需要已经安装了Prettier,然后打开Sublime Text的Command Palette,然后选择“ Package Control:Install Package”:

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

安装JsPrettier后,您可以右键单击任何打开的文件以对其进行格式化。您也可以auto_format_on_save的值设置为JsPrettier的设置,这将导致JsPrettier当你将它们保存在文本崇高自动清理任何兼容的文件。

原子

Atom的安装与Sublime Text非常相似:只需使用编辑器的内置软件包管理器来安装prettier-atom

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

Vim

Vim是一个非常强大的基于命令行的编辑器,不适合初学者。使Prettier与vim配合使用是相当复杂的,但仍然只有几个步骤:

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

Git可能是下载必要文件的最简单方法,但是任何使vim更漂亮的文件进入该开始目录的方法都可以完成。

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

这将导致清除文件:

将漂亮的东西集成到您的项目中

使用类似Prettier的代码格式化程序可以帮助维护易于阅读的代码库。它还可以帮助避免有关在编码时使用哪种特定样式的辩论,只需将这些决定外包给Prettier!

最后,可以设置一个git钩子,以确保在将代码提交到项目的存储库后始终对其进行清理。各个开发人员可以随意设置自己的代码格式,但中央副本始终是干净且一致的。