tyankatsu0105 / cz-format-extension

Extension for commitizen format

cz-format-extension

Extensible Commitizen's format

Usage

npm install -D commitizen cz-format-extension

Make .czrc or add config fields into package.json

.czrc

{
  "path": "cz-format-extension"
}

package.json

{
  "config": {
    "commitizen": {
      "path": "cz-format-extension"
    }
  }
}

Create Config file

Make .czferc.js

module.exports = {
  questions({inquirer, gitInfo}) {
    return [
      {...},
      {...},
    ]
  },
  commitMessage({answers, gitInfo}) {
    return ...
  }
}

• questions
  • params
    • inquirer
    • gitInfo + not_added, created, deleted, modified, renamed, staged from StatusResult of simple-git
  • return
    • Question Object
• commitMessage
  • params
    • answers
    • gitInfo + not_added, created, deleted, modified, renamed, staged from StatusResult of simple-git
  • return
    • string

We prepare the example.

Tips: Configuration settings with types

If you love to develop with types, you can use that with JSDocs.

/**
 * @typedef {{questionType1: string; questionType2: string}} Answers
 */

/** @type import('cz-format-extension').Config<Answers> */
module.exports = {
  questions({inquirer, gitInfo}) {
    return [
      {
        type: "list",
        name: "questionType1",
        message: "Select answer",
        choices: [
          {...},
          {...}
        ]
      },
    ]
  },
  commitMessage({answers, gitInfo}) {
    return `${answers.questionType1}${answers.questionType2}`
  }
}

Inspired by

• cz-conventional-changelog
• cz-conventional-changelog-ja

cz-format-extension's Issues

yarnとnpmのバージョンをルール弱める

現象

travisがコケるので、npmとyarnのバージョンを変更する

"npm": "*",
"yarn": ">=1.3.0"

testにbuildが含まれていないので復活

何故か消えたので復活

longestを自作する

依存モジュールを減らしたいので、薄いラッパーを作る

more information of gitInfo

gitInfo's property gets information from git-repo-info.
If we get more information about git from some package, it's good.

• simple-git status

PULL_REQUEST_TEMPLATE.mdの修正

どこを変更したいのか

プルリクのテンプレートを修正したい

どうなるのか

たぶんプルリクがやりやすくなる

util/const.tsのテスト作成

定数ファイルなので確認するだけ（いらない？）

out babel in webpack

babelいらんかもしれん
webpackでsrcのソースを圧縮したいけどどうしたら良いのかわからない・・・

不要なパッケージを見つけてしまったので削除する

どこを変更したいのか

不要なパッケージ削除

どうなるのか

スッキリ

Need upgraded to latest node version

This package still supports only until node 14 version. Need support for node.js v16 and v17.

How can I use this package together with "inquirer-autocomplete-prompt"?

I'd like to have an autocomplete type as one of my questions using this package.

Here is my code:

const wrap = require('word-wrap');

const MAX_COMMIT_LINE_WIDTH = 72;
const MAX_SUBJECT_LENGTH = 70;
const MIN_SUBJECT_LENGTH = 3;
const JIRA_ID_REGEX = /((?<!([A-Z]{1,10})-?)[A-Z]+-\d+)/;

const wrapOptions = {
	indent: '',
	trim: true,
	width: MAX_COMMIT_LINE_WIDTH,
};

const commitTypes = [
	{
		description: 'Build process or auxiliary tool changes',
		emoji: '🤖',
		value: 'chore',
	},
	{
		description: 'CI related changes',
		emoji: '🚀',
		value: 'ci',
	},
	{
		description: 'Documentation only changes',
		emoji: '📘',
		value: 'docs',
	},
	{
		description: 'A new feature',
		emoji: '🔥',
		value: 'feat',
	},
	{
		description: 'A bug fix',
		emoji: '🐞',
		value: 'fix',
	},
	{
		description: 'A code change that improves performance',
		emoji: '⚡',
		value: 'perf',
	},
	{
		description: 'A code change that neither fixes a bug or adds a feature',
		emoji: '💡',
		value: 'refactor',
	},
	{
		description: 'Create a release commit',
		emoji: '🔖',
		value: 'release',
	},
	{
		description: 'Markup, white-space, formatting, missing semi-colons...',
		emoji: '🎨',
		value: 'style',
	},
	{
		description: 'Adding missing tests',
		emoji: '✅',
		value: 'test',
	},
];

const getJIRAIdFromBranch = (branchName) => {
	const matches = branchName.match(JIRA_ID_REGEX);

	if (matches) {
		return matches[0];
	}

	return null;
};

