Teek Design Vue3

主题

Teeker2025-07-26
1016
3.8m
Get...

工具规范 ​

概述 ​

为了确保团队协作效率和代码质量，我们制定了统一的编码规范。良好的代码规范有助于减少错误、提高可读性，并便于后期维护。本项目整合了多种自动化工具来帮助开发者遵循这些规范。

工具集 ​

项目中使用了以下工具来保证代码质量：

  • ESLint: JavaScript/TypeScript 语法和风格检查工具
  • Stylelint: CSS/SCSS 样式规范检查工具
  • Prettier: 代码格式化工具，统一代码风格
  • Commitlint: Git 提交信息规范检查工具

代码检查工具 ​

ESLint ​

ESLint 是一个可插拔的 JavaScript 和 TypeScript 代码检查工具，能够帮助我们发现语法错误和潜在问题。

常用命令 ​

sh
# 检查 JavaScript/TypeScript 文件
pnpm lint:eslint

# 自动修复发现的问题
pnpm lint:eslint --fix

配置详情 ​

配置文件为 eslint.config.js，包含了针对 Vue、TypeScript 等的配置规则，涵盖了常见的编码规范。

Stylelint ​

Stylelint 用于检查 CSS/SCSS 样式代码的规范性，确保团队成员编写的样式代码风格统一。

常用命令 ​

sh
# 检查样式文件
pnpm lint:stylelint

# 自动修复样式问题
pnpm lint:stylelint --fix

配置详情 ​

配置文件为 .stylelintrc.js，基于多种标准配置，包括标准 CSS、SCSS 和 Vue 组件中的样式规则。

Prettier ​

Prettier 是一个代码格式化工具，支持多种语言，帮助团队保持一致的代码风格。

常用命令 ​

sh
# 格式化代码
pnpm lint:prettier

配置详情 ​

配置文件为 .prettierrc.json，主要配置如下：

  • printWidth: 120 - 每行最大字符数为 120
  • semi: true - 语句末尾添加分号
  • singleQuote: false - 使用双引号而非单引号
  • trailingComma: "es5" - 在 ES5 中有效的尾随逗号
  • arrowParens: "avoid" - 箭头函数只有一个参数时省略括号

提交规范 ​

Commitlint 用于校验 Git 提交消息的格式，确保提交历史清晰、规范。

配置详情 ​

配置文件为 commitlint.config.js，基于 @commitlint/config-conventional 配置。

提交类型 ​

我们采用 Angular 提交规范，支持以下类型：

  • feat: 🚀 新增功能
  • fix: 🐞 修复问题
  • docs: 📚 文档变更
  • style: 🎨 代码格式调整（不影响代码逻辑）
  • refactor: ♻️ 代码重构
  • perf: ⚡️ 性能优化
  • test: ✅ 测试用例修改
  • build: 📦️ 构建系统或外部依赖变更
  • ci: 🎡 持续集成配置修改
  • revert: ⏪️ 代码回滚
  • chore: 🔨 其他不修改源码或测试代码的变更

提交示例 ​

自动化流程提交命令 推荐：

sh
git czp # 等于 git add . && git commit && git push
# or
git cz # 等于 git add . && git commit

当执行上述命令后，命令行会生成一个交互式命令行，根据提示进行提交。

手动提交命令：

sh
# 基础提交
git commit -m "feat: 新增用户登录功能"

# 指定模块的提交
git commit -m "fix(user): 修复用户登录验证逻辑"

# 包含详细描述的提交
git commit -m "refactor(api): 重构用户接口\n\n- 优化返回数据结构\n- 统一错误处理方式"

自动化检查 ​

Git Hooks ​

通过 Husky 实现 Git 钩子，在代码提交时自动执行检查和格式化操作。

配置文件为 .husky/lintstagedrc.js，针对不同类型文件执行相应检查：

  • JavaScript/TypeScript 文件：使用 ESLint 检查并用 Prettier 格式化
  • Vue 文件：使用 ESLint 和 Stylelint 检查，并用 Prettier 格式化
  • CSS/SCSS 文件：使用 Stylelint 检查并用 Prettier 格式化
  • JSON 文件：使用 Prettier 格式化
  • Markdown 文件：使用 Prettier 格式化

项目命令 ​

统一格式化 ​

项目提供了一键格式化命令，可以同时执行所有代码检查和格式化操作：

sh
# 执行所有代码检查和格式化
pnpm lint

该命令会依次执行 ESLint、Prettier 和 Stylelint 的检查与格式化。

临时跳过检查 ​

在特殊情况下，如果需要临时跳过提交检查，可以使用以下方式：

sh
# 跳过 Git 钩子检查
git commit -m "your commit message" --no-verify