【从零打造前端团队生态系统】统一代码规范

本文主要是介绍【从零打造前端团队生态系统】统一代码规范，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

假装我是前端团队 leader。

众所周知，统一团队内的代码规范是非常必要的。

认识代码规范不统一导致的一些问题

• 引起不必要的错误。有些同学还没有代码规范这个概念，有时少写了一个“}”，可能需要花很长一段时间来排查。
• 引起不必要的合并冲突。特别是团队不断成长壮大，可能会出现一个项目多个人在进行开发维护，甚至同一个文件多个人在修改，这都是十分平常的。如果每个人都有自己的一套规范，合并代码时可能就会需要解决很多不必要的冲突。
• 无法定位一次 commit 的有效改动。比如当开启了保存时自动格式化功能，也许你只是加了一行注释，但由于团队内代码规范不统一导致对文件的大面积改动。

上面说的这些情况主要是关于代码格式方面的，代码规范还包括一些文法规范，当文法使用不规范时也会存在一些问题：

• 引起不必要的错误。比如通过“Object.create(null)”创建了一个对象，当使用“object.hasOwnProperty(key)”时就会造成报错。
• 造成意料之外的 bug。比如当你使用“var”来定义一个原本不希望它被更改的变量时，结果可能不尽如人意。
• 造成不必要的性能损耗。比如创建了不必要的临时变量等等。

认识统一代码规范的好处

当我们拥有良好的代码规范且在团队内保持统一时，有些问题就能被有效地规避，进而提升代码的可读性和可维护性，提升编码效率，对后续的自动化集成打下坚实的基础。

选择合适的代码规范指南

现在比较流行且完善合理的代码规范来自 Airbnb 团队，下面列出了他们团队产出的有针对性的代码规范指南：

• 《Airbnb JavaScript 风格指南》
• 《Airbnb React/JSX 风格指南》
• 《Airbnb CSS-in-JavaScript 风格指南》
• 《Airbnb CSS/Sass 风格指南》

使用工具来统一代码规范

Prettier

什么是 Prettier

Prettier 是一个代码格式化工具，它会移除原有的代码格式，然后输出统一的符合规范的代码格式。

为什么要使用 Prettier

• 可以帮助我们创建和执行代码格式规范，结束关于代码格式的无休止的辩论。
• 可以帮助新加入团队的同学快速融入公司的编码环境。
• 不需要花费大量的时间和精力来格式化代码，只需要简单的绑定就可以格式化代码。
• 非常易于使用，容易被大多数开发接受。
• 可以帮助我们补全没有考虑到的规范，并统一地实现和执行。
• Prettier 很火而且很稳。

如何在项目中将 Airbnb 代码规范指南与 Prettier 结合

• 安装：

yarn add prettier --dev --exact
# or globally
yarn global add prettier
复制代码

• 配置：可以参考Options来将 Airbnb 代码规范应用到 .prettierrc 中：

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "lf"
}
复制代码

• 编辑器集成：目前很多主流编辑器已经支持 Prettier 的集成：点我查看。如何在 VSCode 中集成 Prettier，可以参考《Prettier Formatter for Visual Studio Code》。当我们在 VSCode settings.json 中添加了默认配置时，编辑器将把这套配置作为备用方案。

ESLint

什么是 ESLint

Prettier 主要是做代码格式化的一个工具，它和 ESLint 差别还是比较大的。ESLint 可以对 JavaScript 和 JSX 代码进行检查，包含代码格式和代码文法。整体来说，ESLint 更能保证我们代码的质量，协助我们产出更健壮的代码。

为什么要使用 ESLint

• 所有都是可拔插的，它不和对应的格式化方法强制捆绑。
• 每条规则都相互独立，可以开启也可以关闭，或者设置为警告、错误。
• 我们可以通过丰富的文档而非繁复的沟通来自由地定义每一条规则。

如何在项目中将 Airbnb 代码规范指南、Prettier 与 ESLint 结合

• 可以参考《eslint-config-airbnb》来将 Airbnb 代码规范指南与 ESLint 结合。
• 可以参考Integrating with Linters来讲 Prettier 与 ESLint 结合。

编辑器集成

目前很多主流编辑器已经支持 Eslint 的集成：点我查看。如何在 VSCode 中集成 Prettier，可以参考《VS Code ESLint extension》。

使用工具来统一编辑器差异

EditorConfig

什么是 EditorConfig

EditorConfig 可以帮助我们统一那些使用不同的编辑器或者是使用不同的操作系统的同学的代码格式。

为什么要使用 EditorConfig

• EditorConfig 的定义文件简单易读。
• 可以使使用不同操作系统不同编辑器的同学更好地协同工作。

如何在项目中配置 EditorConfig

可以参考EditorConfig Properties来配置我们的 .editorconfig 文件：

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*]
indent_style = space
indent_size = 2
tab_width = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 100
复制代码

编辑器集成

目前很多主流编辑器已经支持 EditorConfig 的集成：点我查看。如何在 VSCode 中集成 EditorConfig，可以参考《EditorConfig for Visual Studio Code》。

把好最后一关

pre-commit

什么是 pre-commit

pre-commit 帮助我们在 commit 前执行一些类似于单元测试又或者是代码检测相关的工作。

为什么要使用 pre-commit

pre-commit 能确保：

• 通过 100% 的单元测试覆盖率
• 通过代码格式检测
• 通过代码文法检测

如何在项目中将 Prettier、ESLint 与 pre-commit 结合

可以参考Pre-commit Hook在我们的 package.json 文件中配置 pre-commit hook：

{
  "script": {
    "lint": "precise-commits && eslint . --ext .tsx,.ts,.jsx,.js --quiet"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn lint"
    }
  },
}
复制代码

到此结束

如果文章中存在什么问题烦请指正，谢谢。

这篇关于【从零打造前端团队生态系统】统一代码规范的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！