【VSCode】Prettierを使ってHTMLに書かれたPHPも整える

WordPressのテーマを制作しているときなどはHTMLの中に直接PHPのコードを書いていきますが、PrettierではPHPのファイルのフォーマットができません。

まぁそもそもフォーマッターを使う人がそこまで多くないかもしれませんが、HTMLの中に書かれたPHPもフォーマットしたいときにはかなり役に立つはずです。

大前提として、VSCodeでコーディングしていて、さらに拡張機能のPrettierを使ってフォーマットしたい方に向けた記事です。

CONTENTS

フォーマッターとは？
VSCodeにフォーマッターをインストールする
フォーマッターを設定する
- デフォルトのフォーマッターを無効化する
- ファイル別にフォーマッターを設定する
上書きしたら自動でフォーマットさせる
さいごに

WordPressの表示速度No1！
初心者からからプロフェッショナルまで使えるロリポップサーバーは月額550円から！

フォーマッターとは？

そもそもフォーマッターとは、書いたコードの見栄えを整えてくれるものです。

コーディングは人によってクセというものが出るものなので、Aさんが書いたものは見やすいけどBさんが書いたものは見にくい…なんてことが起こってしまいます。

そういった、コーディングする人の差異を無くしてみましょう！というのがフォーマッターの役割ですね。

例えば適当に書いたコードはこんな感じ。

<main class="post">
<div class="eyecatch">
    <?php the_post_thumbnail('full'); ?>
<div class="eyecatch-plus"><button></button></div>
</div>
<div class="article">
    <div class="title-container">
    <div class="title"><?php the_title( ); ?></div>
    <div class="cat">
        <?php $categories = get_the_category(); if ( $categories ) { echo $categories[0]->name;} ?> WORKS
    </div>
    </div>
<?php the_content(); ?>
</div>
</main>

これをフォーマットするとこんな感じになります。

<main class="post">
    <div class="eyecatch">
        <?php the_post_thumbnail('full'); ?>
        <div class="eyecatch-plus"><button></button></div>
    </div>
    <div class="article">
        <div class="title-container">
            <div class="title"><?php the_title(); ?></div>
            <div class="cat">
                <?php $categories = get_the_category();
                if ($categories) {
                    echo $categories[0]->name;
                } ?> WORKS
            </div>
        </div>
        <?php the_content(); ?>
    </div>
</main>

おぉー！これは美しい！

…となるわけですね。

コードが見やすくなるので、コーディングのミスにも役立ちそうな気がします。

まぁ気のせいかもしれませんけど。