在大型项目中更漂亮：花20分钟进行设置，永远不必格式化

开发人员通常不同意格式化代码的方式，许多人通常会开始工作：括号错误或没有将内容转移到新行。



一年前，Skyeng的一个团队几乎在每条评论中都遇到过这样的抱怨。 但是，最痛苦的人说：“现在我们住在Prettier上，您同意吗？”在接下来的几个月中，这些家伙们再也没有提出过格式化的问题，而现在这件事已经出现在整个前端单一存储库中，每个团队都在使用它。谁在那里打电话。

和以前一样

当时，Skyeng已经有数十名开发人员，每个月可能会有10-20名新移民。 每个人都以小组形式工作（和工作）-实际上，每个人都被认为是一个独立的“作战单位”，具有自己的任务和理解。

让我们想象一个这样的命令-当然所有巧合都是随机的-命令：

鲍里斯是另一家大公司来找我们的中间人。 他们有自己的样式指南，但他尝试重新学习我们的样式指南：总体而言，他做到了，但是他有时会做一些有关格式化的事情，并且仅在代码审查中不了解它。 琐事，但不愉快。

Pavel是一位更有经验的开发人员。 他知道自己的工作，总是高效，准时地执行任务，但有时会完全忘记协议并以自己的方式写作。 结果，尽管它的代码质量高且富有品味，但却无法适合大型项目。

亚瑟（Arthur）是完美主义者，秉持“干净的代码-可理解的代码”的哲学：他始终担心代码风格。 当然，他会拒绝同事的代码，并带有一堆评论“在这里，将花括号放在下一行”-鲍里斯（Boris）将花时间在编辑上，而帕维尔（Pavel）则在“您不喜欢它，更改它”级别的论点上。

怎么了

Prettier的目标是使开发人员不要考虑格式化：它具有最少的设置。 当Arthur抛出一个指向项目聊天的链接时，这贿赂了Pavel：

-让自己更漂亮
-设置预提交挂钩（ 更多 ），
-在聊天室中留下了一些代码风格的注释（例如，ifs中的逻辑运算放在行的末尾，而不是开头）。

就是这样，所以团队切换到了Prettier。 以下是Prettier之前和之后的行业代码示例。 对其进行了稍微重新格式化，以显示此工具的功能。

至：

public listenDndForFocusEvents(channel: string): Observable<boolean> { return this.drag .pipe( filter( event => event.channel === channel ), filter( event => event instanceof DndDragStartEvent || event instanceof DndDragEndEvent ), map( event => event instanceof DndDragStartEvent ) ) } 

之后：

  public listenDndForFocusEvents(channel: string): Observable<boolean> { return this.drag.pipe( filter(event => event.channel === channel), filter(event => event instanceof DndDragStartEvent || event instanceof DndDragEndEvent), map(event => event instanceof DndDragStartEvent), ); } 

即使将它写成一行，它仍然会按其应有的格式重新格式化：

  public listenDndForFocusEvents(channel: string): Observable<boolean> { return this.drag.pipe(filter(event => event.channel === channel), filter(event => event instanceof DndDragStartEvent || event instanceof DndDragEndEvent), map(event => event instanceof DndDragStartEvent),); } 

另一段代码，已经没有分号了。 至：

 const lessonCount$ = this.studentLessonsCounterService .getCounter().pipe(map(featureInfo => featureInfo.lessonCount)) const isItTimeForNotification$ = lessonCount$.pipe(map(lessonCount => lessonCount % REAL_TALK_NOTIFICATION_LESSON_INTERVAL === 0)) 

之后：

 const lessonCount$ = this.studentLessonsCounterService .getCounter() .pipe(map(featureInfo => featureInfo.lessonCount)); const isItTimeForNotification$ = lessonCount$.pipe( map(lessonCount => lessonCount % REAL_TALK_NOTIFICATION_LESSON_INTERVAL === 0), ); 

现在，代码审查变得更快了，鲍里斯（Boris）不再花费大量时间来格式化已经编写的代码，帕维尔（Pavel）继续写着他写的东西（但是现在没有人在骂他），而亚瑟终于满意了，走进存储库并微笑着美容法规。 从2019年2月起使用一个简单的工具，伙计们停止了对格式的争论，从而节省了大量时间。 然后，他们说服其他团队也这样做。