使用ESLint和Prettier编写有吸引力的代码

不要担心您的下一次代码审查

大约十年前，当我自由职业时，我可以随意编写代码。 我会养成不良习惯，并给只有我能理解的函数和类命名。 当我从一家拥有十几名其他开发人员的公司开始工作时，很明显，拥有一套编码标准对团队的成功至关重要。

在一个小型团队中工作使我了解了以快速有效的方式进行开发的准则和工具的重要性。

早在2012年，我们的前端团队就拥有一个共享的Visual Studio设置文件和一个简单的JSHint配置。 我们已经将JSHint配置为仅在构建整个项目或运行测试时抛出错误。 这在开发过程中效率不是很高，因为它不会实时导致错误或警告。 返回并修复代码始终是事后的想法，并始终将三重等于替换为二重等于。

今天进展很快，我们有大量文档概述了最佳实践，冗长的ESLint配置以及使用Prettier的出色格式。

让我们来看看我们如何到达那里。

基础

我们的团队有许多文档，其中包含准则，陷阱和可供参考的规则，并且这些文档会不断更新。 一个很好的起点是实际显示Javascript控件和HTML模板的代码示例。 我们将通过显示API调用示例，如何为类和订阅添加前缀以及在此过程中采用的许多其他约定来对此进行扩展。 我们甚至花时间创建了一个有助于开发的组件库，以至于我不敢相信我们之前没有做过。

您应该如何开始？

首先创建一个包含最佳实践的文档。 例如，如何为CSS类添加前缀，如何为事件处理程序和函数命名以及如何构建React组件。 记录最佳做法很棒，但是您如何执行它们呢？ 诸如命名约定和Javascript结构之类的首选项可能难以实施，但可以在设计和代码审查期间捕获。

对于语法模式，诸如引号和分号之类的细节或全局格式，我们需要查看诸如ESLint和Prettier之类的工具。

ESLint

ESLint是用于Javascript的整理工具。 它有助于使您的代码更加一致，并在不同的编辑器和开发人员之间执行其规则。 通过警告不良的编码习惯和潜在问题，它可以帮助防止将来出现问题。

我们的团队添加了我们自己的规则，并扩展了我们现有的配置。 Airbnb提供了坚实的配置，许多其他公司也以此为起点。 除了一般的Javascript错误外，我们还使用ESLint来强制执行样式规则，例如自动换行，引号和多余的分号。 当我们的团队正在向React和JSX过渡时，这确实很有帮助，而且我们在ES6方面没有多年的经验。 ESLint帮助我们完成了这一过程，并警告我们在学习新技术时可能发生的问题。 在重构或清理代码时，通常会出现一个变量已分配但从未使用过的情况，或者我们忘记命名一个函数。 返回并更新这些内容以保持代码的可读性和可维护性是有益的。

如果您不同意ESLint默认提供的任何规则或配置设置，则始终可以将其关闭。 首次启用ESLint时，似乎每一行代码都用红色下划线标出，但是请放心，因为ESLint将为您提供答案，并且将帮助您成为更好的开发人员。

eslintconfig.json扩展了airbnb的

"extends": [
    "airbnb-base"
    "eslint:recommended",
    "plugin:react/recommended"
]

更漂亮

Prettier是一种格式化工具，可用于多种语言，而不仅仅是Javascript。 它有助于标准化格式，以便您的整个团队可以以类似的样式进行编码。

格式可能很棘手，因为每个人的编码风格都不同。 一个明显的好处是您不需要记住特定的样式，您可以开发自己喜欢的样式并将其格式化。 我们决定“测试驱动器” Prettier，并允许其使用特定命令格式化代码。 每当您保存文件时，许多团队都会启用它，但是我们选择首先采用按命令的方法。 其背后的原因之一是使代码审查易于管理。 通常，我们将保存格式，直到准备好合并更改并运行Prettier。 我们了解此工具提供的价值，并决定采取逐步的方法。

入职

当我们的团队添加新成员时，我们将要求他们审查一般开发文档以及最佳实践文档。 在对它们进行审查之后，新开发人员可以在对我们的编码标准有基本了解的情况下完成他们的第一个任务。

另一种方法是让新成员跳出深层次，并立即开始编写代码。 如果演习有充分的记录，那就好了，但是拥有一个可以引用的真理来源也很重要。 大多数项目都包含遗留代码，如果开发人员将其用作起点，则不是很有帮助。

摘要

ESLint和Prettier之类的工具非常重要，因为它们提供了每个开发人员都必须遵循的一组规则。 我们的团队使用Git和Bitbucket进行版本控制，并利用请求请求功能进行代码审查。 查看代码时，我不想看到多余的空格，换行符和任何其他干扰，我只想查看您添加或更新的代码（除非Prettified） 。 没有这些规则，开发人员将不愿审查同行的代码，并且团队的压力水平将上升。

开发人员应该能够阅读您的代码并准确知道正在发生什么，而无需使用大量注释。

您能想象一下，试图教给新开发人员您的团队在过去十年中遵循的所有编码警告吗？ 这将花费数月的时间，对于新开发人员也不公平。 现在，明智的方法是让您的编辑者进行教学。 ESLint和Prettier之类的工具使我们的团队成为更好的开发人员，并使我们的工作更快。

如果您想对这些工具有更多的了解，请查看语法播客，Scott Tolinski和Wes Bos在其中进行了深入探讨。

https://syntax.fm/show/113/hasty-treat-code-quality-tooling

From: https://hackernoon.com/write-attractive-code-with-eslint-and-prettier-27d562b8ae9f