vue3+vite+ts+eslint+prettier+stylelint+husky+lint-staged+commitlint+commitizen+cz-git

vue3工程化搭建流程

vue3+vite+ts+eslint+prettier+stylelint+husky+lint-staged+commitlint+commitizen+cz-git

工作当中我我们可以不搭建，可以直接用开源的架子，如vben等，但是我们一定要知道是如何搭建，当然一个好用的工程化项目还需要很多细节的配置，学习一下应付面试也是可以的。

所用到的配置知识点

• pnpm
• vue3
• vite
• 阮一峰typescript
• eslint
• prettier
• stylelint
• husky
• lint-staged
• commitlint
• Commitizen
• cz-git

开发工具及插件配置

开发工具

• vscode

插件

• eslint
• Prettier - Code formatter
• Stylelint
• Vue - Official

vscode --> settings.json添加下面配置

// 关闭IDE自带的样式验证
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  // 指定stylelint生效的文件类型（尤其是vue文件）
  "stylelint.validate": ["css", "postcss", "scss", "vue"],
  // 启用eslint的格式化能力
  "eslint.format.enable": true,
  // eslint 会在检查出错误时，给出对应的文档链接地址
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  // 指定 eslint 生效的文件类型(尤其是 vue 文件)。
  "eslint.probe": ["javascript", "typescript", "vue"],
  // 指定 eslint 的工作区，使每个子模块下的 .eslintignore 文件都能对当前目录生效。
  "eslint.workingDirectories": [{ "mode": "auto" }],
  // 设置默认格式化工具为 Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // 默认禁用自动格式化(手动格式化快捷键：Shift + Alt + F)
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,

  // 启用自动代码修复功能，保存时触发 eslint 和 stylelint 的自动修复。
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.fixAll.stylelint": "explicit"
  },

  // json、yaml 等配置文件保存时自动格式化
  "[json]": {
    "editor.formatOnSave": true
  },
  "[jsonc]": {
    "editor.formatOnSave": true
  },
  "[yaml]": {
    "editor.formatOnSave": true
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[ignore]": {
    "editor.defaultFormatter": "foxundermoon.shell-format"
  },
  "[shellscript]": {
    "editor.defaultFormatter": "foxundermoon.shell-format"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

vite创建vue3项目

默认已经配置好pnpm，vite等环境。

pnpm create vite my-vue-app --template vue-ts

创建完的项目目录如下：

配置tsconfig

vite创建的项目给提供了两个tsconfig文件，一个是tsconfig.json,一个是tsconfig.node.json

为什么会有两个？这个就牵扯到了tsconfig的一个概念[项目引用](TypeScript 中文网: 文档 - 项目引用 (nodejs.cn))，vue3官方文档也有写到关于ts的配置

也就是说，要想我们的tsconfig配置更加灵活，我们一般会将整个工程划分为多个ts project

• tsconfig.base.json 基础的配置，供其他配置文件继承
• tsconfig.app.json 处理src目录下的源码文件，里面会有浏览器环境下也有的一些api
• tsconfig.node.json 处理node环境下执行的脚本，如vite.config.ts
• tsconfig.eslint.json 处理eslint关于ts解析的配置
• tsconfig.json 通过references聚合所有的配置,然后给IDE使用，每个被聚合的文件要加compilerOptions.composite = true属性，才会被聚合在一起

新建相关文件，这个时候我们的项目目录如下：

tsconfig.base.json

{
  "compilerOptions": {
    "rootDir": ".",
    "baseUrl": ".",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "jsxImportSource": "vue",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  }
}

tsconfig.app.json

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "composite": true,
    // 增加了浏览器特有的dom相关api
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "types": ["node"],
    "jsx": "preserve",
    "jsxImportSource": "vue"
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "types/*.d.ts"],
  "exclude": ["node_modules/*", "**/__tests__/**/*", "**/*.js", "dist/*"]
}

tsconfig.node.app

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "composite": true,
    // 处理node脚本相关，不会有dom相关api
    "lib": ["ESNext"],
    "types": ["node"],
    "allowJs": true
  },
  "include": ["vite.config.ts"]
}

tsconfig.eslint.json

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "noEmit": true
  },
  "include": ["**/*", "**/.*.*"],
  "exclude": ["dist/*", "node_modules/*"]
}

