はじめに
`console.log`残ってますよインデントがずれてますよコードレビューの時にconsole.logが残っているとかくだらないコードスタイルのコメントするのって心苦しいし、レビューを受けた方も「あ〜、しまったぁぁぁ💦」ってなりますよね。また、それに使っている時間はあまりにも不毛です。
これをcommit時に自動化しちゃいましょう！というお話です。
前提
- gitを使っている
- yarnを使っている
- React + Typescriptのお話
- 上記技術セットのプロジェクト作成の話はしない
筆者の環境
- M1 Mac
- macOS BigSur 11.4
- Node version 18.8.0
- Typescript version 4.8.2
- React version 18.2.0
何を使うか
- pre-commitの機能を使います
- lint-staged使います
- eslint使います
- prettier使います
やること
- 諸々インストールする
package.jsonをゴニョゴニョする- eslintのルールをゴニョゴニョする
- precommitをゴニョゴニョする
諸々インストールする
まずは以下のコマンドを実行して諸々インストールしていきます。
まずは hustkyとlint-stagedです。
$ yarn add -E -D husky lint-staged次に hustky initします。
$ npx husky-initするとエラーが出ました。
husky-init updating package.json
setting prepare script to command "husky install"
fatal: not a git repository (or any of the parent directories): .gitgit管理されていないディレクトリということでした。まだ git initやってなかったので
$ git initを実行し、再度
$ npx husky-init
husky-init updating package.json
"husky install" command already exists in prepare script, skipping.
husky - Git hooks installed
husky - created .husky/pre-commit今度は成功しました。
次に今回の要である２つのパッケージをインストールします。
$ yarn add prettier eslinteslintは初期設定をしないといけないのでやっていきます。細かい設定は皆さんの環境に合わせてください。
$ yarn run eslint --initさて、これでインストールと初期設定はOKです。次にpackage.jsonなどなどを触っていきます。
package.jsonをゴニョゴニョする
package.jsonでlint-stagedの設定をしていきます。
{
"scripts": {
...
"lint-staged": "lint-staged" これを追加
},
...
...
ここから
"husky": {
"hooks": {
"pre-commit": "lint-staged" pre-commitで使えるようにする設定
}
},
"lint-staged": {
"src/**/*.tsx": [
"prettier --write",
"eslint 'src/**/*.tsx' --fix" どのファイルを対象にコードスタイルのチェックをするか設定
]
}
ここまでを追加
}eslintのルールをゴニョゴニョする
.eslintrc.json を修正します。
ルールって書いちゃいましたが、parserOptionsも追加します。
{
"parserOptions": {
...
...
"project": ["tsconfig.json"] ご自身のプロジェクトの tsconfig.json のパスを入れる
},
...
...
"rules": {
"no-console": "error" console.logやconsole.warnなどがあったらerrorとしてくれる設定
}
}precommitをゴニョゴニョする
これで最後ですよ。あとちょっと！
.huskyディレクトリ配下の pre-commitを触ります。
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
yarn lint-stagedとすればOK。
これで準備完了です。実際にconsole.logなどを残してコミットしてみましょう。
git add .
git commit -m "test"
Debugger attached.
yarn run v1.22.10
$ lint-staged
Debugger attached.
✔ Preparing lint-staged...
❯ Running tasks for staged files...
❯ package.json — 2 files
❯ src/**/*.tsx — 1 file
✔ prettier --write
✖ eslint 'src/**/*.tsx' --fix [FAILED]
↓ Skipped because of errors from tasks. [SKIPPED]
✔ Reverting to original state because of errors...
✔ Cleaning up temporary files...
✖ eslint 'src/**/*.tsx' --fix:
Debugger attached.
Waiting for the debugger to disconnect...
/Users/xxxxx/projects/yyyyy/src/App.tsx
7:3 error Unexpected console statement no-console
✖ 1 problem (1 error, 0 warnings)
Waiting for the debugger to disconnect...
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Waiting for the debugger to disconnect...
husky - pre-commit hook exited with code 1 (error)App.tsxの7行目にconsole.logが残ってるって怒られています！
7:3 error Unexpected console statement no-consoleありがたいですね。ではこれを削除して再度コミットしてみましょう。
Debugger attached.tinue
yarn run v1.22.10
$ lint-staged
Debugger attached.
✔ Preparing lint-staged...
✔ Running tasks for staged files...
✔ Applying modifications from tasks...
✔ Cleaning up temporary files...
Waiting for the debugger to disconnect...
✨ Done in 5.88s.
Waiting for the debugger to disconnect...
[master 25cd359] ok
2 files changed, 6 insertions(+), 2 deletions(-)いけましたね。
最後に
いやー、これでコードスタイルチェックやconsole.logなどコミットして欲しくないもののコミットを事前に防ぐことができ、コードレビュー＆修正の負担を減らすことができますね。
以上、簡単ではありましたがprecommitでコードスタイルチェックを自動化しようというお話でした。
