前端项目管理之规范配置

628 阅读5分钟

git地址: github.com/Raj6666/vue…

规范代码提交 —— 用CommitLint

安装依赖
commitlint库 是校验提交信息的工具
husky库 是提供git提交的钩子函数工具

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

新增校验规则文件到根目录:commitlint.config.js
rule配置说明::rule由name和配置数组组成,如:'name:[0, 'always', 72]',数组中第一位为level,可选0,1,2,0为disable,1为warning,2为error,第二位为应用与否,可选always|never,第三位该rule的值。具体配置例子如下:

module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules: {
    "type-enum": [
      2,
      "always",
      [
        "merge", "upd", "feat", "fix", "refactor", "docs", "chore", "style", "revert",
      ],
    ],
  },
  "type-case": [0],
  "type-empty": [0],
  "scope-empty": [0],
  "scope-case": [0],
  "subject-full-stop": [0, "never"],
  "subject-case": [0, "never"],
  "header-max-length": [0, "always", 72],
};

常用的 type 类型

类型描述
build编译相关的修改,例如发布版本、对项目构建或者依赖的改动
chore其他修改, 比如改变构建流程、或者增加依赖库、工具等
ci持续集成修改
docs文档修改
feat新特性、新功能
fix修改bug
perf优化相关,比如提升性能、体验
refactor代码重构
revert回滚到上一个版本
style代码格式修改, 注意不是 css 修改
test测试用例修改

package.json 中配置husky属性
其中commit-msg代表了在用户git commit的时候执行的钩子函数指令

"husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "post-commit": "git update-index --again"
    }
}

规范编辑器代码格式 ——— 用.editorconfig

项目根目录新建 .editorconfig 文件
用于统一编辑器格式化代码时所用的规则,vscode、webstorm能自动读取
多人协同开发时,统一的代码格式是尤为重要的

# editorconfig.org
root = true

[*]
charset = utf-8
indent_size = 2
indent_style = space
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

规范版本控制 —— 使用changelog自动生成代码更新日志,并结合Standard-version

安装 conventional-changelog 及其脚手架, 还有commit的监测器
安装 standard-version 协助生成对应的标准的版本号

npm install conventional-changelog --save-dev
npm install conventional-changelog-cli --save-dev
npm install conventional-commits-detector --save-dev
npm install standard-version --save-dev

在更新版本时,依据主版本(major),次版本( minor) or 修订版(patch) 规则生成版本号
通常大版本更新我们会更新主版本号,新增功能或属性则更新次版本,修复bug等紧急问题处理则是更新修订版
package.json 的script脚本中新增更新对应版本并生成该版本changelog的脚本
后续我们每当开发完一个完整功能要更新一个版本后需要做的两件事,就能实现changelog的commit聚合与版本tag高度关联

  • 执行对应的版本更新version-脚本,如 npm run version-minor
  • 在git上打上同名的版本tag —— 可编写脚本(tagUpdate.js),自动获取当前版本号并打tag
"scripts": {
    "genChangelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 1 && git add CHANGELOG.md",
    "version-major": "standard-version -r major && npm run genChangelog ",
    "version-minor": "standard-version -r minor && npm run genChangelog ",
    "version-patch": "standard-version -r patch && npm run genChangelog ",
    "tag": "node ./tagUpdate.js"
},

初次执行时,可先使用以下脚本生成以前到现在为止的changelog汇总(-r的参数设置0)

conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md

PS: 在生成changelog的指令中加入-r 1 是为了实现整个版本的commit的合并 (可执行 conventional-changelog --help 查看详情参数解释)

如图就能查看该版本所包含的所有提交以及所有代码更新了 image.png

image.png

tagUpdate.js 脚本 —— 自动打tag

const fs = require('fs')
const { exec } = require('child_process')

const version = process.argv[2] || JSON.parse(fs.readFileSync('./package.json')).version
const message = process.argv[3] || `Release ${version}`

if (!version) {
  console.log('Please provide a version number.')
  process.exit(1)
}

// 执行Git命令创建并推送Tag
exec(`git tag -a v${version} -m "${message}" && git push origin v${version}`, (error, stdout, stderr) => {
  if (error) {
    console.error(`Exec error: ${error}`)
    process.exit(1)
  }
  console.log(`Git tag v${version} created and pushed successfully.`)
})

规范代码格式 —— 使用stylelint与prettier实现代码校验,并且在代码提交时利用lint-staged工具实现自动检查代码并修复

  1. 安装stylelint
    其中 stylelint-config-prettier与 stylelint-config-standard 为推荐的stylelint的推荐配置参数
    stylelint-order 则是为了实现css按指定顺序排列所需的插件
    指定版本是为了适配node 10.13.0 版本,大家可以看着自己公司node版本动态适配
npm install stylelint@13.13.1 --save-dev
npm install stylelint-config-prettier@8.0.2 --save-dev
npm install stylelint-config-standard@22.0.0 --save-dev
npm install stylelint-order@5.0.0 --save-dev
  1. 安装prettier
    npm 安装完后在eslintrc.js 中的extends数组中新增一项 prettier即可
npm install prettier --save-dev

但如果你是像我一样在使用脚手架构建项目时已经选择了prettier的话,vuecli就已经会自动帮我们引入了prettier

image.png

  1. 在根目录新建.stylelintrc 与 .prettierrc 文件 本人配置:github.com/Raj6666/vue…
    配置列表:stylelint.cn/user-guide/… image.png

本人配置:github.com/Raj6666/vue…
prettier官网:prettier.io/docs/en/opt…
官网译文:blog.csdn.net/weixin_3077…
配置参考:www.jianshu.com/p/a2d7dad64…
image.png

4.安装lint-staged工具并配置脚本

npm install lint-staged@8.1.5 --save-dev

package.json 中配置脚本 在lint-staged的配置中,我们定义对各种文件进行格式化校验与自动修复,修复完若通过校验则git add提交到本地仓库

  • 对.js与vue.文件使用prettier
  • 对.scss与.css文件还有.vue文件中的样式使用stylelint

然后lint-staged的这一系列操作,都通过在husky的pre-commit钩子函数中自动执行,也就是在用户commit提交代码之前,都执行一遍这对代码的自动校验与修复

"lint-staged": {
    "*.md": [
      "git add"
    ],
    "*.js": [
      "prettier --config .prettierrc --write",
      "eslint --fix src/**/*.js  --quiet",
      "git add"
    ],
    "*.vue": [
      "prettier --config .prettierrc --write",
      "stylelint --fix src/**/*.vue --quiet",
      "eslint --fix  src/**/*.vue --quiet",
      "git add"
    ],
    "src/**/*.(scss|css)": [
      "stylelint src/**/*.(scss|css) --fix",
      "git add"
    ]
  },
 "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }