代码规范

git 日志提交规范

格式如下：

<type>[optional scope]: <description>

[optional body]

[optional footer]

fix(:bug:)

修复问题，对应semver patch
fix: named slots for nested functional components

指定具体的模块，功能等

• fix(core)
• fix(ssr)
• fix(model)
• fix(keep-alive)

feat(:sparkles:)

增加新的特征，功能，对应semver minor
feat(weex): support sending style sheets and class list to native

BREAKING CHANGE

内容发生重大改变，对应semver major
BREAKING CHANGE: environment variables now take precedence over config files

build

构建版本
build: release 2.5.15

test

测试相关
test(vdom): add test case for #7786 (#7793)

types

当使用type script的时候，如果修改的内容和 types 相关。
types: add Fragment in RenderState typing (#7802)

workflow

有关工作流的修改
workflow: specify e2e env when releasing
workflow: remove setup script

chore

一些杂活，比如更新赞助者，重新组织代码贡献者
chore: coverage
chore: update sponsors
chore: re-organize backers.md

refactor

重构代码
refactor: observerState

重构具体的模块
refactor(core): remove unnecessary switch case (#5971)

docs(:memo:)

有关文档的修改
docs: update Angular’s commit convention link (#7666)

ci

相关工具的修改，比如vue-cli
ci: use latest version of codecov binary (#7665)

polish

美化代码
polish: raise warning when Vue.set/delete is called on invalid values

revert

版本回退
revert(weex): remove the “receiveTasks” api and support component hook

perf(:zap:)

优化性能
perf(v-model): tweak setSelected

Conventional Changelog Ecosystem
semantic versioning
git conventional commits
git emojis

使用commitlint校验本地提交信息

安装包

npm i @commitlint/cli @commitlint/config-conventional husky --save-dev

在项目的根目录下新建commitlint.config.js

module.exports = {extends: ['@commitlint/config-conventional']}

在scripts中添加如下script

{
  "scripts": {
    "commitmsg": "commitlint -e $GIT_PARAMS"
  }
}

使用commitizen交互式窗口生成约定的提交信息

作为项目依赖安装使用

npm i commitizen cz-conventional-changelog --save-dev

package.json 配置

{
  "scripts": {
    "commit": "git-cz"
  },
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  }
}

然后每次提交的时候，使用npm run commit代替git commit。

作为全局安装使用

npm i -g commitizen cz-conventional-changelog

创建 commitizen 配置文件：

echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc

现在每次提交的时候就可以使用git cz代替git commit。
git cz支持和git commit一样的选项，如：git cz -a。

自定义 commit 校验

verify-commit-msg.js

const chalk = require('chalk')
const msgPath = process.env.GIT_PARAMS
const msg = require('fs')
  .readFileSync(msgPath, 'utf-8')
  .trim()

const commitRE = /^(revert: )?(feat|fix|docs|style|refactor|perf|test|workflow|ci|chore|types)(\(.+\))?: .{1,50}/

if (!commitRE.test(msg)) {
  console.log()
  console.error(
    `  ${chalk.bgRed.white(' ERROR ')} ${chalk.red(
      `invalid commit message format.`
    )}\n\n` +
      chalk.red(
        `  Proper commit message format is required for automated changelog generation. Examples:\n\n`
      ) +
      `    ${chalk.green(`feat(compiler): add 'comments' option`)}\n` +
      `    ${chalk.green(
        `fix(v-model): handle events on blur (close #28)`
      )}\n\n` +
      chalk.red(
        `  You can also use ${chalk.cyan(
          `npm run commit`
        )} to interactively generate a commit message.\n`
      )
  )
  process.exit(1)
}

git 钩子

在 git 执行特定的阶段触发的程序，这些程序被放置在特定的目录下$GIT_DIR/hooks。

常用的钩子：

• pre-commit：执行git-commit时触发，但是你可以通过--no-verify选项绕过这个钩子。如果该钩子以非零状态码退出，那么会取消这次的提交。

• commit-msg：执行git-commit和git-merge的时候触发，但是你可以通过--no-verify选项绕过这个钩子。执行该钩子，会将握有提案信息的文件名作为参数传给该钩子。可以使用该钩子来编辑提交信息文件以规范提交信息，也可以拒绝提交信息。

• post-commit：执行这个钩子时，提交信息已经生成。主要用来发送一些通知等。

• pre-push：执行git-push时触发，会将远程地址和分支名称传入该钩子。如果该钩子以非零状态码退出，那么退出该次推送。

husky

通过npm scripts来触发git hooks，让使用git hooks更加的简单。

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "node verify-commit-msg.js"
    }
  }
}

lint-staged

在 git 执行的特定时期来触发校验。

{
  "lint-staged": {
    "*.{js,jsx,json}": ["prettier --write", "git add"]
  }
}

prettier

一款强大的代码格式化工具，支持js,jsx,Vue, Flow, TypeScript等。

{
  "prettier": {
    "semi": false,
    "singleQuote": true,
    "arrowParens": "avoid",
    "trailingComma": "es5"
  }
}

prettier整合eslint

.eslintrc.json:

{
  "plugins": ["prettier"],
  "extends": ["plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "warn"
    // other eslint rules
  }
}

eslint

Airbnb Javascript Style