编码规范轻体验

举报
前端小盆友 发表于 2020/09/28 15:34:44 2020/09/28
【摘要】 编码规范轻体验前言编码规范指的是针对特定编程语言约定的一系列规则,通常包括文件内容组织、缩进、注释、声明、语句、空格、命名约定、编程实践、编程原则和最佳实践等。 比如各类方法的命名约定:查询的方法以get或query做前缀;插入的方法以add或insert做前缀;删除的方法以delete或remove做前缀;……如果你对编码规范已经有了一定了解,那么我们继续往下。规范制定编码规范制定一般会参...

前言

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

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

  1. 查询的方法以getquery做前缀;

  2. 插入的方法以addinsert做前缀;

  3. 删除的方法以deleteremove做前缀;

……

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

规范制定

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

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

校验工具

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

ESLint简介

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

安装

npm install eslint --save-dev

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

Configuration Comments - 使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中。

Configuration Files - 使用 JavaScriptJSON 或者 YAML 文件为整个目录(处理你的主目录)和它的子目录指定配置信息。可以配置一个独立的 .eslintrc.* 文件。

配置说明

ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置,你必须将规则 ID 设置为下列值之一:

"off" 0 - 关闭规则

"warn" 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)

"error" 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)

比如通过设置.eslintrc.js强制使用一致风格的反勾号、双引号或单引号。

{
   "rules": {
       "quotes": ["error""double"//
要求尽可能使用双引号
   }
}

编码规范应用实践

Visual Studio Code+ESLint

环境准备:Node.jsgitVisual 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


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。