个人认为技术人员掌握的前端框架不应该只限定在某一个（如 React、Vue），对于不同框架一般我是按照以下规则进行规范的，可有选择性的调整。

小驼峰式命名法 camelCase | lowerCamelCase

大驼峰式命名法 CamelCase | UpperCamelCase

蛇形命名法，也称下划线命名法 snake_case | SNAKE_CASE

串式命名法，也称破折号式、连字符式 kebab-case | dash-case

1. 项目组织

ToDo

2. 类、变量、参数

  • 类采用 UpperCamelCase （大驼峰命名）形式。
  • 接口参数为了序列化一般设计成 snake_case 形式，为了对齐接口参数，变量命名一般也采用 snake_case 形式。如果与后端更习惯于 camelCase，那么接口参数和变量可以统一采用 camelCase。
  • （不建议使用）接口参数为 snake_case 形式，变量为 camelCase 形式，这种形式可能需要大量转换命名。

3. 函数、工具

  • 习惯上，为了快速区分 组件 、变量 、参数，函数的命名是 camelCase，如 useColumns、useLocalStorage。
  • 函数、工具文件、文件夹的命名是 kebab-case形式，如 use-column.ts。

4. 常量、枚举

  • 常量和枚举的命名统一是 SNAKE_CASE 形式。与普通全小写 snake_case 不同，常量和枚举需要采用全大写的 SNAKE_CASE 形式。
  • 常量和枚举存储文件以 constants.ts 或 enums.ts 命名，存放在各个使用对象的最小父级目录。如果常量和枚举数量极少，可以直接存放在 api 文件内。

5. 组件

  • 文件、文件夹命名格式统一是 kebab-case，即小写字母和短横线(-)的组合，如文件夹 header-search ，文件 modal-form.vue、 modal-form.tsx。
  • 使用组件时，统一使用 UpperCamelCase 形式。
  • props 稍有区分，Vue 偏好于 kebab-case，React 只能用 camelCase。约定优先使用 camelCase。

Vue

1
2
3
4
5
6
7
<script lang="ts" setup>
import HeaderSearch from "@/components/header-search.vue";
</script>

<template>
  <HeaderSearch :modelValue="model_value"></HeaderSearch>
</template>

React

1
2
3
4
5
6
import React, { useMemo } from "react";
import HeaderSearch from "@/components/header-search.tsx";

export default () => {
  return <HeaderSearch modelValue="{model_value}"></HeaderSearch>;
};