キジ(@kiji)です｡今回は､Prettierについて解説します｡
Prettierはコードフォーマッターです｡JavaScript､HTMLなどのコードを整形してくれます｡AngularやVueといったフレームワークにも対応しています｡
Prettierは､コマンドでコードを整形してくれます｡そのため､今回はhuskyを使って､Git Commitの際に自動的に整形されるようにします｡対象は､Angularで作ったプロジェクtです｡
環境
$ npm -v
7.21.1
$ node -v
16.9.1
prettier ･･･ 2.4.1
husky ･･･ 7.0.2
インストール
任意のAngularプロジェクトのホームで､以下のコマンドを入力します｡
### Prettierのインストール
$ npm install --save-dev --save-exact prettier
### 設定ファイルの作成
$ echo {}> .prettierrc.json
### huskyのインストール
$ npm install -D husky
$ npx husky install
$ npm set-script prepare "husky install" # ･･･ npm install した際に自動で実行してくれる｡なくてもよい｡
$ npx husky add .husky/pre-commit "npx prettier --write src/ && ng test --watch=false && git add ."
設定ファイル
上記コマンドを実行することで､『.prettierrc.json』と『.husky/pre-commit』ファイルが作成されます｡
各々､以下のように設定しています｡
huskyはshellファイルにです｡記載されているコマンドを実行し､エラーが起きたら途中で止めてくれます｡
Prettierは､フォーマットのルールを記載します｡tabを使うか､スペースを使うか｡スペースの感覚はどのくらいかなど､細かな設定ができます｡
設定項目については､公式をご確認ください｡
Options · Prettier
Prettier ships with a handful of format options.
prettier.io
実行
実行は何でも良いです｡コマンド､SourceTreeなどのツールなど｡
今回は､コマンドを実行した際の結果を載せます｡
参考
What is Prettier? · Prettier
Prettier is an opinionated code formatter with support for:
prettier.io
Husky
Git hooks made easy
typicode.github.io
コメント