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

news2024/11/22 17:11:22

适用于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：只检查本次修改更新的代码，并在出现错误的时候，自动修复并且推送

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SG3225EEN贴片差分晶振可实现高频高精度的要求

SG3225EEN贴片差分晶振可实现高频高精度的要求

在高速通信和高性能电子设备的发展中，高频高精度时钟源的需求日益增加。SG3225EEN贴片差分晶振以其出色的性能，满足了这一需求，成为这些应用领域的理想选择。SG3225EEN贴片差分晶振采用先进的制造工艺，提供高精度和低抖动的时钟信…
阅读更多...
005.FashionMNIST数据集简介

005.FashionMNIST数据集简介

一、FashionMNIST数据集简介 FashionMNIST数据集，作为经典的MNIST数据集的现代替代品的数据集，是衣物分类数据集，由Zalando（一家德国的在线时尚零售商）发布。 FashionMNIST数据集和MNIST相比。图片尺寸相同&#xff0c…
阅读更多...
超声波风速仪—快速捕捉气象变化

超声波风速仪—快速捕捉气象变化

TH-WQX2超声波风速仪，特别是在风力发电中作为风速风向仪的应用，是一种基于超声波原理测量风速和风向的设备。以下是对其特点、技术参数和应用的详细介绍： 特点 高精度测量：超声波风速风向仪利用超声波在空气中的传播速度随风速变化…
阅读更多...
2024下《系统集成项目管理工程师》50个高频考点汇总！值得收藏

2024下《系统集成项目管理工程师》50个高频考点汇总！值得收藏

宝子们！5月软考考完了，终于可以考系统集成了！ 整理了50个高频考点，涵盖全书90%考点，先把这个存下！再慢慢看书，边看书边背这个 1、信息安全的基本要素有： （1&#xff09…
阅读更多...
爬取股票数据python

爬取股票数据python

最近在搜集数据要做分析，一般的数据来源是一手数据（生产的）和二手数据（来自其他地方的）。 今天我们爬取同花顺这个网站的数据。url为：https://data.10jqka.com.cn/ipo/xgsgyzq/ 话不多说直接上代码。有帮…
阅读更多...
前端框架前置知识之Node.js：fs模块、path模块、http模块、端口号介绍

前端框架前置知识之Node.js：fs模块、path模块、http模块、端口号介绍

什么是模块？ 类似插件，封装了方法 / 属性 fs 模块- 读写文件 代码示例 // 1. 加载 fs 模块对象 const fs require(fs) // 2. 写入文件内容 fs.writeFile(./test.txt, hello, Node.js, (err) > {if (err) console.log(err) //若 err不为空&#xf…
阅读更多...
26-LINUX--I/O复用-select

26-LINUX--I/O复用-select

一.I/O复用概述 /O复用使得多个程序能够同时监听多个文件描述符，对提高程序的性能有很大帮助。以下情况适用于I/O复用技术： ◼ TCP 服务器同时要处理监听套接字和连接套接字。 ◼ 服务器要同时处理 TCP 请求和 UDP 请求。 ◼ 程序要同时处理多个套接…
阅读更多...
工业无线通信解决方案，企业在进行智能化升级改造

工业无线通信解决方案，企业在进行智能化升级改造

某大型制造企业在进行智能化升级改造,需要将分布在各个车间的数控机床、自动化生产线、AGV小车等设备连接到云端,实现设备的远程监控、数据采集分析等功能。之前工厂内部是用工业以太网连接,存在布线难、成本高、灵活性差等问题。 在了解客户需求后,我司星创易联的工程师建议客…
阅读更多...
png怎么变成jpg？教你3种方法一键批量转换

png怎么变成jpg？教你3种方法一键批量转换

png怎么变成jpg？PNG转JPG在图像处理中扮演着重要的角色。除了能够显著减小文件大小，使图像更易于分享和传输外，这种转换还能确保图像在各种平台和设备上都能得到良好的展示效果。无论是网站加载速度的优化，还是移动设备上的流畅浏…
阅读更多...
教师常用小程序分享

教师常用小程序分享

和大家分享几款超级实用的教学小程序，不仅能够提高我们的办公效率，还能让我们的教学生活变得更加轻松有趣。 腾讯文档：云端协作的利器 教学协作是必不可少的。腾讯文档小程序，就是云端协作的利器。支持多人在线编辑文档&#xff…
阅读更多...
在Obsidian中插入目录的解决方案

