クモのようにコツコツと

フロントエンドエンジニア イイダリョウのブログ。略称「クモコツ」

【コードフォーマッター】PrettierでHTML、CSS、JSのコードを整形してみた

フロントエンド開発環境の続きです。前回はESLintでコードチェックをしてみました。今回はコードフォーマッター「Prettier」でコードの整形をしてみます。JSだけでなくHTML、CSSなどもできるみたい。それでは行きまっしょい!

【目次】

※参考:【JS】ESLintで構文チェックを事始める - クモのようにコツコツと

Web開発環境まとめ
qiita.com

Chromeデベロッパーツールの整形ツール

Prettier(プリティアと読むのかな?プリキュアみたいw)はコード整形ツール。ESLintはコードの構文をチェックして指摘してくれたが、Prettierはそれを修正する部分まで行ってくれる。

コード整形ツールとは何か。似たような機能はChromeのデベロッパーツールにもついている。

「Sources」パネルでjQueryのミニファイ(最小化)ファイルをみると改行がなくて読みにくい。

f:id:idr_zz:20200123223923j:plain

左下の波カッコアイコン{ }が整形ツール。これをクリックすると…

f:id:idr_zz:20200123224006j:plain

適切な改行とインデント(字下げ)が入ってコードが読みやすくなる!*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と同様にファイル名を書けば実行してくれる。

※参考:prettierの使い方 - Qiita

早速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の閉じタグを抜いたりしても自動的に補完されてるゾ!

ちなみにこの後、sectionsectionsとかわざとタイプミスして実行したところ、そのまま直されなかった。まあコンポーネントなど独自のタグ名もあり得るしね。

また、psectionの閉じタグを入れ替えてみると…

<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とかわざとタイプミスして再実行してみたが、そのままだった。

さらにbackgroundborderの間のセミコロン;を取ってみると…

    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はタイプミスは無視された)。

constconstoと打ってみると…

 {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

*1:テキストエディタにも整形機能があったりする

*2:インデントや改行の不統一などのノイズがない

*3:ねづっちです

*4:ウォーフォール