このチャプターの目次
⛓️ Git によるバージョン管理
前章のコーディング規約と同様に重要なのが、バージョン管理です。本書では、バージョン管理のツールに git を利用します。
.gitignore の作成
git に管理させたくないファイルやフォルダをあらかじめ .gitignore へ登録しておくと後々に困ることが少なくなります。
プロジェクトフォルダ直下に .gitignore ファイルを作成します。
.gitignore
node_modules
coverage
.env
.DS_Store
git レポジトリとして初期化する
では、このプロジェクトを git レポジトリとしましょう。
zsh
% git init
Initialized empty Git repository in /Users/zenn/my-hello-lib/.git/
// ステージング
% git add -A
// 初コミット
% git commit -m "first commit"
[main (root-commit) ca27c1a] first commit
22 files changed, 6152 insertions(+)
create mode 100644 .eslintignore
create mode 100644 .eslintrc.json
create mode 100644 .gitignore
create mode 100644 .npmrc
create mode 100644 .prettierignore
create mode 100644 .prettierrc.json
create mode 100644 .vscode/extensions.json
create mode 100644 .vscode/settings.json
create mode 100644 dist/bin/index.js
create mode 100644 dist/esm/index.d.ts
create mode 100644 dist/esm/index.d.ts.map
create mode 100644 dist/esm/index.js
create mode 100644 dist/index.js
create mode 100644 jest.config.ts
create mode 100644 package.json
create mode 100644 src/bin/index.ts
create mode 100644 src/index.ts
create mode 100644 tests/index.test.ts
create mode 100644 tsconfig.esm.json
create mode 100644 tsconfig.json
create mode 100644 yarn.lock
🔧 コミットフックの導入
simple-git-hooks のインストール
前章で eslint と prettier を導入しましたが、コミットするたびにテストやリント＆フォーマットが自動的に実行されると便利です。また、前章で見たコーディング規約的にも、これに違反するようなコミットを自動的に防ぐことも可能となります。
これを行うのがコミットフックですが、本書では設定が容易な simple-git-hooks をフックツールとして導入します。
zsh
% npm i -D simple-git-hooks
NPM スクリプトのアップデート
NPM スクリプトにリント＆フォーマットのコマンドを追加し、npm install 時に実行される prepare コマンドに simple-git-hooks を指定します。
package.json
"scripts": {
"lint": "run-s lint:*",
"lint:eslint": "eslint . --ext .ts,.tsx --fix",
"lint:prettier": "prettier --write .",
"prepare": "simple-git-hooks"
}
simple-git-hooks エントリの作成
simple-git-hooks というエントリを新設し、コミットするたびに自動的にテストとリント＆フォーマットがコミット前に実行されるよう設定します。
package.json
"simple-git-hooks": {
"pre-commit": "npm test && npm run lint"
}
コミットフックの動作を確認
では、npm install を実行してコミットフックを作成させたあと、コミットしてみましょう。
zsh
% npm install
> my-hello-lib@1.0.0 prepare
> simple-git-hooks
[INFO] Successfully set the pre-commit with command: npm test && npm run lint
[INFO] Successfully set all git hooks
up to date, audited 631 packages in 1s
zsh
% git add -A
% git commit -m "simple-git-hooks を追加"
> my-hello-lib@1.0.0 test
> jest
PASS tests/index.test.ts
hello() のテスト
✓ Hello. と出力 (1 ms)
----------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files | 100 | 100 | 100 | 100 |
index.ts | 100 | 100 | 100 | 100 |
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 0.288 s, estimated 1 s
Ran all test suites.
> my-hello-lib@1.0.0 lint
> run-s lint:*
> my-hello-lib@1.0.0 lint:eslint
> eslint . --ext .ts,.tsx --fix
> my-hello-lib@1.0.0 lint:prettier
> prettier --write .
.eslintrc.json 11ms
.prettierrc.json 1ms
jest.config.ts 10ms
package-lock.json 115ms
package.json 18ms
src/bin/index.ts 3ms
src/index.ts 3ms
tests/index.test.ts 6ms
tsconfig.esm.json 2ms
tsconfig.json 2ms
テストを無事通過すると、リント＆フォーマットも自動的に実行されました。