前言

编码规范指的是针对特定编程语言约定的一系列规则，通常包括文件内容组织、缩进、注释、声明、语句、空格、命名约定、编程实践、编程原则和最佳实践等。

比如各类方法的命名约定：

1. 查询的方法以get或query做前缀；

2. 插入的方法以add或insert做前缀；

3. 删除的方法以delete或remove做前缀；

……

如果你对编码规范已经有了一定了解，那么我们继续往下。

规范制定

编码规范制定一般会参考业界公认的标准，在通用的编码规范基础上，再结合公司、项目的要求而形成的。

编码规范制定的目标是为了实现团队成员代码一致性和最佳实践，通过代码风格的一致性，降低维护代码的成本以及改善多人协作的效率。同时遵守最佳实践，确保页面性能得到最佳优化和高效的代码。

校验工具

目前前端领域主要的代码静态检查工具有JSLint 、JSHint、 JSCS和ESLint等。它们各有的优缺点，本文不再详述，如有兴趣可自行了解。如何选择校验工具依据项目实际情况而定，本人比较推荐ESLint，因为它对ES6支持的最广泛，下面内容将会以ESLint如何在项目开发中实际应用展开。

ESLint简介

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。

安装

npm install eslint --save-dev

ESLint规则可以通过以下两种主要的方式来配置:

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+ESLint

Git hooks能够在发生某特定行为的时机，触发执行自定义的脚本。

我们可以通过pre-commit来触发执行git commit命名时的一些自定义脚本，比如代码静态检查。

依赖

1. husky

2. Inclint

husky

husky是用node实现的一个快速安装git hooks的工具。

安装

npm install husky --save-dev
// package.json配置
"husky": {    
    "hooks": {      
    "pre-commit": "npm run inclint"    
    } 
}

Inclint

inclint 是用来对每次改动的文件执行 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