代码检测规范和git提交规范

摘要:之前开发的项目,代码检测和提交规范都是已经配置好的,最近自己新建的项目就记录下相关配置过程。

1. ESlint配置

        2013年6月创建开源项目,提供一个插件化的JavaScript代码检测工具,创建项目是生成的eslintrc.js文件;

//Eslint配置文件遵循commonJS的导出规则,所导出的的对象就是ESLint的配置对象

//官方文档:https://www.tkcnn.com/eslint/core-concepts.html

// Eslint配置文件遵循commonJS的导出规则,所导出的的对象就是ESLint通的配置对象
// 文档:https://eslint.bootcss.com/docs/user-guide/configuring
module.exports = {// 表示当前目录即为根目录,ESLint规则将被限制到该目录下root: true,// env表示启用ESLint检测的环境env: {// node环境下启动ESLint检测node: true},// ESLint中基础配置需要继承的配置;extends: ['plugin:vue/vue3-essential','@vue/standard'],// 解析器:表述需要解析的内容parserOptions: {parser: 'babel-eslint'},// rules中需要修改的启用规则(key表示启用的规则)及其各自的错误级别/*** 错误级别分为三中:* "off"或者0 - 关闭规则* "warn"或者1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出)* "error"或者2 - 开启规则,使用错误界别的错误:error(当被触发的时候,程序会退出)*/rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off','space-before-function-paren': 'off'   //关闭此规则}
}

2. Prettier配置

        Prettier是代码格式化工具,具有开箱即用、直接集成到vscode的特点。保存时,让代码直接符合ESLint,prettier配置步骤如下:

  • vscode安装prettier可以在配置prettierrc时获得一些提示;
  • 根目录新增prettierrc文件,配置的JSON内容如下:
{//semi:表示js语句结尾是否尾随分号;"semi": false,//singleQuote:表示是否用单引号代替所有双引号;"singleQuote": true,//trailingComma:表示多行语法中,是否需要再最后一行添加逗号,有all\es5\none三个值;"trailingComma": "none"
}

注:也可以使用这样的配置

module.exports = {eslintIntegration: true,printWidth: 160, // 指定代码长度,超出换行tabWidth: 2, // tab 键的宽度useTabs: false, // 不使用tabsemi: true, // 结尾加上分号singleQuote: true, // 使用单引号quoteProps: 'as-needed', // 要求对象字面量属性是否使用引号包裹trailingComma: 'none', // 确保对象的最后一个属性后有逗号bracketSpacing: true, // 大括号有空格 { name: 'rose' }arrowParens: 'always', // 箭头函数,单个参数添加括号requirePragma: false, // 是否严格按照文件顶部的特殊注释格式化代码insertPragma: false, // 是否在格式化的文件顶部插入Pragma标记,以表明该文件被prettier格式化过了proseWrap: 'preserve', // 按照文件原样折行htmlWhitespaceSensitivity: 'ignore', // html文件的空格敏感度,控制空格是否影响布局endOfLine: 'auto' // 结尾是 \n \r \n\r auto
};
  • vscode的设置中找到save,勾选Format on save;

        综上实现保存后,自动格式化代码的目的。此外,还需要处理几处细节

  1. vscode→首选项→设置→搜Tab Size设置制表符为两个空格2
  2. 如果vscode安装了多个代码格式化工具,可以右键选中『使用...格式化文档』配置默认的格式化程序
  3. ESLint和prettier之间冲突:space-before-function-paren;在ESLInt的rules中配置关闭:
'space-before-function-paren': 'off'

3. Git提交规范

        Angular团队Conventional Commits specification约定式提交,规范链接(约定式提交)。提交说明的结构如下所示

<type>[optional scope]: <description>
[optional body]
[optional footer(s)]
译文:
<类型>[可选 范围]: <描述>
[可选 正文]
[可选 脚注]

3.1 Commitizen

        使用Commitizen进行代码提交(git commit)时,commitizen会再提交时填写所必须提交的字段;

1.全局安装Commitizen(建议使用有管理员权限的终端)

