如何管理好你团队的前端代码
前言
随着移动互联网技术的发展，前端在整个项目体系建设中扮演的角色，所处的位置也越来越重要。越来越多的项目和系统，对前端开发人员的技能要求也越来越高，同时团队中前端工程师的人数的日益壮大，每个人代码风格也不一样，在协同开发和后续维护过程中，可能会带来一些问题。假如由你是该团队负责人，或这说由你来负责前端代码管理，你会怎么做？
自建Gitlab
代码就是公司资产。如何管理这笔资产就显得尤为重要了。自建gitlab是一个很基础，很有必要的。强烈建议使用Gitlab进行版本管理，自建Gitlab难度并不大，方便管理，包括代码管理、权限管理、提交日志查询，以及联动一些第三方插件。
可能有的公司还在用svn，或者IBM 提供的一些版本管理工具（RTC）。但还是不如gitlab用起来流畅。因此强烈建议Gitlab来代码管理。
制定代码开发规范 Code Guide
为什么要有团队代码规范？
虽然这些细节是小事，不会有体验或者性能上的优化，但是却体现了一个coder和团队的专业程度 团队的愿景：成为业界卓越的Web团队！所以不管团队有多少人，代码风格都应该师出同门！
以web前端为例，我们看看代码规范大概会包含哪些方面：
命名规则
- 项目命名
- 目录/文件夹命名
- JavaScript文件命名
- css（scss，less）文件命名
- html文件命名
HTML文件代码规范
- 语法（缩进，dom属性命名规范，单引号双引号的运用）
- lang属性
- 字符串编码
- IE兼容模式
- css引入方式
- JavaScript文件引入顺序
- 避免dom标签嵌套的层级过多
css 文件代码规范
- 缩进
- 分号
- 空格
- 换行
- 注释方案
- 命名
- 媒体查询
- 等等。。。
JavaScript 文件代码规范
- 缩进、空格、换行、注释。。。
- 变量命名
- 函数引用
- 数组对象
- ......其他
根据相关方案，制定好如上开发规范即可。这里强烈推荐腾讯的AlloyTeam团队的以及airbnb团队的javascript开发规范
代码检查校验 ESlint
在上一步中，我们谈到了参照规范来编写代码，可能有时候多多少少还是会忽略或忘记某些规范，比如空格，缩进，变量引用命名等。因此，这里要引入ESlint，客观层面依照配置文件来检查我们的代码是否按照规范开发。
JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。 ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别，规则本身和测试可以依赖于同样的模式。为了便于人们使用，ESLint 内置了一些规则，当然，你可以在使用过程中自定义规则。 SLint 使用 Node.js 编写，这样既可以有一个快速的运行环境的同时也便于安装。
ESlint优点总结如下：
- 降低低级bug（例如拼写问题）出现的概率；
- 增加代码的可维护性，可阅读性；
- 硬性统一代码风格，团队协作起来时更轻松；
ESlint推荐直接配置到脚手架之中，对我们提高代码的可维护性的帮助会很大。
代码美化 Prettier
Prettier，顾名思义，pretty的比较级，可以强硬的翻译为‘更漂亮的’。那到底什么是Prettier呢？从Prettier官网首页能看到它是什么：
- An opinionated code formatter（一个有态度的代码格式化工具）
- Supports many languages（支持多种语言）
- Integrates with most editors（集成到绝大多数编辑器）
- Has few options（仅需极少的配置选择（其他代码格式化的工具配置选项太多了））
Prettier的安装和使用都及其简单:
// with yarn
yarn add prettier --dev --exact
# or globally
yarn global add prettier
// with npm
npm install --save-dev --save-exact prettier
# or globally
npm install --global prettier
使用起来也简单
prettier [opts] [filename ...]
prettier --check "src/**/*.js"
具体可以看看Prettier官网首页的介绍。
Pre-commit Hook工具之Husky
Husky can prevent bad git commit, git push and more