tsconfig.json

{
  "files": [],
  "references": [{"path": "./tsconfig.app.json"},{ "path": "./tsconfig.node.json" }]
}

配置完之后我们发现tsconfig.node.json有标红，这个时候我们下载@types/node这个包即可

pnpm i -D @types/node

我们如果想要查看实际的编译选项或者包含的文件，我我们可以通过如下命令：

npx tsc -p tsconfig.aoo.json--showConfig

eslint配置

eslint使用8.x的版本,具体使用查看上面给出的文档

基本概念

• 配置文件，本次搭建使用.eslintrc.cjs因为package.json里面type: module

• 扩展配置文件 extends 可以省略配置名称中的eslint-config-前缀，如airbnb会被解析为eslint-config-airbnb

• 配置插件 plugin 非范围包和范围包中都可以省略eslint-plugin-前缀

  • 非范围包

    {
        // ...
        "plugins": [
            "jquery", // means eslint-plugin-jquery
        ]
        // ...
    }
    

  • 范围包

    {
        // ...
        "plugins": [
            "@jquery/jquery", // means @jquery/eslint-plugin-jquery
            "@foobar" // means @foobar/eslint-plugin
        ]
        // ...
    }
    

• 配置规则 rules

  • off或0 关闭规则
  • warn或1启用并视作警告
  • error或2启用并视作错误

• 配置解析器 parser 默认情况下eslint会使用Espree作为解析器，但是我们是vue项目会使用vue-eslint-parser作为解析器

• 配置语言选项 env

   env: {
      browser: true,
      es2022: true,
      node: true,
   }
  

• 指定解析器选项

  {
      "parserOptions": {
          "ecmaVersion": "latest",
          "sourceType": "module",
          "ecmaFeatures": {
              "jsx": true
          }
      },
      "rules": {
          "semi": "error"
      }
  }
  

• 忽略文件 使用.eslintignore

开始配置eslint

安装相关npm包

pnpm i -D eslint@8.57.0

pnpm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin vue-eslint-parser

pnpm i -D eslint-plugin-import eslint-plugin-vue eslint-config-airbnb-base eslint-config-airbnb-typescript

pnpm i -D eslint-plugin-prettier  eslint-config-prettier

pnpm i -D eslint-define-config

• @typescript-eslint/parser eslint解析器，它允许eslint理解ts代码（eslint默认只能解析js代码）
• @typescript-eslint/eslint-plugin eslint插件，包含了一些ts的设计规则，帮助开发者在开发的过程中避免一些常见的ts编程错误，并强制遵守一定的编码标准
• vue-eslint-parser eslint解析器，用于解析.vue文件中的<template>标签内的内容，如指令，插值表达式等，需要配合eslint-plugin-vue插件一起使用
• eslint-plugin-vue 是一个专为 Vue.js 设计的 ESLint 插件，它提供了一套规则来帮助开发者遵循 Vue.js 的最佳实践和风格指南。这个插件可以与 vue-eslint-parser 结合使用，以支持 .vue 文件的 <template> 部分的语法检查。
• eslint-plugin-import 是一个 ESLint 插件，它提供了一系列规则来帮助你避免常见的问题，并强制执行最佳实践，尤其是在处理模块导入时。这个插件特别有用，因为它可以帮助你检测未使用的导入、错误的导入语句、缺失的模块扩展名等问题。eslint-config-airbnb-base eslint-config-airbnb-typescript这两个共享配置包需要用到eslint-plugin-import
• eslint-config-airbnb-base eslint-config-airbnb-typescript 是两个不同的 ESLint 共享配置包，它们分别基于 Airbnb 的 JavaScript 和 TypeScript 编码规范。
• eslint-define-config是一个用于创建 ESLint 配置的辅助工具，它提供了一个 defineConfig 函数，使得定义 ESLint 规则、插件和设置变得更加方便和类型安全。这个工具特别适合于需要在多个项目中重用相同 ESLint 配置的情况。
• eslint-config-prettier 它的主要作用是关闭 ESLint 中与 Prettier 冲突的规则。Prettier 是一个流行的代码格式化工具，它会根据一定的风格规则自动格式化代码。由于 ESLint 也包含了一些格式化相关的规则，这些规则可能与 Prettier 的格式化风格不一致，因此可能会导致冲突。eslint-config-prettier 就是为了解决这个问题而设计的。
• eslint-plugin-prettier 它将 Prettier 作为一个 ESLint 规则来运行，并将 Prettier 的输出与当前的代码进行比较

