当前位置: 首页 > >

阿里前端代码规范_制定前端代码规范与提交规范

发布时间:

前言


在项目开发中,通常都会涉及到多人合作,那么经常就会出现代码风格不一致、提交信息混乱甚至还有代码报错的情况。有可能从远程仓库拉取下来的代码与你的本地代码只是格式不一致而引起冲突或者不是你使用的代码风格,还得去修复和调整。





混乱的仓库示意图


为了统一代码风格,规范编码规则,规范化 git 提交信息以减少隐藏的 bug、提高团队合作开发效率,制定一个代码规范与提交规范是有用的,也是必要的。



规范流程


就个人理解开发规范流程包含了代码语法规则检查(Linter)、代码风格格式化(Formatter)以及 git 提交校验(Pre-Commit Check)等。


代码语法规则检查:主要是指利用一些代码检测工具(如ESLintTSLint等)对语法规则和代码风格进行检查、提示以及自动修复。比如禁止使用==、禁止在变量定义之前使用它们等,其中的校验规则是可以根据团队和个人的*惯自由配置的。

代码风格格式化:是指利用一些代码格式化工具(如ESLintPrettier等)根据设定规则重新输出格式规范的代码,以避免因不同成员代码风格不一致而产生冲突和带来的代码阅读、理解成本。

git 提交校验:是指在代码提交时,调用pre-commit钩子对代码语法和代码风格进行检查和修复,调用commit-msg钩子对 commit message 进行校验。若校验未通过,则提交失败,并抛出相应错误。


开发规范流程如下图所示:





规范流程示意图


代码语法规则检查


代码语法规则检查工具以ESLint为例,简单讲解下ESLint的安装和配置。



ESLint 安装


npm?install?eslint?--save-dev
or 0 - 关闭规则"warn" or 1 - 将规则视为一个警告(不会影响退出码)"error" or 2 - 将规则视为一个错误 (退出码为 1)

其余的值表示规则配置选项,每条规则有各自的配置选项。完整的规则及配置可前往ESLint 官网查看。



ESLint 命令


eslint?[options]?[file|dir|glob]*
指定对哪些后缀文件进行ESLint校验,如eslint --ext ts,tsx,js,jsx src/--fix 对错误进行自动修复,如eslint --ext js,jsx src/ --fix--init 初始化ESLint,生成.eslintrc文件--help 显示所有ESLintoptions

eslintignore 文件


有时我们希望对某些文件和文件夹忽略ESLint检查,可在项目根目录添加.eslintignore文件,添加上要忽略的文件路径即可。


node_modules
检查指定文件是否符合配置文件所定义的格式规则--write 格式化指定文件--help 显示所有Prettieroptions

prettierignore 文件


如果某些文件不需要Prettier格式化,可在项目根目录添加.prettierignore文件,添加上要忽略的文件路径即可。


#?Ignore?artifacts:
命令和 Prettier 命令,以检查代码语法和格式化代码风格。提交信息校验则是对 commit 信息进行检查,以确定其是否为符合预设规则的规范化的 commit 信息。如果钩子检测出错,则阻止提交代码并抛出错误原因。


为了更方便的编写和使用 Git hooks,我们需要借助一些三方库,huskylint-stagedcommitlint



简介


husky

husky 能够帮你阻挡住不好的代码提交和推送,正如其名,这个库的作用就是看家护院的二哈 ?。


lint-staged

lint-staged是一个针对暂存的 git 文件运行 linters 的三方库。通常,我们会在提交代码时进行语法校验、代码格式化和提交信息规范校验。lint-staged 可以让这一系列操作只作用于暂存区的文件,可以有效的减少脚本运行时间。


commitlint

commitlint 用来检测提交信息,它会检查您的提交信息是否符合设定的提交格式。


一个规范正确的 commit 信息应该体现出该次提交是针对哪个模块(scope)进行了哪种类型(type)的具体的更改(subject),默认的提交格式为:


type(scope?): subject # scope is optional
的共享配置可供选择和使用。


@commitlint/config-conventional这个配置文件为例,首先,进行安装:


npm?install?--save-dev?@commitlint/config-conventional
文件中,添加上huskylint-staged的相关配置


"husky":?{
Prettier 的安装、配置以及常见命令,还讲解了 git 提交校验相关的库的运用和配置。通过制定这些规范并要求团队成员严格按照此规范进行开发,这样既有助于团队的合作开发,也能减少一些隐藏的 bug。


当然,借助插件只是秉承着不重复造轮子的宗旨,同时也免去了造轮子的麻烦。因为最重要的,还是要选取和制定适合自己和团队的规范。通过灵活的规则配置和适当的自定义拓展,很容易形成团队的沉淀。


参考链接


1.?https://eslint.org/
2.?https://prettier.io/
3.?https://github.com/typicode/husky
4. https://github.com/okonet/lint-staged
5.?https://commitlint.js.org/

关于我



如果觉得本文还不错,希望大家分享、点赞,本公众号前端快爆会定期为您推送最新技术文章,全都是硬菜干货~~


本文到此结束,感谢您的阅读,我们下篇文章见。


关注前端快爆


获取更多精彩


前端快爆



点下"在看",你最好看








相关资源:前端编码规范



友情链接: 时尚网 总结汇报 幼儿教育 小学教育 初中学习资料网