sudo npm install -g commitizen@4.2.4

2.安装配置cz-customizable插件

        1.使用npm下载cz-customizable

npm i cz-customizable@6.3.0 --save-dev

        2.添加下列配置再package.json中

...
"config": {"commitizen": {"path": "node_modules/cz-customizable"   //commitizen的自定义配置的安装位置}
}

3.根目录下创建.cz-config.js自定义提示文件

module.exports = {//可选类型types: [{ value: 'feat', name: 'feat: 新功能' },{ value: 'fix', name: 'fix: 修复' },{ value: 'docs', name: 'docs: 文档变更' },{ value: 'style', name: 'style: 代码格式(不影响代码运行的变动)' },{ value: 'refactor', name: '重构(即不增加feature,也不修复bug)' },{ value: 'perf', name: 'perf: 性能优化' },{ value: 'test', name: 'test: 增加测试' },{ value: 'chore', name: 'chore: 构建过程或辅助工具的变动' },{ value: 'revert', name: 'revert: 回退' },{ value: 'build', name: 'build: 打包' }],//消息步骤messages: {type: '请选择提交的类型:',customScope: '请输入修改范围(可选)',subject: '请简要描述提交(必填)',body: '请输入详细描述(可选)',footer: '请输入要关闭的issue(可选)',confirmCommit: '确认要使用以上信息提交? (y/n)'},//跳过问题skipQuestions: ['body', 'footer'],//subject文字默认长度是72subjectLimit: 72
}

4. 使用git cz代替git commit。使用git cz代替git commit即可看到上述提示内容

czh12@czh12deiMac vue-admin % **git add .**
czh12@czh12deiMac vue-admin % **git cz**
cz-cli@4.2.4, cz-customizable@6.3.0All lines except first will be wrapped after 100 characters.
? 请选择提交的类型: feat: 新功能
? 请输入修改范围(可选) git
? 请简要描述提交(必填) add commitizen
? 请输入详细描述(可选) 使用commitizen提交代码
? 请输入要关闭的issue(可选) ###--------------------------------------------------------###
feat(git): add commitizen使用commitizen提交代码
###--------------------------------------------------------###? 确认要使用以上信息提交? (y/n) Yes> running pre-commit hook: lint-staged↓ Stashing changes... [skipped]→ No partially staged files found...✔ Running tasks...
[master 5904db7] feat(git): add commitizen3 files changed, 512 insertions(+), 7 deletions(-)create mode 100644 .cz-config.js
chenzh12@chenzh12deiMac vue-admin % **git log**
commit 5904db74cd7128e4957dbcdcd45d33033cb4bdca (HEAD -> master)
Author: zhenghuachen <zhchenanhui@163.com>
Date:   Tue Oct 31 18:00:15 2023 +0800feat(git): add commitizen使用commitizen提交代码

3.2 Git Hooks

        上节完成了Commitizen提交的配置,但是需要使用git cz替换git commit才能实现,如果不使用git cz上述提交规范就没有预约效果。本节实现不符合约定式提交规范时,阻止当前提交,并抛出错误提示。

        本节实现的功能需要借助Git hooks,它是是一种在提交代码之前或之后执行特定操作的技术。本节主要借助一下两种钩子:

Git Hooks调用时机说明
pre-commitgit commit执行前他不接受任何参数,并且在获取提交日志消息并进行提交之前被调用。脚本git commit以非零状态退出会导致命令在创建提交之前停止。可以使用 git commit —no-verify绕过
commit-msggit commit执行前 、可以用于将消息规范为魔种项目标准格式。还可以用于在检查消息文件后拒绝提交可以使用 git commit —no-verify绕过

简单来说:

commit-msg:可以用来贵干化标准格式,并且可以按需指定是否要拒绝本次提交;

pre-commit:会在提交前被调用,并且可以按需指定是否要拒绝本次提交。

使用git hooks校验提交信息需要使用到如下工具:

commitlint:用于检查提交信息(https://github.com/conventional-changelog/commitlint)

husky: 是git hooks工具(https://github.com/typicode/husky)

注: 需要保证npm版本是7.X以上

3.2.1 commitlint安装

1. 安装依赖

npm install --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4

2. 创建commitlint.config.js文件。可以直接执行下面代码

echo "module.exports = {extends: ['@commitlint/config-conventional]'}" >
commitlint.config.js

        也可以手动新建commitlint.config.js并输入,表示导出的对象继承了这个第三方的包

module.exports = {extends: ['@commitlint/config-conventional']
}

3. 打开commitlint.config.js, 增加配置项

module.exports = {// 继承的规则extends: ['@commitlint/config-conventional'],// 定义规则roles: {// type 的类型定义: 表示git提交的type必须再以下类型范围'type-enum': [// 当前验证的错误级别,2表示错误2,// 在什么情况下进行验证'always',// 泛型内容['feat', // 'feat: 新功能''fix', // 'fix: 修复''docs', // 'docs: 文档变更''style', // 'style: 代码格式(不影响代码运行的变动)''refactor', // '重构(即不增加feature,也不修复bug)''perf', // 'perf: 性能优化''test', // 'test: 增加测试''chore', // 'chore: 构建过程或辅助工具的变动''revert', // 'revert: 回退''build' // 'build: 打包']],// subject 大小写不做校验'subject-case': [0]}
}
3.2.2 husky安装

1. 安装依赖:npx husky install

czh12@czh12deiMac vue-admin % npx husky install
husky - Git hooks installed

2. 启动hooks,生成.husky文件夹:npx husky install

czh12@czh12deiMac vue-admin % npx husky install
husky - Git hooks installed

3. 再package.json中生成prepare指令(需要npm>7.0)

        可以手动添加,也可以通过如下指令生成

npm set-script prepare "husky install"

4. 执行prepare指令:npm run prepare

czh12@czh12deiMac vue-admin % npm run prepare> vue-admin@0.1.0 prepare
> husky installhusky - Git hooks installed

5. 添加commitlint的hooks到husky中,并指令在commit-msg的hooks下执行npx —no-install commitlint —edit "$1"指令

        通过husky监听git hooks,在git hooks的commit-msg的回调的hooks里面执行commitlint来完成对应的提交代码的检测

czh12@czh12deiMac vue-admin % npx husky add .husky/commit-msg 'npx --no-installcommitlint --edit "$1"'
husky - created .husky/commit-msg

        此时的.husky文件结构

        此时,不符合规范的提交将会被阻止

czh12@czh12deiMac vue-admin % git add .     
czh12@czh12deiMac vue-admin % git commit -m 'test'
⧗   input: test
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]✖   found 2 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlinthusky - commit-msg hook exited with code 1 (error)

        综上,代码强制规范化提交要求以配置完成,不符合提交规范的代码将无法提交。

3.3 通过pre-commit检测提交时代码规范

        ESLint和Prettier解决了本地代码格式问题,那么如果本地没有配置,提交时如何规避这种问题?这就需要使用husky和ESLint配合才可以。通过husky检测pre-commit钩子,在该钩子执行npx eslint —ext .js,.vue src(src目录下检测.js和.vue的文件)指令进行相关代码格式化规范检测

1. 执行npx husky add .husky/pre-commit "npx eslint —ext .js,.vue src"添加commit时(npx eslint —ext .js,.vue src 会在执行到该hooks是运行)

2. 执行上述命令,会在.husky文件夹中生成pre-commit文件,其内容如下:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"npx eslint --ext .js,.vue src

3.4 通过lint-staged自动修复格式错误

        上节通过pre-commit处理了检测代码提交规范的问题,但是有两处需要优化。

        首先,若只修改个别文件,没必要检测所有文件的代码格式;

        其次,检测出错误依然需要手动修改。

        lint-staged可以让代码检查值作用域本次修改的代码,并自动修复并且推送。lint-staged的使用如下,修改package.json中lint-staged的配置为:

"lint-staged": {"src/**/* .(js,vue)": ["eslint --fix","git add"]
},

        如上配置,会在本地commit前校验提交代码是否符合ESLint规范,符合则提交,不符合则尝试修复,修复成功则提交,失败则提示。

        同时还要修改pre-commit中的内容,使其使用lint-staged检测提交

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"npx lint-staged

        综上,git提交规范配置完成。总结一下:

        代码格式规范,通过ESLint+Prettier+VSCode配合进行了处理,达到了保存代码,自动格式化代码格式的目的。git提交规范使用了husky来检测Git hooks钩子,并通过以下插件完成配置:

约定式提交规范

commitizen:git提交规范化工具

commitlint:用于检测提交信息

pre-commit: git hooks 钩子

lint-staged:只检测本次修改更新后的代码,并将出现的错误自动修复并推送。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/697338.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【算法分析与设计】

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;算法分析与设计 ⛺️稳中求进&#xff0c;晒太阳 题目 编写一个函数&#xff0c;输入是一个无符号整数&#xff08;以二进制串的形式&#xff09;&#xff0c;返回其二进制表达式中数字位…

如何使用Express框架构建一个简单的Web应用

在这个数字化时代&#xff0c;Web应用的需求越来越多样化和复杂化。在前端开发领域&#xff0c;Express框架作为一个快速、灵活的Node.js Web应用程序框架&#xff0c;拥有强大的功能和丰富的生态系统&#xff0c;深受开发者们的青睐。本篇博客将带您一步步探索如何使用Express…

Bert基础(四)--解码器(上)

1 理解解码器 假设我们想把英语句子I am good&#xff08;原句&#xff09;翻译成法语句子Je vais bien&#xff08;目标句&#xff09;。首先&#xff0c;将原句I am good送入编码器&#xff0c;使编码器学习原句&#xff0c;并计算特征值。在前文中&#xff0c;我们学习了编…

代码随想录算法训练营第四十天|343. 整数拆分、96. 不同的二叉搜索树。

343. 整数拆分 题目链接&#xff1a;整数拆分 题目描述&#xff1a; 给定一个正整数 n &#xff0c;将其拆分为 k 个 正整数 的和&#xff08; k > 2 &#xff09;&#xff0c;并使这些整数的乘积最大化。 返回 你可以获得的最大乘积 。 解题思路&#xff1a; 1、确定dp数组…

flink内存管理,设置思路,oom问题,一文全

flink内存管理 1 内存分配1.1 JVM 进程总内存&#xff08;Total Process Memory&#xff09;1.2 Flink 总内存&#xff08;Total Flink Memory&#xff09;1.3 JVM 堆外内存&#xff08;JVM Off-Heap Memory&#xff09;1.4 JVM 堆内存&#xff08;JVM Heap Memory&#xff09;…

运维的利器–监控–zabbix–第二步:建设–部署zabbix agent

文章目录 监控客户端部署及添加主机一、在 zabbix-server 安装客户端二、在本机和其他linux主机安装zabbix agent客户端1、安装2、配置3、启动并开机自启4、添加主机创建主机组创建主机等一会或重启zabbix-server查看配置是否成功 三、在其他windows上安装zabbix agent客户端下…

主流的开发语言和开发环境介绍

个人浅见&#xff0c;不喜勿喷&#xff0c;谢谢 软件开发是一个涉及多个方面的复杂过程&#xff0c;其中包括选择合适的编程语言和开发环境。编程语言是软件开发的核心&#xff0c;它定义了程序员用来编写指令的语法和规则。而开发环境则提供了编写、测试和调试代码的工具和平台…

Microsoft的PromptBench可以做啥?

目录 PromptBench简介 PromptBench的快速模型性能评估 PromptBench数据集介绍 PromptBench模型介绍 PromptBench模型加载遇到的问题 第一次在M1 Mac上加载模型 vicuna和llama系列模型 PromptBench各个模型加载情况总结 PromptBench的Prompt快速工程 chain of thought…

WebService学习,wsdl文件详解

目录 第一章、起因1.1&#xff09;学习原因1.2&#xff09;提问的过程&#xff08;逐步提出问题&#xff09;1、&#xff1f;wsdl链接的含义&#xff0c;有什么作用&#xff1f;2、什么是wsdl文档&#xff1f;3、如何阅读wsdl文件&#xff1f;4、wsdl文件有什么作用&#xff1f…

基于springboot+vue的智慧社区系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

(十四)【Jmeter】线程(Threads(Users))之开放模型线程组(Open Model Thread Group)

简述 操作路径如下: 开放模型线程组(Open Model Thread Group) 是 JMeter 5.5 版本中引入的一个新特性,它允许用户创建具有可变负载的负载配置文件。相较于传统的线程组,开放模型线程组提供了更多的灵活性和动态调整的能力。 优点: 灵活性:允许测试人员根据测试需求动…

python 提取PDF文字

使用pdfplumber&#xff0c;不能提取扫描的pdf和插入的图片。 import pdfplumberfile_path rD:\UserData\admindesktop\官方文档\1903_Mesh-Models-Overview_FINAL.pdf with pdfplumber.open(file_path) as pdf:page pdf.pages[0]print(page.extract_text()) # 所以文字prin…

Verilog刷题笔记33

题目&#xff1a; You are given a four-bit input vector in[3:0]. We want to know some relationships between each bit and its neighbour: out_both: Each bit of this output vector should indicate whether both the corresponding input bit and its neighbour to t…

Kafka3.x进阶

来源&#xff1a;B站 目录 Kafka生产者生产经验——生产者如何提高吞吐量生产经验——数据可靠性生产经验——数据去重数据传递语义幂等性生产者事务 生产经验——数据有序生产经验——数据乱序 Kafka BrokerKafka Broker 工作流程Zookeeper 存储的 Kafka 信息Kafka Broker 总…

戏曲文化苑|戏曲文化苑小程序|基于微信小程序的戏曲文化苑系统设计与实现(源码+数据库+文档)

戏曲文化苑小程序目录 目录 基于微信小程序的戏曲文化苑系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、微信小程序前台 2、管理员后台 &#xff08;1&#xff09;戏曲管理 &#xff08;2&#xff09;公告信息管理 &#xff08;3&#xff09;公告类型管理…

PostgreSQL 的实体化视图介绍

PostgreSQL 实体化视图提供一个强大的机制&#xff0c;通过预先计算并将查询结果集存储为物理表来提高查询性能。本教程将使用 DVD Rental Database 数据库作为演示例子&#xff0c;指导你在 PostgreSQL中创建实体化视图。 了解实体化视图 实体化视图是查询结果集的快照&…

【高德地图】Android高德地图初始化定位并显示小蓝点

&#x1f4d6;第3章 初始化定位并显示小蓝点 ✅第1步&#xff1a;配置AndroidManifest.xml✅第2步&#xff1a;设置定位蓝点✅第3步&#xff1a;初始化定位✅完整代码 ✅第1步&#xff1a;配置AndroidManifest.xml 在application标签下声明Service组件 <service android:n…

Aigtek高压放大器是什么东西做的

在许多电子应用中&#xff0c;需要将低电压信号放大到较高电压以满足特定的需求。为了实现这个目标&#xff0c;高压放大器被广泛采用。高压放大器是一种专用电子设备&#xff0c;使用特定的电路和器件来增益输入信号的电压。它通常由以下几个主要组成部分构成。 电源供应 高压…

Linux编译器---gcc/g++使用详解

目录 前言 gcc/g介绍 gcc/g的编译指令&#xff08;以gcc为例&#xff09; ​编辑 gcc选项 预处理(进行宏替换) 编译&#xff08;生成汇编&#xff09; 汇编&#xff08;生成机器可识别代码&#xff09; 链接&#xff08;生成可执行文件或库文件&#xff09; 函数库 概念 …

stable diffusion官方版本复现

踩了一些坑&#xff0c;来记录下 环境 CentOS Linux release 7.5.1804 (Core) 服务器RTX 3090 复现流程 按照Stable Diffusion的readme下载模型权重、我下载的是stable-diffusion-v1-4 版本的 1 因为服务器没法上huggingface&#xff0c;所以得把权重下载到本地&#xff…