• [技术干货] 编码规范轻体验
    前言编码规范指的是针对特定编程语言约定的一系列规则,通常包括文件内容组织、缩进、注释、声明、语句、空格、命名约定、编程实践、编程原则和最佳实践等。 比如各类方法的命名约定:查询的方法以get或query做前缀;插入的方法以add或insert做前缀;删除的方法以delete或remove做前缀;……如果你对编码规范已经有了一定了解,那么我们继续往下。规范制定编码规范制定一般会参考业界公认的标准,在通用的编码规范基础上,再结合公司、项目的要求而形成的。编码规范制定的目标是为了实现团队成员代码一致性和最佳实践,通过代码风格的一致性,降低维护代码的成本以及改善多人协作的效率。同时遵守最佳实践,确保页面性能得到最佳优化和高效的代码。校验工具目前前端领域主要的代码静态检查工具有JSLint 、JSHint、 JSCS和ESLint等。它们各有的优缺点,本文不再详述,如有兴趣可自行了解。如何选择校验工具依据项目实际情况而定,本人比较推荐ESLint,因为它对ES6支持的最广泛,下面内容将会以ESLint如何在项目开发中实际应用展开。ESLint简介ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。 安装npm install eslint --save-devESLint规则可以通过以下两种主要的方式来配置:Configuration Comments - 使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中。Configuration Files - 使用 JavaScript、JSON 或者 YAML 文件为整个目录(处理你的主目录)和它的子目录指定配置信息。可以配置一个独立的 .eslintrc.* 文件。配置说明ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置,你必须将规则 ID 设置为下列值之一:"off" 或 0 - 关闭规则"warn" 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)"error" 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)比如通过设置.eslintrc.js强制使用一致风格的反勾号、双引号或单引号。{    "rules": {        "quotes": ["error", "double"] // 要求尽可能使用双引号    }}编码规范应用实践Visual Studio Code+ESLint环境准备:Node.js、git、Visual Studio Code在VSCode扩展页搜索ESLint,下载并安装完成后应用到工作区,就可以实现IDE的智能提示。Git Hooks+ESLintGit hooks能够在发生某特定行为的时机,触发执行自定义的脚本。 我们可以通过pre-commit来触发执行git commit命名时的一些自定义脚本,比如代码静态检查。依赖huskyInclinthuskyhusky是用node实现的一个快速安装git hooks的工具。安装npm install husky --save-devpackage.json配置"husky": {    "hooks": {      "pre-commit": "npm run inclint"    } },Inclintinclint 是用来对每次改动的文件执行 eslint,提高 eslint 执行的速度。安装npm install inclint --save-dev命令及参数inclint -c path/to/eslintrc --targetDir dir[,dir2,...,dirn]options:   -c path 必须,指定 eslint 配置文件的路径--targetDir 必须,提供一个或多个需要检查的目录,注意多个目录用,分割package.json配置{  "lint": "inclint -c ./.eslintrc --targetDir ./src",}husky+Inclint一起使用时的配置如下:{  "dependencies": {    "eslint-config-angular": "^0.5.0",    "eslint-config-xo-space": "^0.21.0",    "eslint-plugin-angular": "^4.0.0",  },  "devDependencies": {    "eslint": "^5.7.0",    "eslint-config-prettier": "^3.1.0",    "eslint-loader": "^2.1.1",    "husky": "^3.0.1",    "inclint": "^1.0.6",  },  "scripts": {    "lint": "inclint -c ./.eslintrc --targetDir ./src",    "fix": "eslint --fix src",  },  "husky": {    "hooks": {      "pre-commit": "npm run lint"    }  }}提交代码git add * // 将修改的文件提交到暂存区git commit -m 'xxx' // 将暂存区里的改动给提交到本地的版本库,触发执行pre-commit中的自定义脚本npm run fix // 通过eslint自带命令修复代码门禁代码门禁指在某些特定的场景下(比如开发者提交MR到主干库、出包构建等)触发的一系列测试,使得主干代码能维持在某一个程度的质量标准,例如:编译必须通过,代码重复率、圈复杂度不能高于某个水平、静态代码扫描必须通过、开源无风险、安全检查通过等等,一般使用Jenkins完成环境搭建和门禁配置。因每个项目的要求不一,此处不再详细的讲述。如有需求可以使用云服务提供商的代码构建服务,比如华为云的代码检查 CodeCheck :https://support.huaweicloud.com/productdesc-codecheck/devcloud_pdtd_30001.html