浅读Vue3代码10万行，总结出30个代码规范

本文通过对Vue3及Element-plus等代码库的分析，总结了30个前端代码规范，涵盖目录、模块、组件、事件等方面。这些规范能够提高代码的一致性、可读性和维护性，特别适用于多人协作的项目。

1. 目录和文件命名规范

1.1. 模块命名

采用kebab-case命名方式，以模块-子模块的格式命名，最多不超过2个单词：

• BAD: compilerCore
• GOOD: compiler-core, runtime-dom

1.2. 文件夹命名

文件夹命名使用kebab-case，以名词形式命名，功能相似的文件夹使用复数形式结尾：

• BAD: Components, Hooks
• GOOD: components, hooks

1.3. 组件文件夹命名

复杂组件拆分为多个子文件夹，子文件夹也以kebab-case命名：

• BAD: DropdownMenuItem
• GOOD: dropdown-menu, dropdown-item

1.4. assets目录规范

assets目录用于存放静态资源，命名以复数形式结尾，文件使用kebab-case命名：

• GOOD:

  - assets
    - images
    - icons
    - styles
  

2. 组件规范

2.1. 组件结构化

组件的文件顺序为：script、template、style。script部分的代码顺序为：props、emits、refs、computed、methods、events。

2.2. 引号规范

• HTML/模板中：标签属性使用双引号。
• JS中：字符串使用单引号。

2.3. 组件名命名规范

• 组件名称采用kebab-case，保持项目内统一：

  • GOOD: checkbox-button.vue, checkbox-group.vue

• 组件以描述性单词结尾，重要单词放前面，如search-button、search-input-query。

2.4. 子组件命名

子组件应以父组件名为前缀：

• GOOD: todo-list-item.vue, todo-list-item-button.vue

2.5. 组件Props命名

Props使用lowerCamelCase命名，模板中使用kebab-case：

• BAD:

  <welcome-message greetingText="hi"></welcome-message>
  

• GOOD:

  <welcome-message greeting-text="hi"></welcome-message>
  

2.6. 组件事件命名规则

事件名使用verb表示操作，或者采用noun-verb、verb-noun的形式：

• GOOD:

  defineEmits(['open-menu', 'state-change', 'before-enter'])
  

2.7. 组件模板属性

每个属性占用一行，提升可读性：

• BAD:

  <my-component foo="a" bar="b" baz="c"/>
  

• GOOD:

  <my-component
    foo="a"
    bar="b"
    baz="c"
  />
  

2.8. 复杂表达式提取到computed

避免在模板中使用复杂表达式，复杂逻辑应提取到computed：

• BAD:

  <div :style="{
      height: '30rem',
      transform: `rotateX(${parallax.roll}deg)`,
    }"></div>
  

• GOOD:

  const cardStyle = computed(() => ({
    height: '30rem',
    transform: `rotateX(${parallax.roll}deg)`,
  }))
  

3. JavaScript 规范

3.1. Boolean 类型变量命名

Boolean 类型的变量使用 is 或 has 前缀：

• GOOD: isString, hasFallback

3.2. Boolean 类型方法命名

Boolean 类型方法使用 is、has、should等前缀：

• GOOD: isTagStartChar, hasPropsChanged, shouldSkipAttr

3.3. 业务方法命名

方法名使用小驼峰命名，前缀为动词，如 create、init、get：

• GOOD: createElementWithCodegen, getBookData

3.4. 事件方法命名

交互事件命名以 on 开头，逻辑处理事件以 handle 开头：

• GOOD: onClick, handleIconClick, handleChange

3.5. 数据请求、处理类方法

数据请求方法以 get 或 fetch 开头，数据提交类方法以 post、send 或 upload 开头：

• GOOD: getBookData, postBookData

3.6. 类命名

类名使用PascalCase，常用命名规则：

• GOOD: BaseReactiveHandler, ScriptCompileContext

3.7. 常量命名

常量使用大写字母加下划线的命名方式，通常以复数形式结尾：

• GOOD: DAYS_IN_WEEK, MONTHS_IN_YEAR

3.8. 枚举命名

枚举名称使用PascalCase，值使用全大写字母加下划线：

• GOOD:

  export enum ErrorCodes {
    ABRUPT_CLOSING_OF_EMPTY_COMMENT,
    DUPLICATE_ATTRIBUTE,
  }
  

总结

代码规范能提高项目代码的一致性、可读性，尤其在多人协作开发中，保持统一的代码风格能够降低沟通成本。通过合理使用工具如 eslint、prettier 来保证代码的规范性，同时保持代码的工匠精神，坚持使用正确的代码风格。