创建.eslintrc.cjs文件

// @ts-check
const { defineConfig } = require('eslint-define-config');
const path = require('node:path');

/// <reference types="@eslint-types/typescript-eslint" />

module.exports = defineConfig({
  // 告诉eslint这个就是搁那配置文件，不需要在去上层查找
  root: true,
  // 配置全局环境api
  env: {
    browser: true,
    node: true,
    es2022: true,
  },
  // 后续如果用到jquery等会用到
  globals: {
    // $: "readonly",
  },
  // 共享配置
  extends: [
    'airbnb-base', // eslint-config-airbnb-base
    'airbnb-typescript/base', // eslint-config-airbnb-typescript
    'plugin:vue/vue3-recommended', // eslint-plugin-vue 具体为什么这么配置可以参考文档
    'eslint-config-prettier',
  ],
  plugins: ['vue', 'prettier', '@typescript-eslint'],
  // 配置vue解析器
  parser: 'vue-eslint-parser',
  // 指定ts的解析器
  parserOptions: {
    parser: '@typescript-eslint/parser',
    // ts解析器里面的属性
    project: path.resolve(__dirname, './tsconfig.eslint.json'),
    ecmaVersion: 13,
    sourceType: 'module',
    extraFileExtensions: ['.vue'],
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    'import/no-extraneous-dependencies': 'off',
    'import/prefer-default-export': 'off',

    // vue 允许单单词组件名
    'vue/multi-word-component-names': 'off',

    'operator-linebreak': ['error', 'after'],
    'class-methods-use-this': 'off',

    // 允许使用 ++
    'no-plusplus': 'off',

    'no-spaced-func': 'off',

    // 换行符不作约束
    'linebreak-style': 'off',
  },
  overrides: [
    {
      files: ['vite.config.ts'],
      rules: {
        'no-console': 'off',
      },
    },
  ],
});

创建.eslintignore

eslint默认忽略对.开头文件的检查，对于一些其他配置文件，我们需要加!反向声明忽略

dist
node_modules
public
.husky
.bin
.vscode
.idea
*.sh
*.md
.DS_Store

!.eslintrc.js
!.stylelintrc.js
!.prettierrc.js
!.lintstagedrc.js
!.commitlintrc.js

配置命令

在package.json中的scripts中添加如下命令

# 检测文件
"lint:eslint": "eslint ."
# 检测文件并自动 fix
"fix:eslint": "eslint --ext .js,.jsx,.ts,.tsx,.vue --fix ./"

然后运行

说明我们的配置已经生效

prettier配置

是一个流行的代码格式化工具，它支持多种编程语言和文件类型，旨在提供一个统一的代码风格，以减少在代码审查过程中关于代码样式的讨论

安装相关npm包

pnpm i -D prettier 

新建prettier.config.json

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "bracketSameLine": false,
  "arrowParens": "avoid",
  "endOfLine": "auto",
  "embeddedLanguageFormatting": "auto",
  "vueIndentScriptAndStyle": true,
  "singleAttributePerLine": false,
  "htmlWhitespaceSensitivity": "css",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve"
}

新建.prettierignore忽略文件

.eslintrc-auto-import.json
/types/components.d.ts
/types/auto-import.d.ts

node_modules
.DS_Store
dist
dist-ssr

.git
.prettierignore
.eslintignore
.gitignore

*.wasm
*.txt
*.png
*.jpg
*.jpeg
*.gif
*.bmp
*.svg
*.ttf
*.ico
*.lock
*.sh
*.md
*.woff
.browserslistrc

*.local

*debug.log*
*error.log*

*-lock.json

.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

配置命令

