建议使用以下浏览器,以获得最佳体验。 IE 9.0+以上版本 Chrome 31+ 谷歌浏览器 Firefox 30+ 火狐浏览器
请选择 进入手机版 | 继续访问电脑版
设置昵称

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

确定
我再想想
选择版块
直达楼层
标签
您还可以添加5个标签
  • 没有搜索到和“关键字”相关的标签
  • 云产品
  • 解决方案
  • 技术领域
  • 通用技术
  • 平台功能
取消

采纳成功

您已采纳当前回复为最佳回复

前端小盆友

发帖: 15粉丝: 1

发消息 + 关注

发表于2020年09月28日 15:24:13 685 1
直达本楼层的链接
楼主
显示全部楼层
[技术干货] 编码规范轻体验

前言

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

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

  • 查询的方法以get或query做前缀;

  • 插入的方法以add或insert做前缀;

  • 删除的方法以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的智能提示。

image-20200927205737690.png


Git Hooks+ESLint

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

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

依赖
  • husky

  • 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


举报
分享

分享文章到朋友圈

分享文章到微博

采纳成功

您已采纳当前回复为最佳回复

运气男孩

发帖: 442粉丝: 54

发消息 + 关注

发表于2020年09月30日 23:49:59
直达本楼层的链接
沙发
显示全部楼层

感谢分享 很好

点赞 评论 引用 举报

游客

富文本
Markdown
您需要登录后才可以回帖 登录 | 立即注册

结贴

您对问题的回复是否满意?
满意度
非常满意 满意 一般 不满意
我要反馈
0/200