# 前端规范
🐴
# 前言😊
👻在开始部分我想表达的是，不按照书写规范进行代码编写并不一定是错误的。 代码书写规范只是为了约束团队的一些开发行为，统一团队的开发习惯，这在某种程度上来说是好的。当项目多人合作时，在没有约束的情况下，每个人放飞自我的进行着项目的开发，当你看到团队其它人的代码和自己平常书写风格完全不一样时，你内心会有怎样的感受？内心🐏🐏🐏🐏🐏...,
假如团队的编码风格一样，当你看到他人代码仿佛像是看到了自己写的代码是种什么样的体验？😃😃😃😃😃😃😃😃😃😃。所以下面这些规范我们所关心的并不是某个规范它的对错，而是对于团队的统一 以及 效率。
# 常规规范
变量声明优先使用
const和let变量名称使用驼峰法命名(如：
projectName)， 避免使用关键字常量名称使用大写(可以有下划线)，如：
PROJECT_NAME使用运算符时，前后留有空格，如：
const x = y + z公共文件命名使用大驼峰法 如：
MyComponent文件页面命名使用小驼峰或
-分隔， 如：myHome，my-home, 推荐使用my-home类型
# JavaScript书写规范
函数命名尽量使用小驼峰法命名，类名以及构造函数名称使用大驼峰法
缓存名称使用大写加下滑下方式 如：
sessionStroage.TEST_NAME = 1111函数书写名称前空格，括号后空格，如
function test(args) {
console.log(num)
}
- 函数注释规范
@name 函数描述
@author {author} 作者
@param 参数
@return {类型} 描述
/**
* @name 测试函数
* @param {arg} 什么参数，类型
* @return {void}
*/
尽量使用箭头函数，以试语法更简洁（非强制）
在全局上添加属性时，请加上
window, 如window.arg = 1不要定义未使用的变量，方法等。
使用
===代替==, 使用!==代替==使用三元运算符时，尽量保持在一行，如果不行可以换行，如：
num === 2?true:false;
// 或
num === 2
?true
:false
- 判断语句不建议省略大括号，如
// 建议
if (item < 20) { return false; }
// 不建议
if (time < 20) return false;
# Html书写规范
HTML文件要以<!DOCTYPE html>开头HTML标签必选闭合HTML标签在兼容的要求下尽量语义化如
<header>头部元素</header>
<footer>页脚元素</footer>
<nav>导航元素</nav>
<main>主要内容，一般一个页面用一次</main>
<section>定义文档中的节</section>
<aside>主题附属信息，一般用于侧栏、文章的一组链接、广告、友情链接、相关产品列表等</aside>
<small>小号字体，一般用于声明、注解、署名、版权</small>
<figure>一般用作插画图像</figure>
<figcaption>定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置</figcaption>
HTML的属性名称尽量使用小写
# CSS书写规范
css命名尽量避免缩写css冒号后边尽量增加空格 如：width: 100pxcss的书写顺序我们一般遵循下面规则
css书写规则
- 位置属性(position, top, right, z-index, display, float等)
- 大小(width, height, padding, margin)
- 文字系列(font, line-height, letter-spacing, color- text-align等)
- 背景(background, border等)
- 其他(animation, transition等)
css属性能够缩写的尽量缩写，如padding: 20px 10px 5px 0css属性值为0时，建议省略后边单位css中尽量使用class类定位，谨慎大量使用Id定位，以及!importantcss选择器定位时避免嵌套过多，最好不要超过三层css使用逗号选择器时尽量换行，如
.div,
.p,
.footer{
background: #333;
}
# Vue书写规范
Vue的基本书写规范需了解官网 风格指南 (opens new window)
Vue中我们会在元素上写大量的Vue语法（属性）, 尽量按一下顺序书写
<template
attr
type="info"
class="class-name"
v-for="item in list"
:lkey="item.id"
:value="item.id"
@click="submitHandle"
>
</template>
# React书写规范
React 使用jsx书写时，js书写规范适用于React
react组件名称尽量使用大驼峰法
# 项目版本管理规范
# 版本号
一般会使用Git来进行项目的版本管理。对于项目的版本号目前规定如下：
- 关于版本格式：
主版本号.次版本号.修订号（如：1.0.0）
- 主版本号：当你做了不兼容的 API 修改，比如构建大升级
- 次版本号：当你做了向下兼容的功能性新增，比如新增部分功能
- 修订号：当你做了向下兼容的问题修正，比如修复部分bug
另外项目版本也会分为测试版和稳定版两种
Alpha测试版(一般为内部测试版)，如1.0.0-Alpha.1Beta测试版(一般为公布测试版)，如1.0.0-Beta.1Stable稳定版， 如1.x-stable
# 分支
当项目进行版本更新时，使用git的tag功能进行标记。
Git分支管理合并方法可以简单查看这里 (opens new window)
项目仓库一般分为下面几个分支
master主分支，完整的可用的和线上保持同步的分支仓库dev测试分支，进行测试的分支其它分支用于开发 或 修改bug的分支，一般其它分支中包含下面分支feature-*临时功能性分支*为对应的功能名称fixbug修改临时Bug分支
分支开发完成后，在进行分支合并时，需要提交commit信息，关于commit提交规范请继续往下阅读
# Git Commit规范
# 提交格式
关于Git Commit规范可以看这篇文章 (opens new window)
每次提交Commit 都包括三个部分：
<type>(scope): <subject>
// 空行
<body>
// 空行
<footer>
- 头部上的三个字段：
type（必需）、scope（可选）和subject（必需）。
type标识一般选择下面
feat新增功能fix修复bugdocs修改文档style修改样式(格式)，不会影响代码的运行refactor重构项目perf优化项目，如提升性能，体验build打包test增加测试功能chore构建工具或辅助开发工具变动revert回滚到版本merge代码合并api修改接口
scope是可选的，是关于本次commit所影响的范围。（根据自身项目而定）常见的值如：
all影响整个项目image影响项目图片或iconanchor影响某个锚点（如解决的指定的某个Issues）
subject 是描述commit的简短信息, 一般不超过50个字，尽可能的简洁，如果该commit是针对某个issues的，我们可以在后面加上issues编号如#111，来可以快速定位到具体issues
关于
body部分（可省略），主要是对本次commit的详细描述，可以省略关于
footer部分（可省略）,在footer部分我们可以关闭对应的Issues。如Closes #111或关闭多个Closes #111, #222
下面是一个commit 提交的示例：
fix(all): 修复登录问题(#321)
修复不能登录的问题
1. 防止登录重复提交
2. 登录密码加密
# 合并多余Commit
当我们在自己的分支提交了大量的commit后，想要合并到主分支上时，不想带有这些没有价值的commit, 我们可以使用git rebase命令
git rebase命令使用 访问这里 (opens new window)
# 搭建
# Commitizen工具
Commitizen是一个可以检测提交的commit信息是否规范工具
Commitizen 官网 (opens new window)
# Commitizen工具
Commitizen是一个格式化commit message的工具。
# lint-staged工具
lint-staged能够让lint只检测暂存区的文件，提升检测速度
# husky 工具
需要注意的是： husky在v6版本后做了重大的升级，该升级需要的npm版本要在7.x以上。相应的差异请看这篇文章 (opens new window),