# 基础命令
"prettier": "prettier --no-editorconfig --config-precedence prefer-file \"**/*.{js,cjs,mjs,ts,cts,mts,json,jsonc,jsx,tsx,css,less,scss,styl,vue,html,md}\"",
# prettier 检测文件
"lint:prettier": "npm run prettier -- --check",
# prettier 检测文件并fix
"fix:prettier": "npm run prettier -- --write"

stylelint 配置

是一个强大的、现代化的 CSS 代码检查工具，它可以帮助开发者避免在样式表中出现错误，并保持一致的编码风格。

安装 npm 包

可以把下面的包以及版本好，拷贝到package.json的devDependencies中，执行pnpm i下载

"postcss": "^8.4.31",
"postcss-scss": "^4.0.9",
"postcss-html": "^1.5.0",
"sass": "^1.77.5",
"stylelint": "^15.10.3",
"stylelint-config-html": "^1.1.0",
"stylelint-config-prettier": "^9.0.5",
"stylelint-config-recommended-scss": "^13.0.0",
"stylelint-config-recommended-vue": "^1.5.0",
"stylelint-config-standard": "^34.0.0",
"stylelint-config-standard-scss": "^11.0.0",
"stylelint-order": "^6.0.3",
"stylelint-scss": "^5.2.1"

新建stylelint.config.mjs

export default {
  plugins: ['stylelint-order'],
  extends: [
    "stylelint-config-standard", // 配置 stylelint 拓展插件
    "stylelint-config-html/vue", // 配置 vue 中 template 样式格式化
    "stylelint-config-standard-scss", // 配置 stylelint scss 插件
    "stylelint-config-recommended-vue/scss", // 配置 vue 中 scss 样式格式化
  ],
  ignoreFiles: [
    '**/*.js',
    '**/*.cjs',
    '**/*.jsx',
    '**/*.tsx',
    '**/*.ts',
    '**/*.json',
    '**/*.md',
    '**/*.yaml',
    'node_modules/',
    'dist/',
    'public/',
    'docs/',
  ],
  overrides: [
    {
      files: ['**/*.(scss|css)'],
      customSyntax: 'postcss-scss',
    },
    {
      files: ['**/*.(html|vue)'],
      customSyntax: 'postcss-html',
    },
  ],
  rules: {
    "scss/at-import-partial-extension": null,
    'scss/dollar-variable-pattern': null, // 解决类名不允许下划线
    'scss/double-slash-comment-whitespace-inside': null,// 解决双斜杠注释后要有一个空格
    'selector-class-pattern': null,
    'block-no-empty': null,
    'no-empty-source': null,
    'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
    'selector-pseudo-element-no-unknown': [
      true,
      {
        ignorePseudoElements: ['v-deep'],
      },
    ],
    'selector-pseudo-class-no-unknown': [
      true,
      {
        ignorePseudoClasses: ['deep'],
      },
    ],
    'font-family-no-missing-generic-family-keyword': null,
    'no-duplicate-selectors': null,
    'selector-id-pattern': null, // 指定id选择器的模式
    'custom-property-pattern': null, // 为自定义属性指定模式。
    'no-invalid-double-slash-comments': null, // 禁止使用双斜杠注释（关闭）
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: ['mixin', 'if', 'else', 'include'],
      },
    ],
    'property-no-unknown': [
      true,
      {
        ignoreProperties: ['line-clamp'],
      },
    ],
    'indentation': [2],
    'order/properties-order': [ // 规则顺序
      'position',
      'content',
      'top',
      'right',
      'bottom',
      'left',
      'float',
      'display',
      'margin',
      'margin-top',
      'margin-right',
      'margin-bottom',
      'margin-left',
      'margin-collapse',
      'margin-top-collapse',
      'margin-right-collapse',
      'margin-bottom-collapse',
      'margin-left-collapse',
      'border',
      'border-radius',
      'outline',
      'outline-offset',
      'padding',
      'padding-top',
      'padding-right',
      'padding-bottom',
      'padding-left',
      'width',
      'height',
      'max-width',
      'max-height',
      'min-width',
      'min-height',
      'clip',
      'font',
      'font-family',
      'font-size',
      'font-smoothing',
      'osx-font-smoothing',
      'font-style',
      'font-weight',
      'line-height',
      'letter-spacing',
      'word-spacing',
      'text-align',
      'text-decoration',
      'text-indent',
      'text-overflow',
      'text-rendering',
      'text-size-adjust',
      'text-shadow',
      'text-transform',
      'word-break',
      'word-wrap',
      'white-space',
      'vertical-align',
      'list-style',
      'list-style-type',
      'list-style-position',
      'list-style-image',
      'pointer-events',
      'opacity',
      'filter',
      'visibility',
      'size',
      'transform',
      'background',
      'background-color',
      'color',
      'clear',
      'cursor',
      'overflow',
      'overflow-x',
      'overflow-y',
      'z-index',
    ],
  },
}

