イイダリョウのブログ。JSフロントエンド開発環境の続きです。前回はESLintでコードチェックをしてみました。今回はコードフォーマッター「Prettier」でコードの整形をしてみます。JSだけでなくHTML、CSSなどもできるみたい。クモのようにコツコツとWeb開発環境まとめqiita.comChromeデベロッパーツールの整形ツールPrettier(プリティアと読むのかな?プリキュアみたいw)はコード整形ツール。ESLintはコードの構文をチェックして指摘してくれたが、Prettierはそれを修正する部分まで行ってくれる。コード整形ツールとは何か。似たような機能はChromeのデベロッパーツールにもついている。「Sources」パネルでjQueryのミニファイ(最小化)ファイルをみると改行がなくて読みにくい。これをクリックすると...適切な改行とインデント(字下げ)が入ってコードが読みやすくなる!*1Prettierはこれと同じようなことをしてくれるツール。これを使うと手作業よりも正確に体裁統一ができて、コードを読み書きするときにロジックの部分に集中することができる。*2Prettierのインストール前回のESLintと同じような流れでインストールでけた。-vPrettierを入れるフォルダを作る。今回は「prettier_test」とした。cdコマンドでprettier_testフォルダに移動。-yローカルにPrettierをインストールする。}HTMLのコード整形Prettierのコード整形のコマンドはシンプル。前回のESLintと同様にファイル名を書けば実行してくれる。Qiita早速HTMLファイルを整形してみよう。