代码本身的质量如何？代码本身的质量：包括复杂度、重复率、代码风格等复杂度：项目代码量、模块大小、耦合度等重复率：通常要求重复代码块的比例在5%以下（借助Sonar等平台工具）代码风格：代码风格是否统一（动态语言代码如JS、Python风格无约束）代码质量下降恶性循环代码质量下降常见原因：破罐破壳：迭代代码犯法onbadcode传染性较小：不关心代码质量，只关注业务产出资源不足往往导致恶性循环场景：业务压力太大导致badcode的常见原因是业务压力过大，导致没有关注代码质量的时间或意愿。向业务压力妥协，产生坏代码后，开发效率会下降，进而导致业务压力变大，形成典型的恶性循环。通过增加人手解决业务压力应对业务压力，常见的做法是给项目增加人手，但单纯增加人手会导致风格不一致导致烂代码增多，沟通成本上升。那我们应该怎么解决呢？这是一个长期的过程。代码质量控制的四个阶段规范建立代码规范和CodeReview体系1.[airbnb](https://github.com/airbnb/javascript)2.[标准](https://github.com/standard/standard)3.[node-style-guide](https://github.com/felixge/node-style-guide)4.[googlejavascript风格指南](https://google.github.io/styleguide/jsguide.html)5.[googlehtml/css风格指南](https://google.github.io/styleguide/htmlcssguide.html)6.[Vue风格指南](https://cn.vuejs.org/v2/style-guide/)7.统一的项目目录结构我觉得也是一种标准化（比如我们使用脚手架来创建项目模板），标准化的目录结构大大降低了新人的入门成本。自动化使用工具（linters）自动检查代码质量。基于流程绑定代码质量检查与代码流过程。质检效果和代码流绑定：备注：1.编辑时：通过编辑器插件，可以实时查看质检情况2.可以使用CI（Jekins/Travis）移动构建和发布在线处理，并先跑代码扫描，测试代码等，没有报错再build，通过ssh成功推送到服务器。集中化从团队整体角度，集中管理代码规范和质量状态透明。当团队规模变大，项目数量增加时，代码质量控制会面临以下问题：1.不同项目使用的代码规范不同2.部分项目由于松懈导致无法进入质量检查需求，或存在大量未修复的缺陷3.无法从团队整体层面反映各项目的质量状态比较。为了应对上述问题，有必要构建一个集中的代码质量控制系统。重点包括：代码规范统一管理。通过脚手架命令垂直管理扫码配置规则集，自动安装，不在本地编写规则。一个团队，一种项目，一套规则。****[TBD]使用统一的持续集成服务（Jekins/Travis等）。未通过质量检查的项目无法上线。*[TBD]创建代码质量评分系统（使用Sonar）。允许项目之间的横向比较和项目本身的纵向比较，并提供总结反馈。Why代码质量是团队技术水平和管理水平的直接体现。看代码的时间远远多于写代码的时间。目前前端项目存在的问题不一致。文风差，阅读体验差，可维护性差，复用性差（CodeReview相互提高）。不规范如何保证代码质量？EditorConfig[EditorConfig](https://editorconfig.org/)支持跨编辑器和IDE，支持多人协作开发项目时保持一致的编码风格（文件格式）。VSCode插件EditorConfigforVSCode提供一键生成.editorconfig。请参阅[示例](https://editorconfig.org/#example-file)。TypeScript-【官网介绍】(https://www.typescriptlang.org/)。-[中文awesome-typescript](https://github.com/semlinker/awesome-typescript)-[TypeScript系统研究报告](https://juejin.im/post/59c46bc86fb9a00a4636f939)-[JS趋势报告2018](https://2018.stateofjs.com/javascript-flavors/overview/)GitHooksGit可以在特定重要动作发生时触发自定义脚本。有两组这样的钩子：客户端和服务器端。客户端钩子由提交和合并等操作调用，而服务器端钩子作用于网络操作，例如接收推送的提交，我们今天使用的大多数是客户端钩子。集成[githooks](https://git-scm.com/book/zh/v2/%E8%87%AA%E5%AE%通过[husky](https://github.com/typicode/husky)9A%E4%B9%89-Git-Git-%E9%92%A9%E5%AD%90)，如果想对git有更全面的了解，推荐阅读[Git文档](https://git-scm.com/book/zh/v2)。Husky会在项目的.git/hook目录下安装一系列的githooks。下面两张图比较了没有安装husky的git目录和安装了husky的git目录的区别：当你使用gitinit初始化一个新的仓库时，Git默认会在这个目录下放置一些示例脚本（以.sample结尾的文件）.预提交预提交挂钩在键入提交消息之前运行。用于检查即将提交的快照。可以使用这个hook来检查代码风格是否一致（运行lint之类的程序。-[lint-staged](https://github.com/okonet/lint-staged）：可以获取所有提交的文件并进行配置lint-staged任务中可以执行task命令，可以配置各种lint验证工具。-[prettier](https://prettier.io/):可以在lint-staged中配置，实现编码风格的自动格式化。-[stylelint](https://github.com/stylelint/stylelint)-[eslint](https://cn.eslint.org/)-[tslint](https://github.com/palantir/tslint)-[eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue):Vue.js官方推荐的lint工具关于【为什么选择prettier，eslint和prettier的区别？】（https://zhuanlan.zhihu.com/p/62542268）。关于[更漂亮的配置](https://prettier.io/docs/en/configuration.html)。关于[stylelint配置](https://stylelint.io/user-guide/configuration/)。关于【eslint配置】(https://cn.eslint.org/docs/user-guide/configuring)。commit-msg[commitlint](https://github.com/conventional-changelog/commitlint)。commit-msg可用于在提交前验证项目状态或提交信息，使用此钩子检查提交信息是否遵循指定模板。关于package.json中的githooks配置：testunittest-[Jest](https://jestjs.io/)-[Mocha](https://mochajs.org/)e2e-[Nightwatch](http://nightwatchjs.org/)-[Cypress](https://www.cypress.io/)CHANGELOG变更日志，[标准版本](https://github.com/conventional-changelog/standard-version)。CodeReview*[待定]Review制度，我们现在的公司在代码合并的时候通过多人的review。如何快速落地目前业务前端脚手架（xx-cli）采用扫码配置文件集中管理的思想，将codelint配置文件打成npm包发送到内网，然后extends脚手架命令执行并远程发送配置文件到本地项目，并输入新添加的package.json依赖，后面就可以安装新的依赖了。所谓集中管理：所有项目代码配置文件都服从于远程配置文件。如果本地有同名配置，则删除，方便我们后期更新配置文件（增加vw/vh适配），以及所有业务同步问题。```目前只有基于vue.js项目的lint脚本命令。未来还有其他项目。考虑使用xx-clilint--vuexx-clilint--node扩展。传入代码质量检查？由于这部分是在内网演示，所以不能发布。脚手架可以参考我之前的demo[easy-cli](https://github.com/NuoHui/easy-cli)。这是一个比较完整的demo。FutureJekinsAutomation[Sonar](https://www.sonarqube.org/)[Github:](https://github.com/SonarSource/sonarqube)SonarQube是领先的持续代码质量监控平台，在github上开源，可以轻松配置内网服务器，实时监控代码，帮助理解和提升团队项目代码质量。通过插件机制，SonarQube可以继承不同的测试工具、代码分析工具和持续集成工具。与持续集成工具（如Hudson/Jenkins等）不同，SonarQube并不是简单的直接在网页上展示不同代码检查工具（如FindBugs、PMD等）的结果，而是通过不同的插件复现这些结果-插件。Processing，通过量化代码质量的变化，轻松管理不同规模和类型项目的代码质量。业界提到“代码质量管理，自动化质量管理”，一般指的是通过Sonar来实现。Sonar可以实现什么？-Technicaldebt（sonar根据“规则”扫描不符合规则的代码）-Coverage（单元测试覆盖率）-Duplication（重复代码，有利于提醒打包）-Structure-...sonarjssonar支持各种编程语言，包括JavaScript。例如[sonarjs](https://www.sonarsource.com/products/codeanalyzers/sonarjs.html)。
