在过去的五年里，我一直在不断尝试提高我的编码技能，其中之一就是学习和遵循最推荐的编码风格。
本指南旨在帮助您编写一致且优雅的代码，并包含一些提高代码可读性和可维护性的建议。它的灵感来自于社区中最受接受的流行指南，但进行了一些修改以更适合我的喜好。
值得一提的是，我是一名全栈 JavaScript 开发人员，我的所有笔记都特定于我的技术堆栈（MEVN），可能不适用于其他堆栈。

一般规则

避免代码重复

如果需要在多个地方编写相同的代码块（或具有一些可管理的差异），则必须将它们合并到一个函数中，并且以后只要调用该函数即可需要。

考虑松耦合

函数应该独立工作，这意味着只要输入和输出保持相同，编辑一个函数就应该

绝对不会对其他函数产生影响。每个函数应该不知道其他函数的定义，并作为一个单独的组件工作。在这种情况下，它只知道它的参数，无论谁调用该函数，相同的输入总是返回相同的结果。

宣言

首先，记住始终声明变量。

当不打算重新分配变量时，请使用 const 关键字。但是，您仍然可以对对象或数组变量使用 const，即使您计划重新分配它们的嵌套元素。
请注意，要求模块并始终使用 const 关键字定义常量变量。
当不能使用 const 时使用 let 关键字，只有在需要支持较旧的浏览器时才使用 var 关键字。

功能

功能应限于以下内容：

四个变量
四个参数
三十行代码（忽略注释）
四个分支（if-else、while、for、or-and、switch-case）

代码行应限制在 100 个字符，并且为了对功能进行分组/组织，最好使相关功能尽可能彼此靠近。

只要有可能，就使箭头函数语法优于传统替代语法。

弦乐

对普通字符串文字使用单引号 ' （而不是双引号 "），但对于嵌入变量/表达式的字符串、多行字符串以及包含单引号字符的字符串，请使用模板文字。

命名

命名变量时保持一致性至关重要。这意味着如果不同页面上的变量负责相同的数据，则它们应该具有相同的名称。

变量、函数、方法和参数的名称应该是自我描述的，这意味着任何人都应该能够通过查看它们的名称来了解（或至少做出合理的猜测）所包含的数据。

常量变量应大写，单词之间用下划线分隔。函数、变量和方法应遵循驼峰命名法，而 CSS 类和 ID 应遵循短横线命名法。

评论

注释应始终以大写字母开头，且不得超过 100 个字符。您可能还记得代码行遵循相同的规则，但请注意，如果行同时包含两者，则它们最多只能超过 150 个字符。

描述函数的注释不应该写在调用它们的地方，而应该写在定义它们的地方。

将注释放在一行代码之后，除非该行的长度超过 150 个字符。在这种情况下，对于多行代码，请将注释放在顶部。

对于if语句，注释应放在条件语句之后。

if (conditionIsTrue) { // 在此发表您的评论 doSomeThing(); } else { // 在此发表您的评论 doSomethingElse(); }

if (conditionIsTrue) { // Put your comment here
    doSomeThing();
} else { // Put your comment here
    doSomethingElse();
}

请记住，对于单行注释使用双斜杠 //，对于多行注释使用 /* */。在一行代码或条件语句中添加多行注释时，请将其放在 /* */ 内，这样 /* 写在代码前面，注释从下一行开始，*/ 写在新行上线。

if (条件为真) { /* 在这里发表您的评论 在这里发表您的评论 */ doSomeThing(); } 函数名(参数), /* 在这里发表您的评论 在这里发表您的评论 */

if (conditionIsTrue) { // Put your comment here
    doSomeThing();
} else { // Put your comment here
    doSomethingElse();
}

功能描述性注释

将注释放在 /** */ 包裹的函数之上。

使用@param {type}变量名描述来描述参数。
如果参数可以接受多个变量的类型，请使用@param {type1 | type2} 变量名描述。
如果参数是可选的并且可以不存在，请使用@param {type} [variableName] 描述。
如果参数有默认值（必须是可选的才能确实有默认值），请使用@param {type} [variableName =“value”]描述。
使用@returns {type}描述来描述函数输出。

/** * 此处描述该函数 * @param {type} normalVariable 普通变量 * @param {类型1 | type2} multiTypeVariable 具有多种预期类型的​​变量 * @param {type} [variableWithDefaultValue="value"] 可选变量，具有默认值，以防调用函数时不存在 * @param {type} [可选变量] 可选变量 * @returns {type} 描述 */ const 函数名 = (普通变量, 多类型变量, 带默认值的变量, 可选变量) => { doSomeThing(); }

if (conditionIsTrue) { // Put your comment here
    doSomeThing();
} else { // Put your comment here
    doSomethingElse();
}

关于带有req和res参数的服务器函数，不需要描述请求参数；仅使用@returns描述来描述响应。

/** * 此处描述该函数 * @returns 描述 */ 函数名 = (req, res) => { doSomeThing(); }

if (conditionIsTrue) { // Put your comment here
    doSomeThing();
} else { // Put your comment here
    doSomethingElse();
}

一般情况下，req、res、next、to、from参数不需要描述。

在HTML文件中，使用分隔代码的不同部分；因此用户可以轻松识别每个部分。

如果您在代码行中间写注释，请使用 /* */.

const calc_result = (firstNumber * secondaryNumber)/* 解释相乘的原因 */thirdNumber;

if (conditionIsTrue) { // Put your comment here
    doSomeThing();
} else { // Put your comment here
    doSomethingElse();
}

缩进

禁止尾随空格。

请记住，始终在表达式、运算符和符号周围以及逗号和大括号之后添加空格（如果它们是
而不是 行的最后一个字符。 仅在文件末尾（所有文件都应以空行结尾）、最后导入的模块之后、分隔 Template、Script 和 Style 标记以及 CSS 规则集之间允许（且必需）使用空行。
请记住使用 Tab 进行缩进，使用 Space 进行对齐。

命令

猫鼬模式的变量和组件的 Vue 反应状态按字母顺序排列，但其余时间按从最短到最长的顺序排列行。
按 put、get、post 和 delete 的顺序对路由方法进行排序，而每个方法本身均按字母顺序排列，并且所有路由应根据其 URL 进行分组。

包起来

虽然显然，这些并不是最好的建议，但我相信它们为任何有兴趣学习干净代码原则的人提供了一个坚实的起点。

此外，尽管严格遵守这些规则一开始似乎具有挑战性，但经过实践，它会变得更加简单。

在开发长期代码库时，必须强调坚持当前项目指南的必要性，即使它们还不够。如果您真的想重新审视项目的指导方针，请考虑最有益的修改并让它们逐渐注入到项目中。

封面图片来源：Pexels 的 luis gomes 拍摄