前言 随着移动互联网技术的生长，前端在整个项目体系建设中饰演的角色，所处的位置也越来越重要。越来越多的项目和系统，对前端开发人员的技术要求也越来越高，同时团队中前端工程师的人数的日益壮大，每小我私家代码气势派头也纷歧样，在协同开发和后续维护历程中，可能会带来一些问题。
如果由你是该团队卖力人，或这说由你来卖力前端代码治理，你会怎么做？自建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开发规范Code Guide by @AlloyTeamAirbnb JavaScript Style Guide代码检查校验 ESlint在上一步中，我们谈到了参照规范来编写代码，可能有时候多几多少还是会忽略或忘记某些规范，好比空格，缩进，变量引用命名等。因此，这里要引入ESlint，客观层面依照设置文件来检查我们的代码是否根据规范开发。JavaScript 是一个动态的弱类型语言，在开发中比力容易堕落。因为没有编译法式，为了寻找 JavaScript 代码错误通常需要在执行历程中不停调试。
像 ESLint 这样的可以让法式员在编码的历程中发现问题而不是在执行的历程中。ESLint 的初衷是为了让法式员可以建立自己的检测规则。ESLint 的所有规则都被设计成可插入的。
ESLint 的默认规则与其他的插件并没有什么区别，规则自己和测试可以依赖于同样的模式。为了便于人们使用，ESLint 内置了一些规则，固然，你可以在使用历程中自界说规则。SLint 使用 Node.js 编写，这样既可以有一个快速的运行情况的同时也便于安装。
ESlint优点总结如下：降低低级bug（例如拼写问题）泛起的概率；增加代码的可维护性，可阅读性；硬性统一代码气势派头，团队协作起来时更轻松；ESlint推荐直接设置到脚手架之中，对我们提高代码的可维护性的资助会很大。ESlint中文网链接代码美化 PrettierPrettier，顾名思义，pretty的比力级，可以强硬的翻译为‘更漂亮的’。那到底什么是Prettier呢？从Prettier官网首页能看到它是什么：An opinionated code formatter（一个有态度的代码花样化工具）Supports many languages（支持多种语言）Integrates with most editors（集成到绝大多数编辑器）Has few options（仅需少少的设置选择（其他代码花样化的工具设置选项太多了））Prettier的安装和使用都及其简朴:// with yarnyarn add prettier --dev --exact# or globallyyarn global add prettier// with npm npm install --save-dev --save-exact prettier# or globallynpm install --global prettier复制代码使用起来也简朴prettier [opts] [filename ...]prettier --check "src/**/*.js"详细可以看看Prettier官网首页的先容。
Pre-commit Hook工具之HuskyHusky can prevent bad git commit, git push and more woof!这个是官方对Husky整个工具的解释。也就是说在你提交接码前的插入一个钩子操作，执行这个操作通事后才可以提交接码，制止一些差的代码的提交。因为许多时候，规范摆在那，纷歧定每个团队成员每次提交接码都市执行，因此在提交接码前插入一个操作（npm run xxx），这样也是客观层面临代码的掩护。
现在比力主流的做法就是联合上一步中的prettier一起使用， 假设你已经通过npm/yarn安装来，那么看看如何使用// package.json{ "lint-staged": { "**/*.{js,ts,tsx,json,jsx,less}": [ "node ./scripts/lint-prettier.js", "git add" ], "**/*.{js,jsx}": "npm run lint-staged:js", "**/*.less": "stylelint --syntax less" }, "husky": { "hooks": { "pre-commit": "npm run lint-staged", "...": "..." } }}复制代码也就是说，在pre-commit之前，我们先执行npm run lint-staged，而lint-staged也是我们自界说的一个操作，内里包罗来两个下令:node ./scripts/lint-prettier.jsgit add很显然，lint-prettier.js主要是读取prettier设置文件，检查相关规则文件是否有做美化处置惩罚。如果没有，就会给出相关提示：// lint-prettier.js 部门代码 const isPrettier = prettier.check(input, withParserOptions); if (!isPrettier) { console.log(files); console.log( `x1b[31m ${file} is no prettier, please use npm run prettier and git add !x1b[0m` ); didWarn = true; }复制代码因此，prettier + Husky 也强烈推荐运用到项目中。
Typecript这也是老生常谈的话题了，作为JavaScript的超集，typescript优点如下：TypeScript 增加了代码的可读性和可维护性类型系统实际上是最好的文档，大部门的函数看看类型的界说就可以知道如何使用了在编译阶段就发现大部门错误，这总比在运行时候堕落好增强了编辑器和 IDE 的功效，包罗代码补全、接口提示、跳转到界说、重构等举个简朴的例子，如果我们代码规范都遵守了，eslint 检查也通过了，prettier也执行了。肉眼能做的都做了。在盘算 1 + 1的时候还是会出问题。因为你基础不知道，或者说不确定法式运行的时候1 是字符串还是数字。
如果是两者为number类型，那么1 + 1 = 2。如果有一个是字符串，那么1+1 = ‘11’。如果项目条件允许，赶早使用typescript。固然在安装typescript的时候，注意要安装相应的检查插件：// package.json "tslint": "^5.10.0","tslint-config-prettier": "^1.10.0","tslint-react": "^3.6.0", // 如果你是react项目复制代码vue2.x对typescript的支持不太友好，3.0版本后会逐渐改善。
而react则一直对typescript有着完美的联合。UI单元测试可能有人以为，UI单元测试跟代码规范看起来似乎没多大关系。
但我始终坚持一点： 好的代码逻辑一定是可以写UI单元测试。如果拿到某个组件，写其相关的单元测试发现没法举行，或者案例没法笼罩全，那么这个组件写的是有问题。
也就是说，可写UI单元测试，是高质量的代码的一个体现之一。我们在开发组件的时候，都知道要遵循 高内聚，低耦合的理念。你怎么客观权衡这个理念呢？还是得通过单元测试。
以react 为例，推荐Jest + Enzyme 来写单元测试。jestJest是 Facebook 的一套开源的 JavaScript 测试框架， 它自动集成了断言、JSDom、笼罩率陈诉等开发者所需要的所有测试工具，是一款险些零设置的测试框架。而且它对同样是 Facebook 的开源前端框架 React 的测试十分友好。
Enzymeenzyme 来自 airbnb 公司，是一个用于 React 的 JavaScript 测试工具，利便你判断、利用和历遍 React Components 输出。Enzyme 的 API 通过模拟 jQuery 的 API ，使得 DOM 操作和历遍很灵活、直观。
Enzyme 兼容所有的主要测试运行器和判断库。同样，能写单元测试的代码，后续维护、重构起来也会越发驾轻就熟。代码评审code review与其说是代码评审，倒不如说是代码交流。
差别的人对差别的功效首先有着差别的明白。相互交流，取长补短，促进进步。一般建议以一个迭代，或者一个版本周期为距离，有组织的做代码评审（分享）。结语本文主要总结了治理好前端代码需要注意的几个点：搭建代码堆栈制定基本代码编写规范ESlintprettier + huskytypecript + tslintUI单元测试代码评审 code review这里也是形貌只是一个大的偏向，没有详细实施细节。
当前种种社区博客也会有比力详细的实施细节，告诉我们怎么引入ESlint/typecript等等。同时，联合到详细项目中 ESlint 、prettier、typecript、等选择几个适合你们团队的方案，能全选固然最好。
详细情况详细分析。好的代码就是好的资产，赏心悦目，便于维护。前端的生长日新月异，ESlint 和tslint 有合并的趋势。
我们需要保持时刻关注。学不动也得学。
作者：ldld链接：https://juejin.im/post/5d20623951882579d9188e3a。
本文关键词：酷游,如何,治理,好你,团队,的,前端,代码,前言,酷游平台地址
本文来源：酷游-www.gfqnw.com
