非标题党：前端Vue React 项目编程规范化配置（大厂规范）

news/2024/9/17 9:43:45/

前端项目编程规范化配置

下述例子主要是从 代码规范化 以及 git 提交规范化 两方面进行配置。内容很多，请做好心理准备

一、代码检测工具 ESLint

在我们通过 vue create “项目名” 时，我们可以通过手动配置的方式，来配置 ESLint 来对代码进行检测。

? Pick a linter / formatter config: ESLint with error prevention only // 仅包含错误的 ESLintESLint + Airbnb config // Airbnb 的 ESLint 延伸规则ESLint + Standard config // 标准的 ESLint 规则

当我们配置了 标准的 ESLint 规则后，在项目根目录下会生成 .eslintrc.js 文件

// 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"},// 需要修改的启用规则及其各自的错误级别/*** 错误级别分为三种：* "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"}
};

当我们配置好 ESLint 规范后，就可以控制好自己的代码格式规范，但出现不符合规范的代码格式时，在运行阶段，ESLint 会在控制台输出提示信息。

但由此也暴露了一些问题，我们并不清楚 ESLint 有哪些规范，当我们出现不符合 ESLint 代码规范时，我们并不知道该怎么解决，那该怎么办？

接下来：要介绍的另外一个插件就是为了解决上诉问题的。

二、代码格式化 Prettier

Prettier 的作用：既可以保证 ESLint 规则校验，又可以让开发者无需关注格式问题来进行顺畅的开发

如何使用：

  • 步骤一：在 vsCode 中 安装 prettier 插件

在这里插入图片描述

  • 步骤二：在项目根目录下新建 .prettierrc 文件（该文件为 prettier 默认配置文件），并写入配置规则
{// 不尾随分号"semi": false,// 使用单引号"singleQuote": true,// 多行逗号分割的语法中，最后一行不加逗号"trailingComma": "none"
}
  • 步骤三：在vsCode 设置中，搜索 save ，勾选 Format On Save（目的：保存时对代码进行检测）

在这里插入图片描述

到这里就基本配置结束了，但这里会有一个问题，如果我们电脑的 VSCode 中 安装了多个代码格式化工具时，可能会出现 prettier 无法对代码进行格式化

解决方法：

在这里插入图片描述

prettier 与 ESLint 有几个地方会出现冲突（需要同步一下）：

  • VSCode 而言，默认一个 tab 等于 4 个空格，而 ESLint 希望一个 tab 为两个空格

在这里插入图片描述

  • 定义方法名和后面的小括号之间，得有一个空格！

在这里插入图片描述

出现这种情况可以修改ESLint 的配置文件（.eslintrc.js）将这个报错信息给关闭掉

