前端代码审查工具_前端代码审查中应检查的内容

前端代码审查工具

If you are part of a front-end team with several talents (including you), hundreds of commit might be pushed every day. Indeed, no matter the team methodology you use to deliver new features, each developer is working on a specific functionality.

如果您是拥有多个才华(包括您)的前端团队的一员，那么每天可能会推动数百次提交。 的确，无论您使用什么团队方法来交付新功能，每个开发人员都在致力于特定的功能。

In order to validate their changes, a developer should ask for a Merge Request (or Pull Request) to merge these changes into the common branch (the one used for reference). Other front-end developers will make a code review.

为了验证其更改，开发人员应请求合并请求(或请求请求)以将这些更改合并到公共分支(用于参考的分支)中。 其他前端开发人员将进行代码审查。

A code review is important for four reasons:

代码审查很重要，原因有四个：

• You can check if the code fulfills the specifications.
  您可以检查代码是否符合规范。
• You are informed about the code modifications, which will potentially lead you to change your modifications on your active branch or suggest some enhancements.
  您将获得有关代码修改的信息，这可能会导致您在活动分支上更改您的修改或提出一些增强建议。
• It’s a good practice to guarantee a quality code.
  保证质量代码是一个好习惯。
• It’s a way to share experiences, tips, and coding skills.
  这是一种分享经验，技巧和编码技能的方法。

Let’s see together what you should inspect in your next front-end code review.

让我们一起看看在下一个前端代码审查中应检查的内容。

Image source: Author 图片来源：作者

To review code changes, we will focus on five main topics:

为了查看代码更改，我们将重点关注五个主要主题：

• The quality of the code
  代码质量
• Efficiency and robustness of the code
  代码的效率和健壮性
• Are JS framework principles respected?
  是否遵守JS框架原则？
• GitFlow principles
  GitFlow原理
• Accessibility (a11y) and internationalization (i18n)
  可访问性(a11y)和国际化(i18n)

代码质量 (The Quality of the Code)

The quality level of source code is always difficult to evaluate, especially when it involves several files and, at a broader level, an entire application.

源代码的质量级别始终很难评估，尤其是当它涉及多个文件，更广泛地说，涉及整个应用程序时。

Anyway, good code must follow general software development principles, no matter the language. Here are some of them.

无论如何，良好的代码必须遵循通用的软件开发原则，无论使用哪种语言。 这里是其中的一些。

DRY和代码分解 (DRY and code factoring)

If we were asked for the first coding rule in software development that comes into our mind, we surely answer DRY, Don’t Repeat Yourself. It’s a key principle to avoid code redundancy.

如果我们被问到我们想到的软件开发中的第一个编码规则，我们肯定会回答DRY，不要重复自己。 这是避免代码冗余的关键原则。

Finding code duplication consists of inspecting the source code and spotting pieces of code that are repeated several times throughout a file or a bunch of files. It may take the form of a constant value, statements, or a set of static values.

查找代码重复项包括检查源代码并找出在一个文件或一堆文件中重复几次的代码段。 它可以采用常量值，语句或一组静态值的形式。

Then you can suggest to factor these lines of code with a new file containing static values or helpers/util functions that will be accessible anywhere in the project.

然后，您可以建议使用一个新文件将这些代码行分解为一个新文件，其中包含可在项目中的任何位置访问的静态值或辅助函数/实用函数。

Leveraging Javascript Framework’s techniques and features you use is a good habit. Whether you use Angular, React, or Vue.js, each one of them provides tools to factor pieces of code. You should check if a method can be reused as:

利用Javascript Framework的技术和功能是一个好习惯。 无论您使用Angular，React还是Vue.js，它们中的每一个都提供工具来分解代码段。 您应该检查方法是否可以按以下方式重用：

• a mixin

  一个混合

• an Angular or Vue directive

  Angular或Vue指令

• a filter or a pipe

  过滤器或管道

• an Angular service

  Angular 服务

• a React hook

  一个React 钩子

In addition, repeated templates can be extracted into a dedicated component or a fragment (if using React) to be reused as much as necessary. This follows the rule of component specialization from React.

此外，可以将重复的模板提取到专用组件或片段 (如果使用React)中，以根据需要进行重用。 这遵循了React的组件专门化规则。

有意义的评论 (Meaningful comments)

Clean code is self-explanatory.

干净的代码是不言自明的。

That is why clean code should not contain comments. Variable and method names should be super explicit. In such circumstances, reading code could be similar to reading a book — but that’s not always the case.

这就是为什么干净的代码不应包含注释。 变量名和