团队建设
前端项目规范-工具篇
00 分钟
2023-1-4
2025-1-16
type
status
date
slug
summary
tags
category
icon
password

Vue/Electron 项目开发规范

为了提高整体开发效率，我们需要定制一些 Vue/Electron 脚手架工具，并确保代码规范一致。以下是我们推荐的工具组合：

1. 规范提交代码（必需）

  • 工具组合: eslint + stylelint + prettier + husky + lint-staged

1.1 ESLint

功能: 对 JavaScript 代码进行规则约束。

安装

配置 .eslintrc.js

提交前强制校验

使用 husky 和 lint-staged 在提交代码前进行检查。

1.2 Prettier

功能: 代码格式化工具。

安装

配置 .prettierrc.js

提交前强制格式化

1.3 Stylelint

功能: 对 CSS 代码进行规则约束。
请参考Stylelint 文档.

2. 规范 Commit 日志（必需）

为确保团队协作的高效性，规范的 Git 提交说明至关重要。它有助于快速生成开发日志，方便追踪项目进展。

Git 提交说明结构

Header 部分包括三个字段：type（必需）、scope（可选）和 subject（必需）。

Type 说明

  • feat: 新增功能
  • fix: 修复 Bug
  • docs: 文档变更
  • style: 代码格式（不影响功能）
  • refactor: 代码重构
  • perf: 性能改善
  • test: 测试
  • build: 构建或外部依赖变更
  • ci: 持续集成配置变更
  • chore: 辅助工具变更
  • revert: 代码回退

2.1 Commitlint

功能: 约定提交信息格式。

安装

配置

提交前校验

2.2 Commitizen

功能: 提供可视化的提交信息生成工具。

安装

配置

使用命令

3. 规范提交流程（可选）

针对 GitHub + NPM 项目，可以简化流程。
  • gh-pages: 发布 Demo 到 GitHub
  • release-it: 自动提交代码、修改版本、推送到 NPM

安装

使用命令

4. 辅助代码分析（可选）

使用工具辅助代码分析，确保代码质量。
  • jsinspect: 检测 JavaScript 代码重复
  • jscpd: 代码重复率报告

安装

使用命令

总结

通过以上工具的配置，团队可以实现高效的开发流程，确保代码质量和规范性。常用命令包括：
  • 提交代码: npm run commit
  • 发布 NPM 包: npm publish
  • 发布文档: npm run release:docs
上一篇
编码-优雅引用字体
下一篇
Vue 风格编写规范