【VSCode】PrettierでHTMLやCSSのファイル保存時に自動でコードを整形する

Prettier(プリティア)は、HTMLやCSSを書いてファイルを保存するだけで自動でコードを整形してくれる人気のコードフォーマッターです。

例えばこんな感じで書かれたSCSSファイルがあったとします。

.container {
    max-width:80rem;
    display: flex;
    justify-content: center;
    gap:1rem;

ul {
    list-style: none;

li { 
width:calc(100% / 4);
background: #4d909c;

a {
    display: block;
    color:#f2e9e9;
}
}
}
}

インデントがかなり雑ですが、PrettierがあればこのファイルをCtrl+Sで上書き保存するだけで下記のように整形してくれます。

.container {
  max-width: 80rem;
  display: flex;
  justify-content: center;
  gap: 1rem;

  ul {
    list-style: none;

    li {
      width: calc(100% / 4);
      background: #4d909c;

      a {
        display: block;
        color: #f2e9e9;
      }
    }
  }
}

美しく整形されましたね！

Prettierでコードの自動整形を行うには事前に設定が必要ですので、ぜひ、やってみましょう。

設定時間は1分あれば充分です。

CONTENTS

Prettierをインストールする
Default Formatterの設定
Format On Saveの設定

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

Prettierをインストールする

Prettierはインストールする必要があるので、下記からマーケットプレイスにアクセスします。

Prettier – Code formatter – Visual Studio Marketplace

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

「Install」と書かれたボタンをクリックして、VSCodeにインストールしてください。

Default Formatterの設定

インストールが終わったらDefault Formatterの設定をします。Ctrl+,のショートカットで設定画面が開きますので、上部の検索ウインドウに「Default Formatter」と入力して、「Editor: Default Formatter」の項目を「None」から「Prettier – Code formatter」に変更します。