组件编码规范

  1. 安装VSCode插件CodeMetrics,原则上函数圈复杂度不超过20。
  2. 正确定义和使用TS类型,代码无TS类型报错。
  3. 变量采用语义化命名,原则上不需要通过注释说明变量或函数功能。
  4. 需注意逻辑和结构的拆分,原则上函数不应该超过50行。
  5. 目录下的子目录和文件数之和不超过10个。
  6. 原则上单个文件的代码行数不超过200行。
  7. 代码单行长度不超过140个字符。
  8. 代码块嵌套深度不超过4层。
  9. 组件props需在xx-types.ts文件中定义,并且导出相关参数和props的类型。
  10. 代码中不应该出现未使用的变量和依赖。
  11. 代码中不应该出现console等调试信息。
  12. 在setup函数返回的render函数中定义组件的DOM结构,而不是用单独的render函数来定义。
  13. 需要在组件的index.ts文件导出组件参数的类型,方便业务在使用组件时,利用组件导出的参数类型。
  14. 组件的import列表大致遵循以下几个原则:
    • 最上面应该是依赖的三方库,例如vue;中间部分是依赖的组件库的类型文件、子组件、工具函数等;最后一部分是依赖的样式。
    • 对于同一个库中的依赖,按照字典序排列,比如vue依赖中的defineComponent需要排在ref前面。
    • 中间部分的引入顺序为类型文件、子组件、工具函数。
  15. 需要区分从vue中引入的api和类型,对于类型的引入,需要通过import type引入,例如import type { Ref } from 'vue',类型引入应该紧跟在api引入的后面。
  16. defineComponent参数顺序为name、props、emits、inheritAttrs、setup。components和directives不需要在组件内显示声明。
  17. 变量和函数的声明顺序需要按照字典序排列。