rules: {// 该规则表示关闭《方法名后增加空格》的规则'space-before-function-paren': 'off'}

tips: 至此我们整个的 perttier 和 ESLint 的配合使用就算是全部完成了。到这里，代码规范化 已经配置好了。 接下来就是：git 提交规范化

三、约定式提交规范

我们在开发过程中，最常用的项目管理工具主要是 Git 工具。而约定式提交就是针对执行 git commit -m "描述信息" 时对 ”描述信息“ 进行规范化。

对于 Git 提交规范 来说，不同的团队可能会有不同的标准

目前使用最多的规范： Conventional Commits specification（约定式提交）

tips:

下面就已上述的规范进行 Git 提交进行规范化处理

四、 Commitizen

commitizen 仓库名为 cz-cli ，它提供了一个 git cz 的指令用于代替 git commit，从而对 Git 提交进行规范化处理

当你使用 commitizen 进行代码提交（git commit）时，commitizen 会提交你在提交时填写所有必需的提交字段！


注：接下的所有操作建议 npm >= 7

注：接下的所有操作建议 npm >= 7

注：接下的所有操作建议 npm >= 7

重要的事情说三遍！！！！！


1、由于我们平常要经常要使用到 Commitizen 来规范提交代码，建议全局安装：

在这里插入图片描述

2、进入到项目中，安装 cz-customizable（局部，局部，局部）

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

3、添加下面配置信息到 package.json 中

"config": {"commitizen": {"path": "node_modules/cz-customizable"}
}

在这里插入图片描述

4、在项目根目录下创建 .cz-config.js 自定义提示文件

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

到这里：我们提交代码时使用 git cz 来替换 git commit ，就可以看到提示信息
在这里插入图片描述

tips:

至此 Git提交规范 已经配置好了，

但这里也有一个问题：如果开发者不使用 git cz 来提交代码，则我们之前设置的 Git提交规范 就没有什么作用了

因此引出下面要讲的 Git Hooks

五、Git Hook

Git Hook ：在执行某个事件之前或之后进行一些其他额外的操作

Git 提供了 二十几条钩子函数

Git Hook调用时机说明
pre-applypatchgit am执行前
applypatch-msggit am执行前
post-applypatchgit am执行后不影响git am的结果
pre-commitgit commit执行前可以用git commit --no-verify绕过
commit-msggit commit执行前可以用git commit --no-verify绕过
post-commitgit commit执行后不影响git commit的结果
pre-merge-commitgit merge执行前可以用git merge --no-verify绕过。
prepare-commit-msggit commit执行后，编辑器打开之前
pre-rebasegit rebase执行前
post-checkoutgit checkout或git switch执行后如果不使用--no-checkout参数，则在git clone之后也会执行。
post-mergegit commit执行后在执行git pull时也会被调用
pre-pushgit push执行前
pre-receivegit-receive-pack执行前
update
post-receivegit-receive-pack执行后不影响git-receive-pack的结果
post-update当 git-receive-pack对 git push 作出反应并更新仓库中的引用时
push-to-checkout当``git-receive-pack对git push做出反应并更新仓库中的引用时，以及当推送试图更新当前被签出的分支且receive.denyCurrentBranch配置被设置为updateInstead`时
pre-auto-gcgit gc --auto执行前
post-rewrite执行git commit --amend或git rebase时
sendemail-validategit send-email执行前
fsmonitor-watchman配置core.fsmonitor被设置为.git/hooks/fsmonitor-watchman或.git/hooks/fsmonitor-watchmanv2时
p4-pre-submitgit-p4 submit执行前可以用git-p4 submit --no-verify绕过
p4-prepare-changelistgit-p4 submit执行后，编辑器启动前可以用git-p4 submit --no-verify绕过
p4-changelistgit-p4 submit执行并编辑完changelist message后可以用git-p4 submit --no-verify绕过
p4-post-changelistgit-p4 submit执行后
post-index-change索引被写入到read-cache.c do_write_locked_index后

详细的 HOOKS介绍 可点击这里查看

但针对这里：只要使用到其中俩条 API

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

简单来说这两个钩子：

  1. commit-msg：可以用来规范化标准格式，并且可以按需指定是否要拒绝本次提交
  2. pre-commit：会在提交前被调用，并且可以按需指定是否要拒绝本次提交

tips:

接下来针对 commit-msg、pre-commit 进行 Git 代码提交进行规范化

六、husky + commitlint + commit-msg

  • commitlint：用于检查提交信息
  • husky：是git hooks工具

注：接下的所有操作建议 npm >= 7

注：接下的所有操作建议 npm >= 7

注：接下的所有操作建议 npm >= 7

重要的事情说三遍！！！！！


1、commitlist

  • 安装依赖
npm install --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4
  • 项目根目录下创建 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 的编码格式，否则可能会出现以下错误：

在这里插入图片描述

2、husky

  • 安装依赖
npm install husky@7.0.1 --save-dev
  • 启动 hooks ， 生成 .husky 文件夹
npx husky install

在这里插入图片描述

  • 在 package.json 中生成 prepare 指令

在这里插入图片描述

  • 执行 prepare 指令
npm run prepare

在这里插入图片描述

  • 添加 commitlint 的 hook 到 husky中，并指令在 commit-msg 的 hooks 下执行 npx --no-install commitlint --edit "$1" 指令
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
  • 此时的 .husky 的文件结构

在这里插入图片描述


至此， 不符合规范的 commit 将不再可提交：

在这里插入图片描述

tips:

到这里就已经完成了 90% 了

而其中的 9% 是：对代码进行规范化，在这之前我们通过 ESLint 与 Prettier 配合解决代码格式问题，解决的是本地代码的格式化问题，并没有解决代码提交到仓库或远程仓库时代码是否符合规范

因此下面内容就使用到了 Git Hook 的另外一条钩子 pre-commit 对代码进行规范化

七、pre-commit

实现代码规范化

则那么想要完成这么一个操作就需要使用 husky 配合 eslint 才可以实现。

  1. 执行 npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src" 添加 commit 时的 hook （npx eslint --ext .js,.vue src 会在执行到该 hook 时运行）

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

    由于项目是 vue 项目，使用 eslint 检测的文件为 src 目录下的 .vue、.js

  2. 该操作会生成对应文件 pre-commit：

在这里插入图片描述

  1. 关闭 VSCode 的自动保存操作

  2. 修改一处代码，使其不符合 ESLint 校验规则

  3. 执行 提交操作 会发现，抛出一系列的错误，代码无法提交

    PS F:\xxxxxxxxxxxxxxxxxxx\hm-admin> git commit -m 'test'F:\xxxxxxxxxxxxxxxx\hm-admin\src\views\Home.vue13:9  error  Strings must use singlequote  quotes✖ 1 problem (1 error, 0 warnings)1 error and 0 warnings potentially fixable with the `--fix` option.husky - pre-commit hook exited with code 1 (error)

tips:

上诉操作如果代码不符合 ESLint 校验规则时，提交代码我们是提交不了的，我们只能根据提示回去修改修改。但如果错误很多的时候，我们该怎么处理？

剩下 1% 的内容就是为了解决这个问题的。

八、lint-staged

上面我们通过 pre-commit 处理了 检测代码的提交规范问题，当我们进行代码提交时，会检测所有的代码格式规范

但是这样会存在两个问题：

  1. 我们只修改了个别的文件，没有必要检测所有的文件代码格式
  2. 它只能给我们提示出对应的错误，我们还需要手动的进行代码修改

lint-staged ：就是处理这两个问题的（自动修复格式错误）


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

  1. 修改 package.json 配置

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

  2. 修改 .husky/pre-commit 文件

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

  3. 再次执行提交代码

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

九、没了没了，终于整理完了，一个下午的时间


http://www.ppmy.cn/news/26792.html

相关文章

python 绘图 —— 绘制从顶部向底部显示的柱形图[ax.bar()]

python 绘图 —— 绘制从顶部向底部显示的柱形图[ax.bar()]

python 绘图 —— 绘制从顶部向底部显示的柱形图[ax.bar()] 效果图如下所示： 就是这个样子，一般比较少见将柱形图从上往下绘制的。可能是会为了更好的展示数据对比结果吧。这里绘图的主要思路如下： 利用ax.twinx()这个函数生成一个新的x轴…
阅读更多...
双因素方差分析全流程

双因素方差分析全流程

上篇文章讲述了“单因素方差分析全流程总结”，单因素方差分析只是考虑了一个自变量（定类）与一个因变量（定量）之间的关系，但是在实际问题研究中可能研究两个或者几个因素与因变量之间的关系，例如…
阅读更多...
鼠标指针文件格式解析

鼠标指针文件格式解析

鼠标指针文件格式解析 文章目录鼠标指针文件格式解析windowsico文件格式分析文件头：图像数据头段：图像数据段：Ani动态光标格式解析数据结构：anihseq **rate**LISTcur静态光标文件格式解析macOSLinuxwindows ico文件格式分析 是一…
阅读更多...
1-MATLAB APP Design-图像的输入与输出

1-MATLAB APP Design-图像的输入与输出

一、APP 界面设计展示 新建一个空白的APP，在此次的学习中，我们会用到编辑字段（文本框）、 按钮、坐标区和面板，首先在界面中拖入一个编辑字段（文本框），在文本框中输入内容：图形的输入与输出，调整背景颜色，字体的颜色为黑色，字体的大小调为25.
阅读更多...
UG NX二次开发(C#)-CAM-不再高亮显示所有的加工特征(CAMFeature)

UG NX二次开发(C#)-CAM-不再高亮显示所有的加工特征(CAMFeature)

文章目录 1、前言2、加工特征高亮显示的示例3、获取加工特征的几何对象3.1 获取面对象并取消高亮显示3.2 获取坐标系对象并取消高亮显示4、创建一个不再高亮显示所有加工特征的方法1、前言 当我们在识别加工特征后，其默认状态是被选中的，所以是高亮显示；当我们不再选中时，…
阅读更多...
06- OpenCV查找图像轮廓 (OpenCV基础) (机器视觉)

06- OpenCV查找图像轮廓 (OpenCV基础) (机器视觉)

知识重点 灰度图转换: gray cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)二值化: 返回两个东西，一个阈值， 一个是二值化的图: thresh, binary cv2.threshold(gray, 150, 255, cv2.THRESH_BINARY)查找轮廓: 返回两个结果，分别是轮廓和层级: c…
阅读更多...
【C语言】浮点型数据在内存中的存储

【C语言】浮点型数据在内存中的存储

🚀🚀🚀 如果文章对你有帮助不要忘记点赞关注收藏哦🚀🚀🚀 文章目录⭐浮点数在内存中的存储1.1 🤓举个例子:1.2浮点数存储规则🌈：对于M与E有一些特别规定1.3解释前面题目&…
阅读更多...
STM32开发（11）----CubeMX配置独立看门狗（IWDG）

STM32开发（11）----CubeMX配置独立看门狗（IWDG）

CubeMX配置独立看门狗（IWDG）前言一、独立看门狗的介绍二、实验过程1.STM32CubeMX配置独立看门狗2.代码实现3.硬件连接4.实验结果总结前言 本章介绍使用STM32CubeMX对独立看门狗定时器进行配置的方法。门狗本质上是一个定时器，提供了更高的安…
阅读更多...
嵌入式Qt 开发一个视频播放器

嵌入式Qt 开发一个视频播放器

上篇文章：嵌入式 Qt开发一个音乐播放器，使用Qt制作了一个音乐播放器，并在OK3568开发板上进行了运行测试，实际测试效果还不错。 本篇继续来实现一个Qt视频播放器软件，可以实现视频列表的显示与选择播放等，先…
阅读更多...
centos7下用kvm启动Fedora36 Cloud镜像

centos7下用kvm启动Fedora36 Cloud镜像

环境 os:centos7 Arch: aarch64 安装qemu-kvm yum install qemu-kvm kvm virt-install libvirt systemctl start libvirtd.service创建镜像 下载aarch64架构的Fedora36镜像 wget https://mirrors.tuna.tsinghua.edu.cn/fedora/releases/36/Cloud/aarch64/images/Fedora-Cl…
阅读更多...
PaddleSlim 模型量化 源代码解读

PaddleSlim 模型量化 源代码解读

前言：paddleslim的中文资料非常丰富，在如何使用的教学上做的非常完善。但是源码解读与解析资料却非常少，这篇博客结合源代码大家一起学习一下paddle静态离线量化的原理和方法。 目录 原理简述 支持的量化类型 支持后端 量化操作 Prepara…
阅读更多...
基于linux内核的驱动开发

基于linux内核的驱动开发

1 自动创建设备文件 创建设备文件的方式：1 手动创建 sudo mknod /dev/haha0 c 250 0 2 自动创建--》使用内核函数 linux内核为我们提供了一组内核函数，用于在模块加载时自动在/dev目录下创建响应的设备文件&…
阅读更多...
vue-element-admin在git 上 clone 之后无法install

vue-element-admin在git 上 clone 之后无法install

一. 无法install的原因因为vue-element-admin引入的富文本编辑插件所导致 由于tui-editor变更 名字 导致 依赖查询找不到对应的版本二. 解决的办法先删掉package.json中tui-editor:1.3.3找到 \src\components\MarkdownEditor\index.vue 把所有的import 替换成下面4个import cod…
阅读更多...
【Kubernetes】【十九】安全认证

【Kubernetes】【十九】安全认证

第九章 安全认证 本章节主要介绍Kubernetes的安全认证机制。 访问控制概述 ​ Kubernetes作为一个分布式集群的管理工具，保证集群的安全性是其一个重要的任务。所谓的安全性其实就是保证对Kubernetes的各种客户端进行认证和鉴权操作。 客户端 在Kubernetes集群…
阅读更多...
23春招-mysql事务相关高频面试题

23春招-mysql事务相关高频面试题

1、什么是事务 对于一个事务，要么事务内的sql全部执行，要么都不执行 2、 事务的特性ACID 原子性 整个事务中所有的操作要么全部提交成功，要么全部失败会滚。 一致性 数据库总是从一个一致性状态转换到另一个一致性状态。假如有三个sql语句…
阅读更多...
Nginx 部署 Vue 项目以及 Vue 项目刷新出现 404 的问题（完整步骤）（亲测有效）

Nginx 部署 Vue 项目以及 Vue 项目刷新出现 404 的问题（完整步骤）（亲测有效）

Nginx 部署 Vue 项目以及 Vue 项目刷新出现 404 的问题（完整步骤）（亲测有效） 1.流程步骤（本教程下载的是1.20.2版本，放在D盘） 1-1. 首先去官方下载 nginx ，然后在当前目录下创建ht…
阅读更多...
一文带你看透前端世界里的日期时间，对就是Date

一文带你看透前端世界里的日期时间，对就是Date

很高兴我们能够通过不同空间，不同时间，通过这篇博客相识，那一定是一种缘分，一种你和狗哥的缘分。今天我希望通过这篇博客对我所熟知的前端世界里的日期时间做一个汇总，不止是代码上的汇总哦！ 目录 一、时区…
阅读更多...
2023环翠区编程挑战赛中学组题解

2023环翠区编程挑战赛中学组题解

T1. 出栈序列 题目描述 栈是一种“先进后出”的数据结构，对于一个序列1,2,...,n1,2, ...,n1,2,...,n，其入栈顺序是1,2,...n1,2, ...n1,2,...n，但每个元素出栈的时机可以自由选择。 例如111入栈、111出栈，222入栈、333入栈、333…
阅读更多...
基于UIAutomation+Python+Unittest+Beautifulreport的WindowsGUI自动化测试框架common目录解析

基于UIAutomation+Python+Unittest+Beautifulreport的WindowsGUI自动化测试框架common目录解析

文章目录1 框架工具说明2 技术栈说明3 框架截图4 源码解析/common目录4.1 common/baseinfo.py4.2 common/creenShot.py4.3 common/logOut.py4.4 common/reportOut.py4.5 common/sendMail.py注： 1、本文为本站首发，他用请联系作者并注明出处，谢…
阅读更多...
Spring基础总结(中)

Spring基础总结(中)

13. 实现 AOP 的方式 通过 ProxyFactory 实现，注意这和 Proxy 不同，如下的 User 类不需要实现接口 ProxyFactory proxyFactory new ProxyFactory(); proxyFactory.setTarget(new CService());proxyFactory.addAdvice(new MethodInterceptor() {public…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站