如何管理好你团队的前端代码？

[webVueBlog]

前言

随着移动互联网技术的发展，前端在整个项目体系建设中扮演的角色，所处的位置也越来越重要。越来越多的项目和系统，对前端开发人员的技能要求也越来越高，同时团队中前端工程师的人数的日益壮大，每个人代码风格也不一样，在协同开发和后续维护过程中，可能会带来一些问题。假如由你是该团队负责人，或这说由你来负责前端代码管理，你会怎么做？

自建Gitlab

代码就是公司资产。如何管理这笔资产就显得尤为重要了。自建gitlab是一个很基础，很有必要的。强烈建议使用Gitlab进行版本管理，自建Gitlab难度并不大，方便管理，包括代码管理、权限管理、提交日志查询，以及联动一些第三方插件。

可能有的公司还在用svn，或者IBM 提供的一些版本管理工具（RTC）。但还是不如gitlab用起来流畅。因此强烈建议Gitlab来代码管理。

GitLab是由GitLab公司开发的、基于Git的集成软件开发平台。另外，GitLab且具有wiki以及在线编辑、issue跟踪功能、CI/CD等功能。

制定代码开发规范 Code Guide

为什么要有团队代码规范？

虽然这些细节是小事，不会有体验或者性能上的优化，但是却体现了一个coder和团队的专业程度 团队的愿景：成为业界卓越的Web团队！所以不管团队有多少人，代码风格都应该师出同门！

以web前端为例，我们看看代码规范大概会包含哪些方面：

命名规则

项目命名

目录/文件夹命名

JavaScript文件命名

css（scss，less）文件命名

html文件命名

HTML文件代码规范

语法（缩进，dom属性命名规范，单引号双引号的运用）

lang属性

字符串编码

IE兼容模式

css引入方式

JavaScript文件引入顺序

避免dom标签嵌套的层级过多

css 文件代码规范

缩进

分号

空格

换行

注释方案

命名

媒体查询

等等。。。

JavaScript 文件代码规范

缩进、空格、换行、注释。。。

变量命名

函数引用

数组对象

......其他

根据相关方案，制定好如上开发规范即可。这里强烈推荐腾讯的AlloyTeam团队的以及airbnb团队的javascript开发规范

代码检查校验 ESlint

在上一步中，我们谈到了参照规范来编写代码，可能有时候多多少少还是会忽略或忘记某些规范，比如空格，缩进，变量引用命名等。因此，这里要引入ESlint，客观层面依照配置文件来检查我们的代码是否按照规范开发。

ESlint优点总结如下：

降低低级bug（例如拼写问题）出现的概率；

增加代码的可维护性，可阅读性；

硬性统一代码风格，团队协作起来时更轻松；

ESlint推荐直接配置到脚手架之中，对我们提高代码的可维护性的帮助会很大。

代码美化 Prettier

Prettier，顾名思义，pretty的比较级，可以强硬的翻译为‘更漂亮的’。那到底什么是Prettier呢？从Prettier官网首页能看到它是什么：

An opinionated code formatter（一个有态度的代码格式化工具）

Supports many languages（支持多种语言）

Integrates with most editors（集成到绝大多数编辑器）

Has few options（仅需极少的配置选择（其他代码格式化的工具配置选项太多了））

// 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

TypeScript 增加了代码的可读性和可维护性

类型系统实际上是最好的文档，大部分的函数看看类型的定义就可以知道如何使用了

在编译阶段就发现大部分错误，这总比在运行时候出错好

增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等

结语

本文主要总结了管理好前端代码需要注意的几个点：

搭建代码仓库

制定基本代码编写规范

ESlint

prettier + husky

typecript + tslint

UI单元测试

代码评审 code review