フロントエンド開発環境の続きです。前回はESLintでコードチェックをしてみました。今回はコードフォーマッター「Prettier」でコードの整形をしてみます。JSだけでなくHTML、CSSなどもできるみたい。それでは行きまっしょい！
【目次】
※参考：【JS】ESLintで構文チェックを事始める - クモのようにコツコツと
Web開発環境まとめ
qiita.com
Chromeデベロッパーツールの整形ツール
Prettier（プリティアと読むのかな？プリキュアみたいw）はコード整形ツール。ESLintはコードの構文をチェックして指摘してくれたが、Prettierはそれを修正する部分まで行ってくれる。
コード整形ツールとは何か。似たような機能はChromeのデベロッパーツールにもついている。
「Sources」パネルでjQueryのミニファイ（最小化）ファイルをみると改行がなくて読みにくい。
左下の波カッコアイコン{ }が整形ツール。これをクリックすると…
適切な改行とインデント（字下げ）が入ってコードが読みやすくなる！*1
Prettierはこれと同じようなことをしてくれるツール。これを使うと手作業よりも正確に体裁統一ができて、コードを読み書きするときにロジックの部分に集中することができる。*2
Prettierのインストール
前回のESLintと同じような流れでインストールでけた。
いつものようにNode.jsとnpmは既に入っている前提（ターミナルで下記を叩くとバージョン番号が出る）
node -v npm -v
Prettierを入れるフォルダを作る。今回は「prettier_test」とした。
cdコマンドでprettier_testフォルダに移動。
cd （フォルダのパス）/prettier_test
package.jsonの作成
npm init -y
ローカルにPrettierをインストールする。
npm install -D prettier
package.jsonにprettierが記述された！
"devDependencies": { "prettier": "^1.19.1" }
HTMLのコード整形
Prettierのコード整形のコマンドはシンプル。
npx prettier ファイル名
前回のESLintと同様にファイル名を書けば実行してくれる。
早速HTMLファイルを整形してみよう。
まず、index.htmlを作成して、なるべく酷い体裁で書き殴ってみるw
<!doctype html><html><head> <meta charset="UTF-8"> <title>コニチワプリティア </title> <link rel= "stylesheet" href= "style.css"> </head><body > <section> <h1>コニチワプリティア </h1><p>ハロー、ハ ロー。ボクノナマ エハ、プリティアデス マス、ハイ。</section><script src ="script.js"> </script> </body > </html>
うーむ、いろいろ酷いなw いくら忙しくてもここまでならんだろう。なお、トラップとしてpの閉じタグを抜いてみた。どうなるかね？
それではいよいよフォーマットを実行！
npx prettier index.html
するとコマンドの下に整形されたコードが出た！
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>コニチワプリティア</title> <link rel="stylesheet" href="style.css" /> </head> <body> <section> <h1>コニチワプリティア</h1> <p>ハロー、ハ ロー。ボクノナマ エハ、プリティアデス マス、ハイ。</p> </section> <script src="script.js"></script> </body> </html>
おーキレイだ（ウットリ）
お、Pの閉じタグを抜いたりしても自動的に補完されてるゾ！
ちなみにこの後、sectionをsectionsとかわざとタイプミスして実行したところ、そのまま直されなかった。まあコンポーネントなど独自のタグ名もあり得るしね。
また、pとsectionの閉じタグを入れ替えてみると…
<sections> <h1>コニチワプリティア </h1><p>ハロー、ハ ロー。ボクノナマ エハ、プリティアデス マス、ハイ。</sections> </p> <!--pとsectonの閉じタグを入れ替え-->
シンタックスエラーになった！
index.html[error] index.html: SyntaxError: Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (16:1) [error] 14 | エハ、プリティアデス [error] 15 | マス、ハイ。</section> [error] > 16 | </p> [error] | ^ [error] 17 | <script src [error] 18 | ="script.js"> [error] 19 | </script>
明らかな間違いがあると教えてくれるようだ。何行目のどこにあるか^で示してくれている。
CSSのコード整形
次にCSSファイルをコード整形してみる！
style.cssを作ってまた酷めに書き殴ったw
h1 { background: #eee; border: 1px solid red;font-size : 2em; margin:0 0 20px}
改行やインデントをめちゃめちゃにしてやったゼィ。へへへ。
フォーマット実行！さあどうだ！？
npx prettier style.css
整いました！*3
h1 { background: #eee; border: 1px solid red; font-size: 2em; margin: 0 0 20px; }
ちなみにCSSもboderとかわざとタイプミスして再実行してみたが、そのままだった。
さらにbackgroundとborderの間のセミコロン;を取ってみると…
h1 { background: #eee border: /* ←セミコロン削除 */ 1px solid red;font-size : 2em; margin:0 0 20px}
シンタックスエラーになった！
style.css[error] style.css: SyntaxError: (postcss) CssSyntaxError Missed semicolon (4:2)
[error] 2 | {
[error] 3 | background:
[error] > 4 | #eee border:
[error] | ^
[error] 5 | 1px
[error] 6 | solid red;font-size :
[error] 7 | 2em; margin:0
流石にコロン、セミコロンの区切りはちゃんと書かないとダメなんだな。
JSのコード整形
最後！JSファイルをコード整形してみよう。
script.jsを作って、また書き殴ってやる。
const goukei =(tanka, kosu,zeiritsu)=> {const keisan = tanka * kosu *zeiritsu; return keisan; }
改行しなくていいとこを改行して、改行したほうがいいとこを繋げてみた。読みにくきこと山の如し。
フォーマット実行！どや！？
npx prettier script.js
おお、またしても…キデイ*4
const goukei = (tanka, kosu, zeiritsu) => { const keisan = tanka * kosu * zeiritsu; return keisan; };
キュッと締まったボディライン♪
タイプミスがどうなるかテスト（HTMLとCSSはタイプミスは無視された）。
constをconstoと打ってみると…
{consto keisan /* constをconstoに */
お、今度はシンタックスエラーになった。
script.js[error] script.js: SyntaxError: Unexpected token, expected ";" (5:10)
[error] 3 | goukei =(tanka,
[error] 4 | kosu,zeiritsu)=>
[error] > 5 | {consto keisan
[error] | ^
[error] 6 | = tanka
[error] 7 | * kosu
[error] 8 | *zeiritsu; return keisan;
JSの場合は途中にタイプミスがあると次の処理に進めないため、HTMLやCSSより厳密なんだろうな。
最後に
という事でPrettierでHTML、CSS、JSのコードを整形してみました。大きなエラーは教えてくれるし、コードが読みやすくなりました。（ESLintはもっと厳密にエラーチェックしてくれるが、反面、コードの体裁については指摘がない）
それぞれの良し悪しがあって分野が異なるツールという印象。干渉させずに併用するには工夫が必要そうなので調べていきたく思います。
次回はフロントエンドでテスト駆動開発！Jestにトライ。それではまた！
Web開発環境まとめ
qiita.com
