Vite 构建 Vue3 组件库之路：集成代码风格规范与提交规范

引言

在现代软件开发领域，代码质量和一致性不仅是项目成功的关键，也是长期维护的基础。它们对于保持项目代码的健康、提高其可读性和可维护性至关重要。随着项目规模的增长和团队合作的深化，统一的代码风格和规范的提交流程显得尤为重要。本文将展示如何在Vite构建Vue3组件库项目中集成一系列工具，以自动化代码风格检查、格式化和提交规范流程，旨在提升代码质量并提高开发效率，同时确保团队成员间的高效协作。无论您是刚开始接触代码规范，还是希望优化您的工作流，本文都旨在提供实用的实践参考。

代码风格规范

安装 ESLint

为了确保代码质量，使用 ESLint 对代码语法进行严格检查，及时发现潜在问题。

pnpm create @eslint/config
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · vue
✔ Does your project use TypeScript? · typescript
✔ Where does your code run? · browser
The config that you've selected requires the following dependencies:

eslint, globals, @eslint/js, typescript-eslint, eslint-plugin-vue
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · pnpm

安装 Prettier

Prettier 用于代码格式化，确保代码风格的一致性

pnpm add --save-dev --save-exact prettier

创建 Prettier 配置文件和忽略文件

touch .prettierrc
touch .prettierignore 

FAQ🙋

解决 ESLint 与 Prettier 冲突：安装 eslint-config-prettier，使 ESLint 与 Prettier 协同工作，避免格式检查的冲突，确保代码风格的一致性

pnpm add -D eslint-config-prettier

修改eslint.config.js配置

import someConfig from "some-other-config-you-use";
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  someConfig,
  eslintConfigPrettier,
];

代码提交规范

安装 Husky

Husky 用于管理 Git 钩子，帮助触发自定义脚本，实现代码质量的前置把关

pnpm add --save-dev husky

初始化 Husky 并配置 package.json：

pnpm exec husky init

"scripts": {
    "prepare": "husky",
}

安装 lint-staged

lint-staged 用于在代码提交前对暂存区的文件执行指定的脚本。

pnpm add --save-dev lint-staged

创建 .lintstagedrc 配置文件

{
    "packages/**/*.{vue,ts,js}": [
        "vitest related --run", // 运行vitest相关测试
        "eslint --fix", // eslint 修改代码问题
        "prettier --write" // prettier格式化代码
    ]
}

FAQ🙋

借助 Husky 在 pre-commit 钩子中执行 lint-staged

// pre-commit
lint-staged 

安装 commitlint

commitlint 对提交信息进行格式和内容的约束，保证提交信息的规范性和可读性。

pnpm add --save-dev @commitlint/{cli,config-conventional}

创建 commitlint.config.js 配置文件：

echo "export default { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js

FAQ🙋

借助 Husky 在 commit-msg 钩子中执行 commitlint

// commit-msg
pnpm dlx commitlint --edit $1

安装 @commitlint/cz-commitlint

@commitlint/cz-commitlint 提供了一个基于 Inquirer 的交互式提交信息生成器

pnpm add -D @commitlint/cz-commitlint commitizen inquirer@9

配置 package.json 以使用 git-cz 命令：

{
  "scripts": {
    "commit": "git-cz"
  },
  "config": {
    "commitizen": {
      "path": "@commitlint/cz-commitlint"
    }
  }
}

---

感谢阅读,敬请斧正!