const findCommitTypeIndex = (type) => {
	const matchingIndex = commitTypes.findIndex(
		(item) => `${item.emoji} ${item.value}: ${item.description}` === type,
	);

	if (matchingIndex === -1) {
		return 0;
	}

	return matchingIndex;
};

/** @type import('cz-format-extension').Config<Answers> */
module.exports = {
	questions({ inquirer, gitInfo }) {
		const branchName = gitInfo.branch;
		const JIRAId = getJIRAIdFromBranch(branchName);
		const JIRAPrefix = JIRAId ? JIRAId.split('-')[0] : null;

		return [
			{
				type: 'list',
				name: 'type',
				message: "Select the type of change that you're commiting",
				choices: commitTypes.map((type) => `${type.emoji} ${type.value}: ${type.description}`),
			},
			{
				type: 'input',
				name: 'jira_id',
				message: `Type the JIRA ID - optional (ex. ${JIRAPrefix ?? 'VLP'}-12345):`,
				default: JIRAId,
				validate: (input) =>
					input.length === 0 || JIRA_ID_REGEX.test(input) || 'JIRA Id must be valid',
			},
			{
				type: 'limitedInput',
				name: 'subject',
				message: 'Write a short, imperative mood description of the change:\n',
				maxLength: MAX_SUBJECT_LENGTH - 3,
				filter: (input) => {
					let subject;

					subject = input.trim();
					while (subject.endsWith('.')) {
						subject = subject.substr(0, subject.length - 1).trim();
					}

					return subject;
				},
				validate: (input) =>
					input.length >= MIN_SUBJECT_LENGTH ||
					`The subject must have at least ${MIN_SUBJECT_LENGTH} characters`,
			},
			{
				message: 'Provide a longer description of the change:\n',
				name: 'body',
				type: 'input',
			},
		];
	},
	commitMessage({ answers }) {
		const commitMeta = answers.jira_id ? ` [${answers.jira_id}]` : '';
		const commitType = commitTypes[findCommitTypeIndex(answers.type)];

		return [
			`${commitType.value}: ${commitType.emoji}${commitMeta} ${answers.subject}`,
			wrap(answers.body, wrapOptions),
		].join('\n\n');
	},
};

How to set the .czferc if I just want to modify the message template?

I am stuck in the customization step. the only thing I want to customize is that

from
"feat(scope): message"
to
"[feat] message"

thanks.

testツールを導入したい

what

• jest（もしくは+でpower-assert）
• mocha + chai
• ava

何かしら使ってjsのテストを導入したい

why

テストで機能の担保したい

searchAndLoadのファイル名を修正

やってることは初期化処理なので、関数名はinitialize等の名称で良いと思われる

eslint-config-airbnb-baseを採用する

概要

• eslint-config-airbnb-baseを依存モジュールに追加
• 関係のない依存モジュールを削除
  • eslint-config-airbnb
  • eslint-plugin-jsx-a11y
  • eslint-plugin-react

なぜ変更するのか

Reactのプロジェクトではないので、eslint-config-airbnbは必要ない。
React固有の設定のみを削除したeslint-config-airbnb-baseにするのが適切。

publishをコマンドにしたい

どこを変更したいのか

• package.jsonのscriptsにpublishコマンド置きたい
  • buildした後にpublishしてくれると👍

どうなるのか

僕が楽になる

testをindex.jsにて作動させる

#22 (comment)

らしいので、対応する。

nodeのバージョン固定変更

"node": ">=10.11.0"
にする。
travisがコケる。

Babelrcからporyfillを読み込ませる

useBuiltIns オプションを立てる

slackとgithubを連携させる

WHAT

たぶんwebhook

WHY

メンション気づかないので

TODO

• slack作る
• https://qiita.com/ooharabucyou/items/2a3dca643f6b7783d665 を参考にlambdaを使う
• slackにgithubのメンションが飛んでくる

エラーがスローされた際のメッセージを適切なものにする

try {
        const config = getConfig();
        const answers = await cz.prompt(config).catch(e => reject(e));
        resolve(
          commit(
            `${answers.prefix}${answers.scope}${answers.emoji}${answers.body}`
          )
        );
      } catch (e) {
        reject(e);
      }

rejectする際にエラーオブジェクトをそのまま渡しているので、どのようなエラーが表示されるのかがわからない。

• promptの処理がどういう時に失敗するのか
• commit()あるいはその他の処理が失敗した際のエラー処理をどうするか

