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