编程规范-代码检测-格式化-规范化提交

适用于vue项目的编程规范 – 在多人开发时统一编程规范至关重要

1、代码检测 --Eslint

Eslint一个插件化的 javascript 代码检测工具

在 .eslintrc.js 文件中进行配置

// ESLint 配置文件遵循 commonJS 的导出规则,所导出的对象就是 ESLint 的配置对象// 但是Eslint的校验规则会使开发者头疼不已  借助代码格式话可以解决这个问题
// pettier官网  :  https://www.prettier.cn/module.exports = {// 表示当前目录即为根目录,ESLint 规则将被限制到该目录下root: true,// env 表示启用 ESLint 检测的环境env: {// 在 node 环境下启动 ESLint 检测node: true},// ESLint 中基础配置需要继承的配置extends: ['plugin:vue/vue3-essential', '@vue/standard'],// 解析器parserOptions: {parser: '@babel/eslint-parser'},// 需要修改的启用规则及其各自的错误级别/*** 错误级别分为三种:* "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','vue/multi-word-component-names': 'off'}
}

存在的问题:代码检测仅仅只做检测,遇到不符合规则的代码其只会报错不能修复;那么,就需要代码格式化工具 — prettier

2、代码格式化 – prettier

prettier:一个代码格式化工具;开箱即用;可直接集成到 VSCode 之中;保存代码时自动格式化

在 文件 .prettierrc 中对其进行配置(复制后删除注释)

{// 不尾随分号"semi": false,// 使用单引号"singleQuote": true,// 多行逗号分割的语法中,最后一行不加逗号"trailingComma": "none"
}

vscode的配置

设置——》 搜索:save ——》 勾选Format On Save

至此,在保存代码时自动格式化;

代码写完,格式约束完成,那么接下来呢就是代码的提交;

3、代码规范化提交 – git

commitizen

一个git提交规范化工具

  1. 全局安装Commitizen

    npm install -g commitizen@4.2.4
    
  2. 安装并配置 cz-customizable 插件

    1. 使用 npm 下载 cz-customizable

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

      安装报错:

      npm ERR! code ERESOLVE
      npm ERR! ERESOLVE could not resolve
      npm ERR!
      npm ERR! While resolving: @vue/eslint-config-standard@6.1.0
      npm ERR! Found: eslint-plugin-vue@8.7.1
      npm ERR! node_modules/eslint-plugin-vue
      npm ERR!   dev eslint-plugin-vue@"^8.0.3" from the root project
      npm ERR!
      npm ERR! node_modules/@vue/eslint-config-standard
      npm ERR!   dev @vue/eslint-config-standard@"^6.1.0" from the root project
      npm ERR!
      npm ERR! Conflicting peer dependency: eslint-plugin-vue@7.20.0
      npm ERR! node_modules/eslint-plugin-vue
      npm ERR!   peer eslint-plugin-vue@"^7.0.0" from @vue/eslint-config-standard@6.1.0
      npm ERR!   node_modules/@vue/eslint-config-standard
      npm ERR!     dev @vue/eslint-config-standard@"^6.1.0" from the root project
      npm ERR!
      npm ERR! Fix the upstream dependency conflict, or retry
      npm ERR! this command with --force, or --legacy-peer-deps
      npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
      

      解决办法:在指令最后加**–force 或者 --legacy-peer-deps**

      npm i cz-customizable@6.3.0 --save-dev --legacy-peer-deps
      
    2. 添加以下配置到 package.json

      ..."config": {"commitizen": {"path": "node_modules/cz-customizable"}}
      
  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: 'refactor: 重构(既不是增加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/e/h)'},// 跳过问题skipQuestions: ['body', 'footer'],// subject文字长度默认是72subjectLimit: 72
    }
    
  4. 使用 git cz 代替 git commit
    使用 git cz 代替 git commit,即可看到提示内容

至此,可以使用git cz 代替 git commit 实现规范化提交,但存在一个问题,必须要通过 git cz 指令才可以完成规范化提交!