新建.stylelintignore文件

不需要忽略的可以自行删除

.eslintrc-auto-import.json
/types/components.d.ts
/types/auto-import.d.ts

node_modules
.DS_Store
dist
dist-ssr

.git
.prettierignore
.eslintignore
.gitignore

/bin
/docs
.husky
Dockerfile
*.wasm
*.txt
*.png
*.jpg
*.jpeg
*.gif
*.bmp
*.svg
*.ttf
*.ico
*.lock
*.sh
*.md
*.woff
.browserslistrcf

*.local

*debug.log*
*error.log*

*lock.json

*.js
*.jsx
*.ts
*.tsx

.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

添加命令

"lint:stylelint": "stylelint \"**/*.{css,scss,less,styl,postcss,vue}\"",
"fix:stylelint": "npm run lint:stylelint -- --fix"

Husky配置

husky是git的钩子函数，可以设置在git各个阶段触发，目前我们需要设置的两个钩子是：

git的所有钩子

• pre-commit
• commit-msg

v8-v9更新内容

配置.git

git init

会生成一个隐藏的.git文件夹

安装husky

pnpm i -D husky

npx husky init

执行完npx husky init之前要先配置好git，执行完，会生成一个.husky文件夹

init 命令简化了项目中的 husky 设置。它会在 .husky/ 中创建 pre-commit 脚本，并更新 package.json 中的 prepare 脚本。随后可根据你的工作流进行修改。

lint-staged配置

lint-staged 是一个在 git add 到暂存区的文件运行 linters (ESLint/Prettier/StyleLint) 的工具，避免在 git commit 提交时在整个项目执行。lint-staged 可以让你当前的代码检查 只检查本次修改更新的代码，并在出现错误的时候，自动修复并且推送

安装lint-staged

pnpm i lint-staged  -D

检测/格式化配置

• 方式一：在package.json中添加

  "lint-staged": {
      "*.{js,ts,vue}": [
        "eslint --fix",
        "prettier --write",
        "git add"
      ],
      "*.{cjs,json}": [
        "prettier --write"
      ],
      "*.{vue,html}": [
        "eslint --fix",
        "prettier --write",
        "stylelint --fix"
      ],
      "*.{scss,css}": [
        "stylelint --fix",
        "prettier --write"
      ],
      "*.md": [
        "prettier --write"
      ]
    }
  

• 方式二: 新建一个lint-staged.config.cjs文件,教程里面用的是这个方案

  module.exports = {
    "*.{js,cjs,mjs,jsx,ts,cts,mts,tsx,vue}": ["eslint"],
    "*.{css,scss,less,styl,postcss,vue,html}": ["stylelint"],
  };
  

  scripts中添加命令

  "lint:lint-staged": "lint-staged"
  

  修改.husky中pre-commit钩子函数配置

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

  

  结果如下，则配置生效，（前提要先git add .）

  

  commitlint配置

  上面配置好了husky以及lint-staged之后，我们想要再提交commit的时候符合一定的标准如

  

安装npm包

npm install --save-dev @commitlint/config-conventional @commitlint/cli

新建commitlint.config.cjs

module.exports = {
  // 继承的规则
  extends: ['@commitlint/config-conventional'],
   // @see: https://commitlint.js.org/#/reference-rules
  rules: {
    'subject-case': [0], // subject大小写不做校验
 
    // 类型枚举，git提交type必须是以下类型
    'type-enum': [
      // 当前验证的错误级别
      2,
      // 在什么情况下进行验证，always表示一直进行验证
      'always',
      [
        'feat', // 新增功能
        'fix', // 修复缺陷
        'docs', // 文档变更
        'style', // 代码格式（不影响功能，例如空格、分号等格式修正）
        'refactor', // 代码重构（不包括 bug 修复、功能新增）
        'perf', // 性能优化
        'test', // 添加疏漏测试或已有测试改动
        'build', // 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）
        'ci', // 修改 CI 配置、脚本
        'revert', // 回滚 commit
        'chore' // 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）
      ]
    ]
  }
}

