mmdoc

Appearance

命名规范 ​

关于前端命名的一些规范

释义 ​

针对命名方式。我们有几种说法。这里统一说明.

  • 驼峰命名法（Camel Case）：每个单词的首字母大写，没有空格或其他分隔符。例如：myFileName.ts。

  • 帕斯卡命名法（Pascal Case），也称为大驼峰命名法，是一种常见的命名约定，用于命名变量、函数、类和文件等。例如 MyClass.ts。

  • 连字符命名法（Kebab Case）：使用连字符（减号）作为单词之间的分隔符。例如：my-file-name.ts。

  • 下划线命名法（Snake Case）：使用下划线作为单词之间的分隔符。例如：my_file_name.ts。

  • 小写命名法（Lowercase）：所有字母均为小写，没有分隔符。例如：myfile.ts。

  • 小写下划线命名法（Lowercase Snake Case）。在这种命名法中，单词都以小写字母表示，并使用下划线作为分隔符。例如变量名：my_variable

  • 大写命名法（Uppercase）：所有字母均为大写，没有分隔符。例如：MYFILE.TS。

  • 大写下划线命名法（Upper Case with Underscores） 或 大写蛇形命名法（Upper Snake Case）。是一种大写加下划线命名法是一种命名约定。在这种命名法中，单词都以大写字母表示，并使用下划线作为分隔符。例如：MAX_RETRY_ATTEMPTS

指导思想 ​

当涉及文件命名时：

  • 选择有意义的名称：文件名应该能够清晰地描述文件的内容和用途。避免使用含糊不清、过于简单或无法识别的名称。

  • 使用英文：尽量使用英文单词或术语来命名文件，以确保代码库的可读性和可维护性。避免使用非ASCII字符、中文或其他非英文字符。

  • 使用目录结构：如果项目较大或复杂，可以使用目录结构来组织文件。在目录名称和文件名称中使用有意义的单词和分隔符，以便更好地组织和查找文件。

  • 避免特殊字符：文件名中应避免使用特殊字符，如空格、制表符、问号、星号等。这些字符可能导致在某些操作系统或文件系统中引起问题。

  • 使用约定俗成的命名规则：根据所使用的编程语言和开发环境，可以参考社区约定俗成的文件命名规则。例如，在 JavaScript/TypeScript 项目中，通常会使用驼峰命名法来命名类和函数，以及使用连字符命名法来命名文件和文件夹。

  • 文件名长度和可读性：尽量保持文件名简洁、明确和易读。避免过长的文件名，同时确保文件名足够描述其内容和用途。

  • 文件名后缀：根据需要，可以使用特定的文件名后缀来表示文件类型或用途。例如，.ts 表示 TypeScript 文件，.js 表示 JavaScript 文件，.css 表示样式表文件等。这有助于开发人员在浏览文件时快速识别文件类型。

保持一致性：在整个项目或代码库中，保持一致的命名约定非常重要。这样可以提高代码的可读性和可维护性，并减少团队成员之间的混淆和误解。

  • 遵守平台和工具限制：在为特定平台或工具命名文件时，请确保遵守其命名限制和约束。一些操作系统或版本控制系统可能对文件名长度、字符集和保留字符有限制。

最后，虽然有一些通用的命名约定和最佳实践，但每个项目和团队都可能有自己的独特需求和规范。因此，在您的项目中，最好与团队成员一起讨论和确定适合您团队的命名规则，并在整个项目中保持一致。

最佳实践 ​

针对团队和通用规范。我们定义了一套规范，具体如下：

通用 ​

下面是一些通用的命名规范：

目录统一使用 连字符命名法 ​

统一使用 连字符命名法，例如：my-file-name.ts。这个可能比较有争议。正常通用规范都是建议使用驼峰命名方法。但是实际操作中，我们发现。使用驼峰有几个小问题

  • 可读性不如连字符。
  • 前端包命名都是连字符方式
  • vitepress或者umi这类约定大于配置的方式，目录等于路径。但是路径正常时以连字符组织的。也更推荐连字符方式。

所以综合上，我们选择使用 连字符命名法。

文件统一使用 驼峰命名法 ​

正常文件使用此种命名。特殊文件以下会解释

常量统一使用 大写下划线命名法 ​

React 组件 ​

React 相关规范

单组件使用 帕斯卡命名 ​

例如：MyComponent.tsx。

目录组件使用 连字符 加 index ​

bash
- my-component
  - index.tsx
  - index.store.ts
  - index.module.less

组件名使用 帕斯卡命名 ​

tsx
const MyComponent = () => {}

Vue 组件 ​

Vue 相关规范

单组件使用 帕斯卡命名 ​

例如：MyComponent.vue。

目录组件使用 连字符 加 index ​

bash
- my-component
  - index.vue
  - index.module.less

组件名使用 帕斯卡命名 ​

tsx
defineOptons({
  name: 'MyComponent'
})