如果忘记了使用 git cz 指令,直接就提交了怎么办呢?那么有没有方式来限制这种错误的出现呢?答案是有的!

husky + commitlint

强制规范化的提交要求

使用 husky + commitlint 检查提交描述是否符合规范要求

commitlint
  1. 安装依赖:

    npm install --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4orpnpm 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
    
  3. 打开 commitlint.config.js , 增加配置项( config-conventional 默认配置点击可查看 ):

    module.exports = {// 继承的规则extends: ['@commitlint/config-conventional'],// 定义规则类型rules: {// type 类型定义,表示 git 提交的 type 必须在以下类型范围内'type-enum': [2,'always',['feat', // 新功能 feature'fix', // 修复 bug'docs', // 文档注释'style', // 代码格式(不影响代码运行的变动)'refactor', // 重构(既不增加新功能,也不是修复bug)'perf', // 性能优化'test', // 增加测试'chore', // 构建过程或辅助工具的变动'revert', // 回退'build' // 打包]],// subject 大小写不做校验'subject-case': [0]}
    }

注意:确保保存为 UTF-8 的编码格式(vscode的右下角切换即可),否则可能会报错

husky
  1. 安装依赖:

    npm install husky@7.0.1 --save-devorpnpm install husky@7.0.1 --save-dev
    
  2. 启动 hooks , 生成 .husky 文件夹 (终端中执行该命令)其会在根目录下生成.husky文件夹

    npx husky install
    

    image-20240607094831510

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

    npm set-script prepare "husky install"
    

    如果命令行不生效,直接在packjson.json文件中手敲出来也是可以的

    image-20240607094943183

  4. 执行 prepare 指令

    npm run prepare
    

    执行成功提示:

    image-20240607095119487

  5. 添加 commitlinthookhusky中,并指令在 commit-msghooks 下执行 npx --no-install commitlint --edit "$1" 指令

    npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
    

此时.husky文件结构

image-20240607095214112

pre-commit

检测提交时代码规范

执行 npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src"

添加 commit 时的 hooknpx eslint --ext .js,.vue src 会在执行到该 hook 时运行)

这里仅仅只是对提交时的代码做了一些检测,但是其和Eslint一样,只有检测不符合规范代码的作用,却无法修复

其会生成一个文件

image-20240607095337866

lint-staged

提交时自动修复格式错误

需要借助一个插件:lint-staged

lint-staged 无需单独安装,我们生成项目时,vue-cli 已经帮助我们安装过了,所以我们直接使用就可以了

  1. 修改 package.json 配置

    "lint-staged": {"src/**/*.{js,vue}": ["eslint --fix","git add"]}
    
  2. 如上配置,每次它只会在你本地 commit 之前,校验你提交的内容是否符合你本地配置的 eslint规则(这个见文档 ESLint ),校验会出现两种结果:

    1. 如果符合规则:则会提交成功。
    2. 如果不符合规则:它会自动执行 eslint --fix 尝试帮你自动修复,如果修复成功则会帮你把修复好的代码提交,如果失败,则会提示你错误,让你修好这个错误之后才能允许你提交代码。
  3. 修改 .husky/pre-commit 文件

    #!/bin/sh
    . "$(dirname "$0")/_/husky.sh"npx lint-staged
  4. 再次执行提交代码

  5. 发现 暂存区中 不符合 ESlint 的内容,被自动修复

最终提交代码的命令为:

git add .git czgit push

总结

编程格式规范的问题,整个规范大体可以分为两大类:

  1. 代码格式规范
  2. git 提交规范

代码格式规范:

对于 代码格式规范 而言,通过 ESLint + Prettier + VSCode 配置 配合进行了处理。

最终达到了在保存代码时,自动规范化代码格式的目的。

git 提交规范:

对于 git 提交规范 而言使用了 husky 来监测 Git hooks 钩子,并且通过以下插件完成了对应的配置:

  1. 约定式提交规范
  2. commitizen:git 提交规范化工具
  3. commitlint:用于检查提交信息
  4. pre-commitgit hooks 钩子
  5. lint-staged:只检查本次修改更新的代码,并在出现错误的时候,自动修复并且推送