添加commit提交信息校验的钩子

添加方式是husky9.x版本，husky那边要v8,v9更新的日志

echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg

运行完之后会在.husky中生成一个commit-msg文件，或者手动添加,直接把下面的命令拷贝到commit-msg当中

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit "$1"

windows（win11）下面通过命令生成运行的时候有问题，所以直接手动添加内容

然后运行git commit -m '测试commit钩子'

说明我们的配置已经生效，可以看到提示我们sunject,type不能为空，修改一下git commit -m "feat: 规范的提交" 可以看到下面的图里没有了报错

正确的提交格式: <type>(<scope>): <subject>

但是我们希望再提交的时候不需要手写这些type，subject，怎么办？

commitizen & cz-git配置

• commitizen 基于Node.js的 git commit 命令行工具，辅助生成标准化规范化的 commit message
• cz-git 一款工程性更强，轻量级，高度自定义，标准输出格式的 commitizen 适配器

安装npm包

# 全局安装
pnpm i -g commitizen

pnpm i -D cz-git

package.json中添加config，用来指定适配器

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

cz-git与commitlint进行联动给予校验信息，所以可以编写于commitlint.config.cjs中

module.exports = {
  // 继承的规则
  extends: ["@commitlint/config-conventional"],
  // @see: https://commitlint.js.org/#/reference-rules
  rules: {
    "subject-case": [0], // subject大小写不做校验

    // 类型枚举，git提交type必须是以下类型
    "type-enum": [
      2,
      "always",
      [
        "feat", // 新增功能
        "fix", // 修复缺陷
        "docs", // 文档变更
        "style", // 代码格式（不影响功能，例如空格、分号等格式修正）
        "refactor", // 代码重构（不包括 bug 修复、功能新增）
        "perf", // 性能优化
        "test", // 添加疏漏测试或已有测试改动
        "build", // 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）
        "ci", // 修改 CI 配置、脚本
        "revert", // 回滚 commit
        "chore", // 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）
      ],
    ],
  },
  prompt: {
    messages: {
      type: "选择你要提交的类型 :",
      scope: "选择一个提交范围（可选）:",
      customScope: "请输入自定义的提交范围 :",
      subject: "填写简短精炼的变更描述 :\n",
      body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
      breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
      footerPrefixesSelect: "选择关联issue前缀（可选）:",
      customFooterPrefix: "输入自定义issue前缀 :",
      footer: "列举关联issue (可选) 例如: #31, #I3244 :\n",
      generatingByAI: "正在通过 AI 生成你的提交简短描述...",
      generatedSelectByAI: "选择一个 AI 生成的简短描述:",
      confirmCommit: "是否提交或修改commit ?",
    },
    // prettier-ignore
    types: [
      { value: "feat",     name: "特性:     ✨  新增功能", emoji: ":sparkles:" },
      { value: "fix",      name: "修复:     🐛  修复缺陷", emoji: ":bug:" },
      { value: "docs",     name: "文档:     📝  文档变更", emoji: ":memo:" },
      { value: "style",    name: "格式:     💄  代码格式（不影响功能，例如空格、分号等格式修正）", emoji: ":lipstick:" },
      { value: "refactor", name: "重构:     ♻️  代码重构（不包括 bug 修复、功能新增）", emoji: ":recycle:" },
      { value: "perf",     name: "性能:     ⚡️  性能优化", emoji: ":zap:" },
      { value: "test",     name: "测试:     ✅  添加疏漏测试或已有测试改动", emoji: ":white_check_mark:"},
      { value: "build",    name: "构建:     📦️  构建流程、外部依赖变更（如升级 npm 包、修改 vite 配置等）", emoji: ":package:"},
      { value: "ci",       name: "集成:     🎡  修改 CI 配置、脚本",  emoji: ":ferris_wheel:"},
      { value: "revert",   name: "回退:     ⏪️  回滚 commit",emoji: ":rewind:"},
      { value: "chore",    name: "其他:     🔨  对构建过程或辅助工具和库的更改（不影响源文件、测试用例）", emoji: ":hammer:"},
    ],
    useEmoji: true,
    emojiAlign: "center",
    useAI: false,
    aiNumber: 1,
    themeColorCode: "",
    scopes: [],
    allowCustomScopes: true,
    allowEmptyScopes: true,
    customScopesAlign: "bottom",
    customScopesAlias: "custom",
    emptyScopesAlias: "empty",
    upperCaseSubject: false,
    markBreakingChangeMode: false,
    allowBreakingChanges: ["feat", "fix"],
    breaklineNumber: 100,
    breaklineChar: "|",
    skipQuestions: [],
    issuePrefixes: [
      { value: "closed", name: "closed:   ISSUES has been processed" },
    ],
    customIssuePrefixAlign: "top",
    emptyIssuePrefixAlias: "skip",
    customIssuePrefixAlias: "custom",
    allowCustomIssuePrefix: true,
    allowEmptyIssuePrefix: true,
    confirmColorize: true,
    maxHeaderLength: Infinity,
    maxSubjectLength: Infinity,
    minSubjectLength: 0,
    scopeOverrides: undefined,
    defaultBody: "",
    defaultIssues: "",
    defaultScope: "",
    defaultSubject: "",
  },
};

