前端项目基本规范

一些工作中的前端项目规范和代码风格

项目及框架使用规范

• 文件夹、文件名称统一小写、多个单词以连接符（-）连接；

• JavaScript 变量名称采用小驼峰标识，常量全部使用大写字母，组件采用大驼峰；

• CSS 采用 SASS (看团队规范)；

• React 组件默认使用 memo 包裹；

• 组件内部引入其他组件或模块按以下顺序

  • 内置组件/模块
  • 第三方组件/模块
  • 自定义组件/模块/方法等
  • 样式文件

• React Hooks 组件内部基本按照如下顺序编写代码：

  • 组件内部 state 管理；
  • redux 的 hooks 代码；
  • 其他组件 hooks 代码；
  • 其他逻辑代码；
  • 返回 JSX 代码；

• redux 代码规范如下：

  • 每个模块有自己独立的 reducer，通过combineReducer进行合并；
  • 异步请求代码使用redux-thunk，并且写在actionCreators中；
  • redux hooks 中使用 useSelector 写法，不再使用 connect；

• 网络请求采用 axios

  • 对axios进行二次封装；
  • 所有的模块请求会放到一个请求文件中单独管理，组件需要用到时则导入

• Vue 使用组件

  • 使用组件名时统一使用大驼峰或者分隔符的写法(两者都可以，但需要统一)

编码规范

• 尾随逗号，尾随分号
• 文件末尾保留一行空行
• 统一使用单引号或者双引号
• 引入文件时，相对路径的引入需要放在绝对路径的引入下方