从混乱到清晰：格式化 React 代码以获得干净可读的代码库

在开始一个新项目时，有一种在 React 开发人员中很常见的经历。您开始对代码的干净和可读性感到满意，只是编写了一些函数或组件，然后慢慢地看着您的代码库陷入混乱。您发现自己从上到下、从左到右滚动，反复重读代码行，并从一个文件移动到另一个文件。完成某个功能后，您希望永远不必再次打开该文件，因为您知道找到单个函数或变量需要多长时间，更不用说编辑或更改该功能了。

在本文中，我们将研究格式化在使代码库干净且可读方面所扮演的角色。我们还将探索实现一致格式的行业标准和最佳实践。

为什么要格式化你的代码？

格式对于代码的可读性和可维护性至关重要。但如何呢？

格式良好的代码有助于在视觉上分隔代码的不同部分，从而更容易遵循逻辑流程。正确的缩进突出了父组件、子组件、元素或选择器之间的关系。一致的格式可以增强您快速调试、修复和维护代码的能力。当与遵循相同格式规则的团队成员协作时，可以更轻松地理解彼此的代码而不会混淆。

减少精神负担是良好格式化的另一个好处。干净的代码需要更少的脑力去理解，让您能够更多地专注于解决新问题，而不是破译格式不良的代码块。

当团队坚持一致的风格时，每个人都可以做出贡献，而无需浪费时间重新格式化代码块以满足个人喜好。良好的格式也为代码库带来了纪律和专业精神。

最后，工具兼容性是一个显着的优势。开发人员使用依赖于一致格式的 linter、插件和 IDE。为了充分利用这些工具并从自动完成和错误突出显示等功能中受益，您的代码库需要正确的格式。但如何实现这一目标呢？

格式化代码库涉及什么？

当谈到格式化代码库时，我们通常指几个方面：缩进、行长、命名约定、间距、大括号和圆括号、引号的一致使用、分号的使用、文件和文件夹结构以及适当的使用评论。现在让我们了解如何使用和实施这些标准的行业标准。

1. 缩进
   缩进是使用空格以直观方式将代码组织成层次结构。这里的行业标准是使用 2 或 4 个空格并避免使用制表符。根据 Airbnb 的 JavaScript 和 React 风格指南，您应该使用 2 个空格。这是因为它保持了一致的嵌套级别并提高了代码的整体可读性。

2. 线长度
   这里的行长度是指您在一行上编写的代码应该延伸多远。这里的行业标准是将一行保持在 80 到 100 个字符之间。很多指南，特别是 PEP 8 和 prettier 推荐 80 个字符。这是因为它可以防止水平滚动，并且通常在不同的屏幕尺寸上都能很好地工作。但这是否意味着在编码时必须进行计数？不，至少当您使用像 vscode 这样的代码编辑器时不会。下图显示了如何判断特定行上有多少个字符。下图显示您位于第 44 行，第 93 个字符。如果您还没有触及默认设置，您可以在 vsCode 编辑器的右下角找到它。

1. 命名约定
   
   这是指以一致的方式命名事物的一组规则。清晰、有意义且精确的命名对于编写易于阅读、理解和维护的代码至关重要。变量和函数最流行的命名约定是使用驼峰命名法（一种通过将每个单词的第一个字母大写而不使用空格来分隔短语中的单词的方法）。对于 React 组件，应该使用 PascalCase，特别是因为组件的第一个字母应该大写，如 React 文档中所述，对于常量，建议使用大写蛇形大小写。本节没有做到命名公正。如果我要深入命名这篇文章会变得太长。如果您有兴趣了解更多信息，请查看这篇有关命名约定的文章。

2. 间距
   为了清晰起见，建议在运算符周围添加空格，特别是因为某些运算符在组合使用时会执行不同的操作。还建议使用空行来分隔代码的逻辑部分。尝试对函数声明和逻辑进行分组并使用空行空间变量声明和赋值。

3. 大括号和括号
   根据 Airbnb 风格指南，不应有悬空大括号，这意味着您应将所有右大括号或括号与相应的左大括号或括号正确对齐。

4. 一致的报价
   使用引号时，建议在整个项目中使用单引号 '' 或双引号 ""，同时尽量避免不必要地使用两者的组合。

5. 分号
   就像使用引号一样，您决定要么使用分号来结束表达式、赋值和代码行，要么根本不使用分号，但无论您的决定是什么，请坚持并保持一致。我个人建议使用分号以避免自动分号插入带来的问题。

6. 文件和文件夹结构
   对于文件和文件夹结构，项目大小和技术堆栈等因素主要决定文件和文件夹的结构，但有 2 个一般规则需要遵循。 1 将相关文件分组在一起。 2 使用有意义的文件名。

7. 评论
   代码库很容易与代码聚集在一起，因此不要因过度使用注释而使情况变得更糟。如果您有良好的命名约定并编写没有反模式的干净代码，那么您通常应该能够避免使用注释。就像罗伯特·C.马丁说“注释本质上并不是坏事”，但它们通常是“未能在代码本身中表达意图的标志”。注释确实在代码中占有一席之地，它们显示了代码存在的原因，而不是代码块的工作原理，因此如果您的代码涉及不明显的决定或解决方法，则应使用注释。因此，避免反模式可以消除解释代码的方式的需要，并避免解释代码已经表达的内容。

以下是一些行业设置风格指南的链接

Airnbnb Javascript 风格指南。
StandardJs 风格指南
更漂亮的默认值
.

所以总而言之，正确格式化你的代码不仅仅是为了美观。它极大地提高了代码库的可读性、可维护性和可扩展性，并且通过采用流行的行业标准，您可以确保代码的一致性和干净

以上是从混乱到清晰：格式化 React 代码以获得干净可读的代码库的详细内容。更多信息请关注PHP中文网其他相关文章！