package.json中添加命令

"commit": "git-cz"

运行npm run commit在这之前要先git add .把改动的文件添加到暂存区

配置完毕

git提交

后续git push之前需要

• git add .
• npm run commit
• git push origin master

最后

package.json里面的脚本配置以及包版本如下

因为前端技术更新迭代太快，可能有的插件升级导致现在的一些配置发生了变化，所以碰到问题可以参考这里面的版本号

{
  "name": "vue-app2",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "lint:eslint": "eslint .",
    "fix:eslint": "eslint --ext .js,.jsx,.ts,.tsx,.vue --fix ./",
    "prettier": "prettier --no-editorconfig --config-precedence prefer-file \"**/*.{js,cjs,mjs,ts,cts,mts,json,jsonc,jsx,tsx,css,less,scss,styl,vue,html,md}\"",
    "lint:prettier": "npm run prettier -- --check",
    "fix:prettier": "npm run prettier -- --write",
    "lint:stylelint": "stylelint \"**/*.{css,scss,less,styl,postcss,vue}\"",
    "fix:stylelint": "npm run lint:stylelint -- --fix",
    "prepare": "husky",
    "lint:lint-staged": "lint-staged",
    "commit": "git-cz"
  },
  "dependencies": {
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@commitlint/cli": "^19.3.0",
    "@commitlint/config-conventional": "^19.2.2",
    "@types/node": "^20.14.2",
    "@typescript-eslint/eslint-plugin": "^7.13.0",
    "@typescript-eslint/parser": "^7.13.0",
    "@vitejs/plugin-vue": "^5.0.4",
    "commitizen": "^4.3.0",
    "cz-git": "^1.9.3",
    "eslint": "8.57.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-airbnb-typescript": "^18.0.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-define-config": "^2.1.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-vue": "^9.26.0",
    "husky": "^9.0.11",
    "lint-staged": "^15.2.7",
    "postcss": "^8.4.31",
    "postcss-html": "^1.5.0",
    "postcss-scss": "^4.0.9",
    "prettier": "^3.3.2",
    "sass": "^1.77.5",
    "stylelint": "^15.10.3",
    "stylelint-config-html": "^1.1.0",
    "stylelint-config-prettier": "^9.0.5",
    "stylelint-config-recommended-scss": "^13.0.0",
    "stylelint-config-recommended-vue": "^1.5.0",
    "stylelint-config-standard": "^34.0.0",
    "stylelint-config-standard-scss": "^11.0.0",
    "stylelint-order": "^6.0.3",
    "stylelint-scss": "^5.2.1",
    "typescript": "^5.2.2",
    "vite": "^5.2.0",
    "vue-eslint-parser": "^9.4.3",
    "vue-tsc": "^2.0.6"
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-git"
    }
  }
}

项目目录