上記の２点を調査して適切なエラーメッセージをrejectする仕様にするべき

create github action for unit test

Context

cz-format-extenstion have github action for cli tests.
But, don't have unit test.

util/initialize.tsのテスト作成

cosmiconfigをモックするかは要検討

libの扱いをどうするか決める

about

libをgitignore対象に含める

why

srcがあればbuildしてlib作成可能なので、libを含める必要性がないかもしれない

What

• gitignoreにlib含める
• ci(travis)になにか任せる？？

formatを指定できるようにする

なにをしたいか

czfe.config.js内で、commit messageのフォーマットを指定できるようにしたい

どうなりたいのか

czfe.config.js内で、commit messageのフォーマットを指定できるようにする

なぜしたいか

現状srcの中にべた書きしているので、ユーザーが自由に設定できるようにしたい

導入したいもの

v0.1.0の公開

今あるissueのマイルストーンv0.1.0を作業終わったら
一旦masterにbetaをマージする。

contribute時の注意追記

• testコマンド
• commit時のルール
• ブランチの説明
• PRのルール
• issueの立て方

をCONTRIBUTING.md に追記する

support hooks

This is proposal.
after hooks run after git commit with cz-cli.
This feature can do some task.

module.exports = {
  hooks: {
    after({ commitMessage }) {
      console.log("===================");
      console.log(commitMessage);
      console.log("===================");
    }
  }
};

prompterをasync/awaitに完全対応させる

thenを滅する

engine.tsのテスト作成

モジュールのコアとなる部分なので、重点的にテストする必要がある
モックはあまりしない方が好ましいが、git-repo-infoは個人のリポジトリを使うにしても色々アレなのでモックした方が良さそう

テスト環境の構築

無難にjestで良さそう。
完璧なテストを行うなら、jestではなくshellspecあたりになってくると思う

add Inquirer.js

https://github.com/SBoudrias/Inquirer.js/blob/master/packages/inquirer/examples/input.js
これでコマンドの雛形を作る

buildをtravisにまかせて、libをgit管理対象外に置きたい

なにをしたいか

travisにbuildコマンドを実行してほしい

どうなりたいのか

betaとmasterにマージ作業が発生したらtravis走らせたい

なぜしたいか

• 楽したい
• srcがあればlibはgit管理に含めなくていいので、gitignoreにlibを含めたい

導入したいもの

travis

流れ

• betaから生やしたtopicブランチで作業
• betaブランチにトピックブランチ取り込まれる
• そろそろnpmに公開するタイミングでbetaブランチからmasterブランチにマージ
• masterにマージされたタイミングでtravisが発動する
  • srcをbuildしてlib生成
  • changelogを生成し、githubのmasterブランチにプッシュ
  • npm publishをバージョン指定で実施

create roadmap

やりたいこと

長期的なロードマップを作りたい

やらないこと

• lodash依存

とりあえず雑にやりたいこと

• 一つのファイルで設定ができるようにする
• フォーマットを変更する機能だけにする
• cliの見た目を変えられるようにする（chalkとか）
• issue番号参照先を変更できるようにする（リポジトリ2つ運用で、issueは片方にしか立てないとか）
• emojiを複数入れれるようにする

並べ替え

• [ ]

PR template

# What

# Why

テストを作る

テストがないので作る

以下のファイル、フォルダに対してテストを作成する

• util/
  • [] const.ts (いらいかも？)
  • [] initialize.ts
• [] engine.ts

git-czで起動するようにする

何をするのか

• git-czコマンドで起動させるために、normal-commitのファイルを参考にしながら組み込んでいく

なぜするのか

• 必要だから

node関連のバージョン固定

engines でnode,npm,yarnのバージョン固定

なぜやるのか

lockファイルの差分がやばい

contributorsにcamcam_lemon追加

https://docs.npmjs.com/files/package.json#people-fields-author-contributors

{
      "name": "camcam_lemon",
      "url": "https://github.com/camcam-lemon"
    }

的なのをpackage.jsonに追加する

set config file on project directory

やりたいこと

プロジェクト直下に設定ファイルを置いたら読むようにする

githubのPR、issueのテンプレート作成

PR

# 何をしたか
- 

# なぜしたか
- 

issue

バグ

# 現象

# 再現バージョン
- node・・・
- npm・・・
- yarn・・・

新機能

# なにをしたいか

# どうなりたいのか

# なぜしたいか

# 導入したいもの

リファクタリング

# どこを直したいのか

# どうなるのか

その他