监测 Git hooks 钩子,并且通过以下插件完成了对应的配置:

  1. 约定式提交规范
  2. commitizen:git 提交规范化工具
  3. commitlint:用于检查提交信息
  4. pre-commitgit hooks 钩子
  5. lint-staged:只检查本次修改更新的代码,并在出现错误的时候,自动修复并且推送

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

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

相关文章

Python数据分析I

目录 注:简单起见,下文中"df"均写为"表名","函数"均写为"HS","属性"均写为"SX","范围"均写为"FW"。 1.数据分析常用开源库 注释…

【国产NI替代】SMU 源测量仪:源测量单元平台主要用于半导体、传感器、模组等 IVR 测试测量

• 集 5 台仪器 (数字万用表、电压源、电流源、电子负载和脉冲发生器) 功能于⼀体 • 典型输出源及测量精度 02%,支持直流/脉冲输出模式 • 脉冲输出模式,最⼩脉冲宽度 100 us ,上升时间 10 us • 具有 pA 级分辨率高精度源,且…

融云:应用出海新增长引擎,GPT-4o 后的 AI 创新与用户运营

近日,融云与 TikTok、维卓联合在京举办了“十年出海,遇上 AI”私享会。 会上,融云解决方案架构师于洪达带来了《应用出海新增长引擎,AI 创新与用户精细化运营》主题分享,探讨在 AI 技术大潮下应用出海通过创新运营方式…

Java基础——数组Array

系列文章目录 文章目录 系列文章目录前言一、数组基本概念二、一维数组三、数组的模型四、数组对象的创建五、元素为引用数据类型的数组 前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网…

linux业务代码性能优化点

planning优化的一些改动----------> 减少值传递&#xff0c;多用引用来传递 <---------- // ----------> 减少值传递&#xff0c;多用引用来传递 <---------- // 例1&#xff1a; class A{}; std::vector<A> v; // for(auto elem : v) {} // 不建议&#xff…

flink读取hive写入http接口

目录 0、创建hive数据 1、pom.xml 2、flink代码 3、sink 4、提交任务jar 5、flink-conf.yaml 6、数据接收 flink-1.17.2jdk1.8hive-3.1.3hadoop3.3.6passwordhttp0、创建hive数据 /cluster/hive/bin/beeline !connect jdbc:hive2://ip:10000 create database demo; d…

【CS.SE】使用 docker pull confluentinc/cp-kafka 的全面指南

文章目录 1 引言2 准备工作2.1 安装 Docker2.1.1 在 Linux 上安装 Docker2.1.2 在 macOS 上安装 Docker2.1.3 在 Windows 上安装 Docker 2.2 验证 Docker 安装 3 拉取 confluentinc/cp-kafka Docker 镜像3.1 拉取镜像3.2 验证镜像 4 运行 Kafka 容器4.1 启动 ZooKeeper4.2 启动…

vue3中的ref与reactive的区别

目录 1、两者的区别底层实现响应式引用与响应式对象 2、用法3、vue3中声明的数组/对象3.1 通过reactive 声明的Array/Object&#xff0c;给它重新分配一个全新的对象时&#xff0c;会出错、或失去响应式效果 3.2 解决方案 4、cosnt 说明5、Proxy 与 definePropertyref 浅层响应…

从零开始实现自己的串口调试助手(9)-重置多文本框,保存/载入指令集

重置多文本框 添加多文本控件列表 在构造函数中把我们需要操作的控件归类到对应列表之中 //创建多文本存放数组 - 存放那三列内容 checkBox lineEdi btnfor(int i1;i<9;i){// 添加到按钮数组QString btnName QString("pushButton_t%1").arg(i); //构建对应控件名…

前端工程化:基于Vue.js 3.0的设计与实践

