自我介绍
我是一名大学四年级学生，自八月以来一直在 Landit Co., Ltd. 担任开发实习生。
我几乎没有实践经验，我只是在另一个实习生中使用 Vue 进行产品开发大约一个月。
是什么启发了我写这篇文章
我们要求员工审查代码并收到很多评论。当我在想“我怎样才能让别人更容易阅读我的代码？”时，我看到了一个视频。
视频中介绍了一本叫《可读代码》的书，我在图书馆看的时候，里面有写“易读好代码”的技巧。
事实上，当我把它付诸实践时，评论的数量减少了大约 60%。
这一次，我将介绍阅读和练习可读代码时最有效的 5 件事，以及在两个月的开发中让人阅读代码的 5 件事。
1. 通过读码了解代码文化！
在团队开发中，对齐代码很重要。
如果每个人编写代码的方式明显不同，可读性就会降低，并且会成为 bug 的滋生地。
如果您没有经验，则倾向于以自己的方式编写，尤其是因为您已经编写了自己的代码，但是在团队开发的情况下，始终如一很重要。通过保持代码的一致性，可提高可读性、可维护性和工作效率，并且可以减少在其他实现和错误修复期间浪费的时间。
尽可能在开始工作之前获得源代码，最好阅读代码，了解代码文化，并检查是否有任何编码或命名约定！
当然，这并不意味着在评论中指出很多事情是不好的。不过为了尽量减轻审稿人的负担，不增加他们的精神负担，我觉得提前了解一下代码文化会是一个加分项！
我有过这样的一集。
在 JavaScript 中执行异步通信时，存在使用 await/catch 或 then/catch 的问题。
在我个人开发中，主要使用了then/catch，所以写在then/catch中，但是当我收到review的时候才知道我是分开使用await和catch的。
如果您提前阅读代码，您可以阻止它。
为了防止这种情况发生，我尽可能多地阅读其他成员的拉取请求！
2.名字可以很长，所以很容易理解！
这可能因公司或团队而异，最近我认为标准是在CSS等中不使用缩写。
<h1 class="ttl"></h1> titleの事かな？
<p class="msg"></> messageの事かな？
这是不可读的代码。
如果只有您阅读代码，缩写就可以了，但在团队开发中，除了您之外的其他人阅读代码。对于工作组合，公司工程师阅读代码。
无论如何“读者”让我们记住这一点来编写代码！
为了防止这种情况发生，让我们使用一个能够传达含义的名称，即使它很长。
想象一个 TODO 应用程序作为初学者的常见示例。
❌ どんな値が入っているかイメージできない
const list
const item
⭕ 複数形だからTODOの配列だとイメージできる
const todos
const todo_list
如果作用域在函数内部是封闭的，抽象命名是可以的，但最好根据作用域使用适当的名称。
如果我命名有问题，我会参考这个网站。
3.变量和函数/分开文件以提高可读性。
初学者倾向于在一个函数中编写长代码。
尤其是Rails、Laravel等在校学习的，会在controller中写很久。 （我也一样，，，）
开学初期，习惯码字很重要，一开始没关系！但在实践中这是糟糕的代码。
这不仅适用于函数和变量，也适用于使用 React 和 Vue 创建组件。
示例）检查 TODO 是否包含特定反应，如果是，则将 TODO 名称数组放入 todoTitles 变量中
❌ 悪いコード
const todoTitles = todos.map((todo) => {
if(!todo.reaction.filter((reaction) => reaction.name === 'check').lenght > 0) return;
return todo.title;
})
⭕ 読みやすいコード
const todoTitles = todos.map((todo) => {
const hasTargetReaction = todo.reaction.filter((reaction) => reaction.name === 'check').lenght > 0;
if(!hasTargetReaction) return;
return todo.title;
})
不良代码包括if条件中的复杂处理，仅通过阅读代码并不清楚在做什么。
反之，易读的代码更容易阅读，因为复杂的处理放入变量中，变量命名更容易理解代码中的值是什么。
包含如此复杂表达式的变量解释变量或者汇总变量等等。
4. 避免拼写错误！
在编写代码时，拼写错误很常见。
特别是我觉得英语不好的人很多。 （我也是，，，）
Typo 可能会导致意外的错误，并且在搜索代码时很难找到它们。但我很尴尬把这些放在一边……
甚至我也被教了一个可以大大减少拼写错误的神插件。
就我而言，我经常使用 VScode，因此仅限于 VScode，但使用名为“Code Spell Checker”的插件几乎可以消除拼写错误。
如果您有像图像这样的错字，蓝色波浪会告诉您错字在哪里。
另外，我想介绍“错误镜头”和“代码拼写检查器”。
Error Lens 在编辑器上显示通过静态分析 VScode 发现的错误，因此开发人员可以立即注意到错误和警告拼写错误。
这可以捕获大多数拼写错误！
另外，当您输入意外的值时，让我们防止拼写错误。
例如，想象一下实现一个过滤器按钮。
<FilterButton
isSelected={"all" === selectedStatus}
onClick={() => onClickFilterStatus("all")}
label="すべて"
/>
在此代码中，字符串“all”被写入 isSelected 和 onClick。
在这种情况下有两种可能性。
- 因为字符串“all”在多个地方描述，所以从all改成另一个字符串时需要更正所有地方（如“valid”）
- 写入“all”以外的字符时出现错误
为了防止这种可能性，字符串“all”是持续的通过用 定义，当字符串发生变化时，只需要改变一个地方，还可以防止非预期的值进入。
const ALL = "all";
<FilterButton
isSelected={ALL === selectedStatus}
onClick={() => onClickFilterStatus(ALL)}
label="すべて"
/>
5. 在请求代码审查之前检讨自己！
这是我最近意识到的。
毕竟是第一次做实际工作，在审稿过程中可能会收到很多评论。但是，如果同一点被一遍遍地指出来，对审稿方来说是一种负担，对自己也是一种负担。
在考虑了如何自己解决之后，我意识到我应该在 pull request 之前自己查看代码！
在GitHub上，创建pull request的时候会显示与merge destination的区别，所以到时候再过一遍
- 是否还有任何不必要的变量或注释？
- 变量和函数的名称是否易于理解且不被误解？
- 变量、函数和文件是否正确分离？
我正在检查这三点。
重点是用新鲜的眼光看是！ ！
就我而言，我往往会错过一些小错误，因为当我专心完成编码时，我会陷入“这很好”的错觉。一旦我完成编码，我就会有意识地休息一下，并以全新的眼光进行自我审查。
就这样，我感觉自己可以减少很多小错误，重构能力也在提高！
概括
我已经介绍了5个选择，但你怎么看？
有很多事情我想让你详细了解5个以上，但是如果你知道了这5个，我想你进入这个领域后就能很快适应开发工作，所以先试着用自己的作品集练习.请给我。
如果你在疑惑“写干净代码/写好代码”该怎么做，或者如果你是一个更感兴趣的初学者工程师，请购买开头出现的《可读代码》一书，希望你阅读.
新手工程师必读！ ！
原创声明：本文系作者授权爱码网发表，未经许可，不得转载;
原文地址：https://www.likecs.com/show-308632241.html