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

news2025/11/1 17:50:37

前端项目编程规范化配置

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

一、代码检测工具 ESLint

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

? Pick a linter / formatter config: 
  ESLint with error prevention only // 仅包含错误的 ESLint
  ESLint + 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文字长度默认是72
  subjectLimit: 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.vue
  13: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.coloradmin.cn/o/359749.html

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

相关文章

QDateTime的11种显示方式

QDateTime的11种显示方式

QDateTime datetime QDateTime::currentDateTime(); datetime.toString(“hh:mm:ss\nyyyy/MM/dd”); datetime.toString(“hh:mm:ss ap\nyyyy/MM/dd”); datetime.toString(“hh:mm:ss\nyyyy-MM-dd”); datetime.toString(“hh:mm:ss ap\nyyyy-MM-dd”); datetime.to…
阅读更多...
【分享】订阅用友YonSuite集简云连接器同步销售出库数据至用友YonSuite

【分享】订阅用友YonSuite集简云连接器同步销售出库数据至用友YonSuite

方案场景 在企业中因多种系统孤立导致数据割裂，是现企业中现阶段面临的最大问题，而钉钉作为常用的OA审批系统，用友YonSuite作为ERP系统，原方式钉钉内完成审批再由人工将数据同步到用友YonSuite系统，数据同步过程中不仅…
阅读更多...
将HTTP接口配置成HTTPS

将HTTP接口配置成HTTPS

一、使用Java的keytool.exe程序生成本机的TLS许可找到Java的jdk目录进入bin默认安装路径C:\Program Files\Java\jdk1.8.0_91\bin 进入命令面板，在bin的路径栏中输入cmd敲击回车即可使用keytoolkeytool -genkeypair -alias tomcat_https -keypass 123456 -keyalg RSA…
阅读更多...
linux线程的基本知识

linux线程的基本知识

这里用的是Linux的pthread线程库，需要加pthread线程库。 线程的创建 第一个参数是线程id的地址。第二个参数是线程属性，一般为NULL。第三个是要执行的函数。第四个是函数的参数，一般也为NULL 线程的等待，第一个参数是线程的id,第…
阅读更多...
VBA提高篇_27 OptionBOX_CheckBox_Frame_Image_VBA附加控件

VBA提高篇_27 OptionBOX_CheckBox_Frame_Image_VBA附加控件

文章目录1.单选按钮OptionBOX:2.复选框CheckBox:3.框架Frame:4.图像Image: (loadPictrue)5. VBA附加控件:6. 适用于很多控件的重要属性:1.单选按钮OptionBOX: 默认时,同一窗体的所有单选按钮均属于同一组,只能选中一个 可通过Frame控件进行分组解决. 2.复选框CheckBox: 一次可以…
阅读更多...
备考软考系统分析师-1

备考软考系统分析师-1

系统分析师教程网盘资源：链接: https://pan.baidu.com/s/1ekHuCJJ3o5RrW1xeMkxhdA 提取码: 6666 信息系统战略规划 信息系统开发方法： 结构化法 瀑布模型 原型法 自顶向下 用于需求阶段较多 面向对象 自底向上 面向服务的方法 系统建模 政府信息…
阅读更多...
在Excel接入 chatgtp （图文教学）

在Excel接入 chatgtp （图文教学）

效果图 话不多说，开始教学 首先点击插入，然后点击获取加载项 office Excel 加载加载项时出错 解决办法_long_songs的博客-CSDN博客今天在添加维基百科的时候，怎么都添加不了，网上的办法都是关闭，重启，或者…
阅读更多...
[架构之路-114]-《软考-系统架构设计师》-软件架构设计-7-软件架构评估

[架构之路-114]-《软考-系统架构设计师》-软件架构设计-7-软件架构评估

前言第7节 软件架构评估7.1 什么是架构评估/为什么要软件架构评估在软硬件系统总体架构设计完成之后，为保证架构设计的合理性、完整性和针对性，从根本上保证系统质量，降低成本及投资风险，需要对总体架构进行评估。7.2 软件架构评估…
阅读更多...
word高效技巧：几个快速填充表格的操作方法

word高效技巧：几个快速填充表格的操作方法

我们办公人员在面对大量表格数据的时候，都希望以最简便、快捷的方式完成对数据的填充、美化等整理工作。比如，日常工作中几种常用的Word表格填充类型：1. 填充序号；2. 填充文本；3. 填充颜色。因此，接下来给大…
阅读更多...
你了解互联网APP推荐的背后逻辑么（下）？

你了解互联网APP推荐的背后逻辑么（下）？