这里写目录标题 《前端工程化&#xff1a;基于Vue.js 3.0的设计与实践》书籍引言本书概述主要内容作者简介为什么选择这本书&#xff1f;结语 《前端工程化&#xff1a;基于Vue.js 3.0的设计与实践》书籍 够买连接—>https://item.jd.com/13952512.html 引言 在前端技术日…

深度解析:短剧市场的发展趋势

一、 短剧视频的兴起 小程序短剧视频是近年来在社交媒体平台上崭露头角的一种内容形式&#xff0c;其独特的表达方式吸引了大量用户的关注&#xff0c;这种类型的视频通常以小幅度、短时长的剧情为主&#xff0c;具有轻松幽默的风格&#xff0c;适合在碎片化的时间作为娱乐消遣…

Shell脚本学习_字符串变量

目录 1.Shell字符串变量&#xff1a;格式介绍 2.Shell字符串变量&#xff1a;拼接 3.Shell字符串变量&#xff1a;字符串截取 4.Shell索引数组变量&#xff1a;定义-获取-拼接-删除 1.Shell字符串变量&#xff1a;格式介绍 1、目标&#xff1a; 能够使用字符串的三种方式 …

HTTP-web服务器

web服务器 web服务器实现了http和相关的tcp连接处理&#xff0c;负责管理web服务器提供的资源&#xff0c;以及对服务器的配置&#xff0c;控制以及拓展等方面的管理 web服务器逻辑实现了http协议&#xff0c;并负责提供web服务器的管理功能&#xff0c;web服务器逻辑和操作系…

makefile与进度条

Linux项目自动化构建工具-make/makefile make是一个命令&#xff0c; makefile是一个文件&#xff0c;保存依赖关系和依赖方法。‘ touch Makefile/makefile mybin:mytest.c//依赖关系 目标文件&#xff1a;依赖文件列表 文件列表的文件之间以空格分隔 gcc -o mybin mytest.…

信号:干扰类别及特征提取(二)

目录 第二部分&#xff1a;特征提取 一&#xff1a;瞬时特征参数 1.零中心归一化瞬时幅度之谱密度的最大值 2.非弱信号段零中心归一化瞬时幅度的标准偏差 3.零中心归一化瞬时幅度绝对值的标准偏差 4.零中心归一化非弱信号段瞬时频率的标准偏差 5.零中心归一化非弱信号段…

【动态规划-BM78 打家劫舍(一)】

题目 描述 你是一个经验丰富的小偷&#xff0c;准备偷沿街的一排房间&#xff0c;每个房间都存有一定的现金&#xff0c;为了防止被发现&#xff0c;你不能偷相邻的两家&#xff0c;即&#xff0c;如果偷了第一家&#xff0c;就不能再偷第二家&#xff1b;如果偷了第二家&…

WPS JS宏获取自动筛选后的行数

//WPS JS宏获取自动筛选后的行数 function getFilterRowCnt(shtRng)//shtRng表示筛选目标工作表范围 {let lngRowCnt 0;for(let rngCell of shtRng.SpecialCells(xlCellTypeVisible).Areas)//获取自动筛选后的单元格行数{lngRowCnt lngRowCnt rngCell.Rows.Count;}return ln…

【ARM Cache 及 MMU 系列文章 6.3 -- ARMv8/v9 Cache Tag数据读取及分析】

请阅读【ARM Cache 及 MMU/MPU 系列文章专栏导读】 及【嵌入式开发学习必备专栏】 文章目录 Cache Tag 数据读取测试代码Cache Tag 数据读取 在处理器中,缓存是一种快速存储资源,用于减少访问主内存时的延迟。缓存通过存储主内存中经常访问的数据来实现这一点。为了有效地管…

【JavaScript】内置对象 - 字符串对象 ⑤ ( 判断对象中是否有某个属性 | 统计字符串中每个字符出现的次数 )

文章目录 一、判断对象中是否有某个属性1、获取对象属性2、判定对象是否有某个属性 二、统计字符串中每个字符出现的次数1、算法分析2、代码示例 String 字符串对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String 一、判…

车载诊断架构 - 引导诊断

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…