Open6
フロントエンド開発の静的解析について
cordelia静的解析
コードを実行せずにコード品質を検証をすること。コード解析、フォーマット、型チェックなど。
関連要素
- 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
cordeliaPrettier
コードを整形するコードフォーマッター
目的
- コードスタイルの一貫性を保つ
- コードレビュー時にコードスタイルの指摘をするという無駄な時間をなくす
- チーム開発が当たり前のため、独自の書き方による可読性の低下を防ぐ
- ソースコードを綺麗にする労力をなくす
cordeliahusky
Gitのcommitやpush時に指定したコマンドを実行できる。Git Hooksでシェルスクリプトを書くより簡単に指定した処理を実行できる。
cordeliaGit Hooks
特定のGit commandの前後に指定したシェルスクリプトを実行する仕組み。ただし設定ファイルが.git 以下にあるのでプロジェクト間で共有しづらい。
cordelialint-staged
ステージングしたファイルに対して、指定したコマンド（リンター）を実行する。つまり変更のあったファイルにのみリンターを走らせることができるので、リンターの実行時間を短縮できる。
cordeliaEslint, Prettier, Husky, Lint-Staged
- packageをインストールする
- eslintの設定
- prettierの設定
- package.jsonにhuskyを起動するスクリプトを設定
-
.huskyにlint-stagedを起動するスクリプトを作成 - package.jsonに
lint-stageがeslintとprettierを実行するスクリプトを作成