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

适用于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文字长度默认是72
  subjectLimit: 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.4

or

pnpm 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-dev

or

pnpm 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. 添加 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文件结构

image-20240607095214112

pre-commit

检测提交时代码规范

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

添加 commit 时的 hook （npx 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 cz

git push

总结

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

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

代码格式规范：

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

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

git 提交规范：

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

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

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

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【Pytorch】一文向您详细介绍 torch.Tensor() 的常见用法

【Pytorch】一文向您详细介绍 torch.Tensor() 的常见用法

【Pytorch】一文向您详细介绍 torch.Tensor() 的常见用法 下滑即可查看博客内容 🌈 欢迎莅临我的个人主页 👈这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地！🎇 🎓 博主简介：985高校的普通…
阅读更多...
WebAPI AOP方式 异常方式 FilterAttribute、ActionFilterAttribute

WebAPI AOP方式 异常方式 FilterAttribute、ActionFilterAttribute

》》 自定义异常处理特性 using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web; using System.Web.Http.Filters;namespace WebApplication11 {/// <summary>/// 异常处理特性/// </sum…
阅读更多...
Transformer动画讲解：注意力计算Q、K、V

Transformer动画讲解：注意力计算Q、K、V

暑期实习基本结束了&#xff0c;校招即将开启。 不同以往的是&#xff0c;当前职场环境已不再是那个双向奔赴时代了。求职者在变多&#xff0c;HC 在变少&#xff0c;岗位要求还更高了。提前准备才是完全之策。 最近&#xff0c;我们又陆续整理了很多大厂的面试题&#xff0c…
阅读更多...
九种mfc140u.dll丢失的解决方法，全面解决mfc140u.dll文件丢失

九种mfc140u.dll丢失的解决方法，全面解决mfc140u.dll文件丢失

mfc140u.dll是 Microsoft Visual C 2015 Redistributable 的一部分&#xff0c;它与 Microsoft 基础类库&#xff08;MFC&#xff09;的 Unicode 版本有关。当您在运行使用 Visual C 2015 开发的应用程序时&#xff0c;可能会碰到关于mfc140u.dll丢失的错误。下面列出了一些解决…
阅读更多...
WPF前端：一个纯Xaml的水平导航栏

WPF前端：一个纯Xaml的水平导航栏

效果图&#xff1a; 代码&#xff1a; 1、样式代码&#xff0c;可以写在窗体资源处或者样式资源文件中 <Style x:Key"MenuRadioButtonStyle" TargetType"{x:Type RadioButton}"><Setter Property"FontSize" Value"16" />…
阅读更多...
Zabbix实现邮件和钉钉实时告警（使用python脚本）

Zabbix实现邮件和钉钉实时告警（使用python脚本）

告警和通知 告警是监控的主要职能，是指将到达某一阈值事件的消息发送给用户，让用户在事件发生的时候即刻知道监控项处于不正常状态，从而让用户来决定是否采取相关措施。 zabbix中，告警是由一系列的流程组成的，⾸首先是触发器到达阈值，接下是Active对事件信息进行处理，其…
阅读更多...
谁能赢？阿里的通义 VS 百度的文心

谁能赢？阿里的通义 VS 百度的文心

关注卢松松&#xff0c;会经常给你分享一些我的经验和观点。 国产AI大模型领域&#xff0c;当前有两大阵营&#xff1a; (1)以百度文心一言为代表的闭源大模型。李彦宏曾说过&#xff1a;AI大模型开源意义不大&#xff0c;百度绝不抢开发者饭碗。 (2)以阿里通义AI为代表的开…
阅读更多...
个股场外期权个人如何参与买卖？

个股场外期权个人如何参与买卖？

个股场外期权作为一种金融衍生品&#xff0c;为个人投资者提供了多样化的投资选择和风险管理工具。想要参与个股场外期权的买卖&#xff0c;以下是一些关键步骤和考虑因素。 文章来源/&#xff1a;财智财经 第一步&#xff1a;选择合适的金融机构 首先&#xff0c;个人投资者需…
阅读更多...
Android 常用开源库 MMKV 源码分析与理解

Android 常用开源库 MMKV 源码分析与理解

文章目录 前言一、MMKV简介1.mmap2.protobuf 二、MMKV 源码详解1.MMKV初始化2.MMKV对象获取3.文件摘要的映射4.loadFromFile 从文件加载数据5.数据写入6.内存重整7.数据读取8.数据删除9.文件回写10.Protobuf 实现1.序列化2.反序列化 12.文件锁1.加锁2.解锁 13.状态同步 总结参考…
阅读更多...
17- Redis 中的 quicklist 数据结构

17- Redis 中的 quicklist 数据结构

在 Redis 3.0 之前&#xff0c;List 对象的底层数据结构是双向链表或者压缩列表&#xff0c;然后在 Redis 3.2 的时候&#xff0c;List 对象的底层改由 quicklist 数据结构实现。 其实 quicklist 就是【双向链表 压缩列表】组合&#xff0c;因为一个 quicklist 就是一个链表&…
阅读更多...
视频修复工具，模糊视频变清晰！

视频修复工具，模糊视频变清晰！

老旧视频画面效果差&#xff0c;视频效果模糊。我们经常找不到一个好的工具来让视频更清晰&#xff0c;并把它变成高清画质。相信很多网友都会有这个需求&#xff0c;尤其是视频剪辑行业的网友&#xff0c;经常会遇到这个问题。今天给大家分享一个可以把模糊视频修复清晰的工具…
阅读更多...
【ffmpeg】本地格式转换 mp4转wav||裁剪mp4

【ffmpeg】本地格式转换 mp4转wav||裁剪mp4

个人感受&#xff1a;太爽了&#xff01;&#xff01;&#xff01;&#xff08;可能用惯了转换网站和无良的转换软件&#xff09; ———— 使用FFmpeg把mp4文件转换为WAV文件 - 简书 (jianshu.com) FFMPEG 视频分割和合并 - 简书 (jianshu.com) ———— 示例 ffmpeg -i …
阅读更多...
C# MemoryCache 缓存应用

C# MemoryCache 缓存应用

摘要 缓存是一种非常常见的性能优化技术&#xff0c;在开发过程中经常会用到。.NET提供了内置的内存缓存类 MemoryCache&#xff0c;它可以很方便地存储数据并在后续的请求中快速读取&#xff0c;从而提高应用程序的响应速度。 正文 通过使用 Microsoft.Extensions.Caching.Me…
阅读更多...
树的重心-java

树的重心-java

主要通过深度优先搜索来完成树的重心&#xff0c;其中关于树的重心的定义可以结合文字多加理解。 文章目录 前言☀ 一、树的重心☀ 二、算法思路☀ 1.图用邻接表存储 2.图的遍历 3.算法思路 二、代码如下☀ 1.代码如下&#xff1a; 2.读入数据 3,代码运行结果 总结 前言☀ 主…
阅读更多...
【中间件系列】浅析redis是否适合做消息队列

【中间件系列】浅析redis是否适合做消息队列

文章目录 一、简单的list消息队列1.命令示例2.伪代码示例3.方案优劣 二、Pub/Sub发布订阅1.消息丢失2.消息堆积 三、相对成熟的Stream1.redis命令介绍2.多消费者组测试3.Stream会持久化吗&#xff1f;4.消息堆积如何解决&#xff1f; 总结 用redis也是比较久了&#xff0c;并且…
阅读更多...
AI数据分析：用deepseek根据Excel数据绘制分裂饼形图

AI数据分析：用deepseek根据Excel数据绘制分裂饼形图

工作任务&#xff1a;要绘制下面表格中月活用户占比的分裂饼形图 在deepseek中输入提示词&#xff1a; 你是一个Python编程专家&#xff0c;要完成一个Python脚本编写的任务&#xff0c;具体步骤如下&#xff1a; 读取Excel文件"F:\AI自媒体内容\AI行业数据分析\poetop5…
阅读更多...
保姆级教程：以SAR图像目标检测为例

保姆级教程：以SAR图像目标检测为例

一、项目出发点 AI Studio为我们提供了免费的GPU资源&#xff0c;当我们在NoteBook环境中把代码调试成功后&#xff0c;通常一个训练任务耗时较长&#xff0c;而Notebook离线运行有时长限制&#xff0c;一不小心就容易被kill掉。 如何解决这一问题&#xff1f; 后台任务帮到…
阅读更多...
探索智慧农业系统架构的设计与应用

探索智慧农业系统架构的设计与应用

随着科技的不断进步和农业现代化的推进&#xff0c;智慧农业正逐渐成为农业发展的重要趋势。智慧农业系统架构的设计与应用&#xff0c;将农业生产与信息技术相结合&#xff0c;为农业生产提供了新的思路和解决方案。本文将深入探讨智慧农业系统架构的设计与应用&#xff0c;从…
阅读更多...
2021JSP普及组第二题：插入排序

2021JSP普及组第二题：插入排序

2021JSP普及组第二题 题目&#xff1a; 思路&#xff1a; 题目要求排序后根据操作进行对应操作。 操作一需要显示某位置数据排序后的位置&#xff0c;所以需要定义结构体数组储存原数据的位置和数据本身排序后所得数据要根据原位置输出排序后的位置&#xff0c;所以建立一个新…
阅读更多...
android中调用onnxruntime框架

android中调用onnxruntime框架

创建空白项目 安装Android Studio及创建空白项目参考&#xff1a;【安卓Java原生开发学习记录】一、安卓开发环境的搭建与HelloWorld&#xff08;详细图文解释&#xff09;_安卓原生开发-CSDN博客 切记&#xff1a;build configuration language 一定选择Groovy&#xff01;官…
阅读更多...
最新文章

Copyright @ 2022~2023