前端代码规范

前端代码规范

• 命名分类
  • camelCase（驼峰式，即小驼峰命名，eg: userInfo)
  • PascalCase（帕斯卡命名式，即大驼峰命名，eg: UserInfo）
  • kebab-case（短横线连接式，eg: user-info）
  • snake_case（下划线连接式，eg:user_info）

1. vue模板规范

<template></template> ------ 模板
<script></script> ---------- 逻辑
<style></style> ------------ 样式

# 按照[模板]、[逻辑]、[样式]的顺序来组织vue页面的编码

2. script 中编码规范

<script lang="ts">
	const p1 = 'p1';
  const p2 = 'p2';
  
  function p3() {
    console.log('p3');
  }
</script>

1. 变量定义集中在script的顶部
2. 方法推荐使用[function命名函数]的写法，function函数属"一等公民"，会自动提升作用域至顶层，解释执行时不会报错未定义
3. 建议每行结尾添加结束符[;]，虽然js不加不会报错，但是[;]并不是js独有的结束符，在静态编程语言中都存在，避免养成坏习惯
4. 在确定业务边界的情况下，尽量使用es5+规范，减少冗余提高代码质量。如：解构、可选链、async/await...

3. 项目目录命名规范

名称保持简短，唯一，语义化，遵循小驼峰命名法

4. 组件命名规范

1. 命名遵循PascalCase约定。  组件文件除index.vue之外，一律采用PascalCase（大驼峰）写法
2. 组件名建议始终用多个单词，跟组件App除外。  如BookItem.vue，单独的Book.vue不推荐

5. 变量命名规范

如无特殊情况，统一使用小驼峰命名法，尽量符合语义，避免拼音首字母命名变量名

6. 代码版本管理规范

原始开发之后，新的功能需要拉取新的分支，在这个新的分支上开发新的功能，保证新功能的开发与原始功能相对独立

7. 代码提交规范

feat: 新功能（feature）
fix: 修补bug
docs: 文档（documentation）
refactor: 重构（即不是新增功能，也不是修改bug的代码变动）
test: 增加测试
chore: 构建过程或辅助工具的变动(包括但不限于文档、代码生成等）
perf: 性能提升
style: 修改代码格式，不影响代码逻辑
deps: 升级依赖