背景

一步步写清楚，如何配置项目。使之可以在git commit的时候，完成所有的规范，包括eslint prettier message。

必备知识

eslint stylelint prettier不多说了
husky：是一个git hook工具。请注意 v4 和v7使用方式区别较大
commitizen：是一个命令行提示工具，它主要用于帮助我们更快地写出规范的commit message commitizen.github.io/cz-cli/
cz-customizable 它是一个第三方适配器，提供了灵活的配置项 github.com/leoforfree/…
commitlint：用于校验填写的commit message是否符合设定的规范
lint-staged 对暂存的 git 文件运行 linter github.com/okonet/lint…

新增配置截图

步骤教学

提示：多个包提供全局和本地安装2种方式，为保证项目规范统一，这里这提供本地安装的教程。

1.安装基础包

npm i eslint prettier stylelint -D。

eslint stylelint配置请自行配置，教程很多，此文不做赘述

2.husky

建议使用v7，文档typicode.github.io/husky/#/?id…

安装：npm install husky -D

初始化钩子：npx husky install

增加钩子：npx husky add .husky/pre-commit "npm test"

此处请注意：我们需要使用pre-commit commit-msg prepare-commit-msg 3个钩子

现在，我们先不急着增加钩子里的内容

3.commitizen

文档commitizen.github.io/cz-cli/

安装： npm install commitizen -D

此时你可以安装使用cz-conventional-changelog 作为提交代码的适配器。

你可以直接跳到第4部分，下方可以不看（因为它不够完美）

同时，需要你在package.json做如下配置

4.cz-customizable

这个是使用自定义适配器的包，文档github.com/leoforfree/…

安装：npm install cz-customizable -D

新增文件：

npx husky add .husky/prepare-commit-msg "npm test" 增加钩子，并修改默认行为

参考文档在这里commitizen.github.io/cz-cli/

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
echo "Preparing commit message..."

exec < /dev/tty && npx cz --hook || true

2.在package.json增加配置文件

  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  },

3.在根目录新增.cz-config.js

'use strict';

module.exports = {

  types: [
    {value: '特性',     name: '特性:    一个新的特性'},
    {value: '修复',      name: '修复:    修复一个Bug'},
    {value: '文档',     name: '文档:    变更的只有文档'},
    {value: '格式',    name: '格式:    空格, 分号等格式修复'},
    {value: '重构', name: '重构:    代码重构，注意和特性、修复区分开'},
    {value: '性能',     name: '性能:    提升性能'},
    {value: '测试',     name: '测试:    添加一个测试'},
    {value: '工具',    name: '工具:    开发工具变动(构建、脚手架工具等)'},
    {value: '回滚',   name: '回滚:    代码回退'}
  ],

  scopes: [
    {name: '模块1'},
    {name: '模块2'},
    {name: '模块3'},
    {name: '模块4'}
  ],

  // it needs to match the value for field type. Eg.: 'fix'
  /*
  scopeOverrides: {
    fix: [
      {name: 'merge'},
      {name: 'style'},
      {name: 'e2eTest'},
      {name: 'unitTest'}
    ]
  },
  */
  // override the messages, defaults are as follows
  messages: {
    type: '选择一种你的提交类型:',
    scope: '选择一个scope (可选):',
    // used if allowCustomScopes is true
    customScope: 'Denote the SCOPE of this change:',
    subject: '短说明:\n',
    body: '长说明，使用"|"换行(可选)：\n',
    breaking: '非兼容性说明 (可选):\n',
    footer: '关联关闭的issue，例如：#31, #34(可选):\n',
    confirmCommit: '确定提交说明?'
  },

  allowCustomScopes: true,
  allowBreakingChanges: ['特性', '修复'],

  // limit subject length
  subjectLimit: 100

};

现在，你使用git commit试试看？

5.commitlint

安装包： npm install -D @commitlint/cli @commitlint/config-conventional

生成配置文件：echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

增加钩子：npx husky add .husky/commit-msg 'npx --no-install commitlint --edit $1' （此处husky V 4 V7 配置不同，请点击官方文档typicode.github.io/husky/#/?id…）

至此，commit msg 基本的格式和校验已经完成

6.lint-staged

官方文档github.com/okonet/lint…

安装：npx mrm@2 lint-staged

然后在package.json自动生成了如下文件，（要改）

在.husky生成了如下文件（不用改）

因为我们是react ts less项目，那么 lint-staged可以如此改：

  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "eslint --max-warnings=0 --fix ",
      "prettier --write"
    ],
    "**/*.less": [
      "stylelint --fix"
    ]
  }

其中，--max-warnings=0 是为了将warn也抛出

7.eslint stylelint prettier

eslint stylelint不多说了，prettier可以在package.json里简单做个配置

  "prettier": {
    "singleQuote": true,
    "semi": true,
    "trailingComma": "all"
  },

8.试试看

在一个页面增加个alert

执行git commit

抛错！

完成！

鸣谢

感谢各位大佬的支持，欢迎提意见

如何配置husky+eslint+commitlint+cz+lint-staged+prettier规范代码提交

背景