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分あれば充分です。
Prettierをインストールする
Prettierはインストールする必要があるので、下記からマーケットプレイスにアクセスします。
「Install」と書かれたボタンをクリックして、VSCodeにインストールしてください。
Default Formatterの設定
インストールが終わったらDefault Formatterの設定をします。Ctrl+,
のショートカットで設定画面が開きますので、上部の検索ウインドウに「Default Formatter」と入力して、「Editor: Default Formatter」の項目を「None」から「Prettier – Code formatter」に変更します。
Format On Saveの設定
次にFormat On Saveの設定をします。先ほどと同じように上部の検索ウインドウに「Format On Save」と入力して、「Editor: Format On Save」にチェックを入れておきます。
これで、ファイルを保存したときに自動でPrettierが実行されてコードを自動整形してくれるようになります。