上篇重点介绍了互联网APP在搜索交互场景下的通用逻辑，让大众对每天离不开的搜索进行了一个普遍介绍。这一篇，我们来聊聊抖音、头条等APP划一划这个动作背后，是怎么做推荐的。推荐的背后，离不开每个用户的数据，而且这个…
阅读更多...
谈谈Linux内核的噪声

谈谈Linux内核的噪声

Linux内核是广被使用的操作系统，从嵌入式家用设备，航空航天设备到超级计算机，到处都有Linux内核的身影，这归功于Linux内核丰富的配置带来的巨大灵活性。 网络虚拟化和软件定义网络的发展，也从另外一个方面证实了在网络…
阅读更多...
Java线程的6中状态

Java线程的6中状态

Java 线程的状态 Java线程有六种状态： 初始（NEW）、运行（RUNNABLE）、阻塞（BLOCKED）、 等待（WAITING）、超时等待（TIMED_WAITING）、终止&#xff08…
阅读更多...
layui框架学习（8：动态操作选项卡）

layui框架学习（8：动态操作选项卡）

Layui官网示例（参考文献3）中的选项卡部分除了介绍选项卡的样式外，还介绍了新增选项卡、删除选项卡、切换选项卡等动态操作选项卡方式，主要调用element模块中与选项卡相关的函数实现，除此之外，element模块还…
阅读更多...
树莓派下安装OpenEuler

树莓派下安装OpenEuler

openEuler作为华为开源的应用于嵌入式设备的操作系统，正在受到越来越多的关注。树莓派是一个很好的应用场景，这篇文章就介绍下如何在树莓派上安装openEuler。   ps：openEuler要求树莓派的版本是4B 1.下载openEuler镜像 镜像网址&#xff1…
阅读更多...
【K哥爬虫普法】百度、360八年乱战，robots 协议之战终落幕

【K哥爬虫普法】百度、360八年乱战，robots 协议之战终落幕

我国目前并未出台专门针对网络爬虫技术的法律规范，但在司法实践中，相关判决已屡见不鲜，K哥特设了“K哥爬虫普法”专栏，本栏目通过对真实案例的分析，旨在提高广大爬虫工程师的法律意识，知晓如何合法合规利用…
阅读更多...
大数据框架之Hadoop：MapReduce（三）MapReduce框架原理——MapReduce工作流程

大数据框架之Hadoop：MapReduce（三）MapReduce框架原理——MapReduce工作流程

1、流程示意图 MapReduce详细工作流程（一） MapReduce详细工作流程（二） 2、流程详解 上面的流程是整个MapReduce最全工作流程，但是Shuffle过程只是从第7步开始到第16步结束，具体Shuffle过程详解&#xff0…
阅读更多...
作为Linux C/C++程序员必备的工具

作为Linux C/C++程序员必备的工具

Linux系统 可以选择centOS或者ubautu server(不建议选择桌面版本的)。不建议裸机安装，玩坏了就特别麻烦。不建议使用有桌面版本的ubautu，在一定程度有桌面的版本的会消耗性能。 如果经济实力允许，可以购买云服务器。 参考文章: Ubuntu server…
阅读更多...
一款基于各大企业信息API渗透工具

一款基于各大企业信息API渗透工具

功能 剑指HW/SRC，解决在HW/SRC场景下遇到的各种针对国内企业信息收集难题 使用支持以下API，并支持合并数据导出 爱企查 (未登陆信息带*) 企查查（签名失效） 天眼查 阿拉丁 酷安市场 七麦数据 站长之家 veryvp 查询信息 IC…
阅读更多...
15-基础加强3-单元测试日志

15-基础加强3-单元测试日志

文章目录1.单元测试1.1概述【理解】1.2特点【理解】1.3使用步骤【应用】1.4相关注解【应用】2.日志2.1概述【理解】2.2日志体系结构和Log4J【理解】2.3入门案例【应用】1.单元测试 1.1概述【理解】 JUnit是一个 Java 编程语言的单元测试工具。JUnit 是一个非常重要的测试工具…
阅读更多...
荧光标记ATTO647N NHS，ATTO 647N SE，ATTO 647N-琥珀酰亚胺酯用于单分子检测

荧光标记ATTO647N NHS，ATTO 647N SE，ATTO 647N-琥珀酰亚胺酯用于单分子检测

【中文名称】 ATTO 647N-琥珀酰亚胺酯，ATTO 647N-活性酯【英文名称】 ATTO 647N-NHS，ATTO 647N NHS，ATTO 647N SE，ATTO 647N-NHS ester【光谱图】【CAS号】N/A【分子式】C46H55ClN4O5【分子量】779.41【基团部分】 ATTO【纯度标准…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023