静的解析

コードを実行せずにコード品質を検証をすること。コード解析、フォーマット、型チェックなど。

関連要素

• ESLint
• Stylelint
• Prettier
• husky
• lint-staged
• Git Hooks
• simple-git-hooks
• pre-commit

メモ書き

• vscodeのファイル保存時にelslint, prettierを実行
• git commit前にLintチェックしてエラーがあればcommitさせない
• 開発時にコード整形するスクリプトの実行忘れを防ぐためにGitのpre-commit hookを使う

プラクティス

• vscode上でファイル保存時にprettierを実行させる
• git commit時にprettierを実行、さらにESLintを実行してエラーがあればcommiを中止する

定番ぽい組み合わせ

Husky + lint-staged + ESLint + Prettier

Prettier

コードを整形するコードフォーマッター

目的

• コードスタイルの一貫性を保つ
• コードレビュー時にコードスタイルの指摘をするという無駄な時間をなくす
• チーム開発が当たり前のため、独自の書き方による可読性の低下を防ぐ
• ソースコードを綺麗にする労力をなくす

https://zenn.dev/cordelia/scraps/038e6ab8a0f5e7

husky

Gitのcommitやpush時に指定したコマンドを実行できる。Git Hooksでシェルスクリプトを書くより簡単に指定した処理を実行できる。

Git Hooks

特定のGit commandの前後に指定したシェルスクリプトを実行する仕組み。ただし設定ファイルが.git 以下にあるのでプロジェクト間で共有しづらい。

lint-staged

ステージングしたファイルに対して、指定したコマンド（リンター）を実行する。つまり変更のあったファイルにのみリンターを走らせることができるので、リンターの実行時間を短縮できる。

Eslint, Prettier, Husky, Lint-Staged

1. packageをインストールする
2. eslintの設定
3. prettierの設定
4. package.jsonにhuskyを起動するスクリプトを設定
5. .huskyにlint-stagedを起動するスクリプトを作成
6. package.jsonにlint-stageがeslintとprettierを実行するスクリプトを作成