在Obsidian中插入目录的解决方案

常见的方案有floating toc插件。但是这个插件与另一个用于给导出pdf添加书签的插件Better Export PDF不兼容。 因此推荐另一个解决方案：Dynamic Table of Contents 此插件没有上架到社区插件市场，需要手动去github下载安装 GitHub - Aidurber/obsidia…
阅读更多...
Stable diffusion采样器详解

Stable diffusion采样器详解

在我们使用SD web UI的过程中，有很多采样器可以选择，那么什么是采样器？它们是如何工作的？它们之间有什么区别？你应该使用哪一个？这篇文章将会给你想要的答案。 什么是采样？ Stable Diffusion模…
阅读更多...
加密软件好用的是哪个？为什么这么多人说迅软DSE加密软件好用？

加密软件好用的是哪个？为什么这么多人说迅软DSE加密软件好用？

加密软件顾名思义就是用来对机密文件进行加密保护的，防止未经授权的人查看和篡改，保护公司的重要信息，预防泄露的事件发生，由此可见运用加密软件是有用的。那么，问题又来了哪款加密软件好呢？请看一下介绍。…
阅读更多...
MySQL学习十：常用函数与常见题型总结（持续更新中）

MySQL学习十：常用函数与常见题型总结（持续更新中）

目录 一、常用函数1.1 left 和 right 函数1.2 first_value 函数1.3 timestampdiff 函数1.4 datediff 函数1.4 date_sub 和 date_add 函数 二、常见题型2.1 查询新登录用户总体的次日留存率（第一天新登录的总体用户，第二天再次登录的总体用户）…
阅读更多...
Docker部署深度学习模型

Docker部署深度学习模型

基础概念 Docker Docker是一个打包、分发和运行应用程序的平台，允许将你的应用程序和应用程序所依赖的整个环境打包在一起。比如我有一个目标检测的项目，我想分享给朋友，那么他首先需要在自己的电脑上配置好显卡驱动、CUDA、CuDNN&#xff…
阅读更多...
NC56 入库失败提示负库存解决方法

NC56 入库失败提示负库存解决方法

前言 公司的 NC ERP 接入了第三方系统进行出入库单据管理。用户反馈提交入库单据时、NC ERP 报错【负库存或辅数量方向不一致】。于是进行排查和解决。 操作环境 NC ERP V56 。操作系统 Windows 11 ，数据库 Oracle DB 。 操作步骤 1、查询 NC “收发存汇总表”…
阅读更多...
前端 | 燃尽图绘制

前端 | 燃尽图绘制

文章目录 &#x1f4da;实现效果&#x1f4da;模块实现解析&#x1f407;html&#x1f407;css&#x1f407;javascript &#x1f4da;实现效果 &#x1f4da;模块实现解析 &#x1f407;html 搭框架<div id"LINE2"><div id"cloudtitle">TED…
阅读更多...
抖音电商课程（持续更新...）

抖音电商课程（持续更新...）

01 客户成交方式 1 直播间载体 冲动消费&#xff08;感性&#xff09; 团队配合好&#xff0c;主攻直播间。 客单价越高&#xff0c;对直播间的依赖性越强。进直播间建立强依赖关系。 2 短视频 / 图文载体 用户处于理性和感性之间。 擅长拍摄、擅长内容输出&#xff0c;…
阅读更多...
搭建电商项目||购物商城||APP|小程序|电商独立站系统如何接入JD商品

搭建电商项目||购物商城||APP|小程序|电商独立站系统如何接入JD商品

京东商品采集的步骤和应用场景可以归纳如下&#xff1a; 一、采集步骤 注册账号&#xff1a;首先&#xff0c;需要在京东开放平台注册一个开发者账号。创建应用&#xff1a;登录开放平台后&#xff0c;创建一个应用以获取API密钥和应用凭据。获取权限&#xff1a;根据所需的服…
阅读更多...
如何实现网站HTTPS访问

如何实现网站HTTPS访问

在当今网络安全至关重要的时代&#xff0c;HTTPS已经成为网站安全的基本标准。HTTPS&#xff08;超文本传输安全协议&#xff09;通过在HTTP协议基础上加入SSL加密层&#xff0c;确保了数据在用户浏览器和服务器之间的传输是加密的&#xff0c;有效防止数据被窃取或篡改&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023