今回は、VSCodeの拡張機能である「Prettier」の使い方を紹介します！
「Prettier」は自動でソースコードを整形してくれるので、開発においてかなり便利です。
無料で使えて、且つ開発効率も上がるので、VSCodeを使っている人は、是非試してみてください！
Prettierとは？
「Prettier」とは、自動でソースコードを整形してくれるVSCodeの拡張機能のことです。
自動でタブのサイズや位置、改行の余白も整形してくれます。
HTML・CSS・JavaScriptのフロントエンド側の言語で使用でき、その他にもRubyやPHPでも使うことができますよ。
Prettierを使うことで、自動でソースコードを整えることができるので、作業効率が上がること間違いなし！
VSCodeを使っている人は、使わない選択はないですね！
Prettierの使い方について
これからPrettierの使い方について紹介していきます！
手順は、以下の3ステップ。
① インストール
② 設定
③ 実行
簡単なので、当ブログをきっかけに、Prettierを使ってみましょう！
① インストール
VSCodeの拡張機能である「Prettier」をインストールしていきます。
まずは、VSCodeを開いて、以下の画像の①〜③の手順を踏んでください！
そして、「インストール」のボタンをクリック！
これで「Prettier」のインストールは完了です！
② 設定
次は、「Prettier」の設定をしていきましょう！
まずは、以下の画像の①〜②の手順を踏んでください。
そして、「onsave」と検索して、「Editor: Format On Save」にチェックマークを入れます。
これで「Prettier」の設定は終了です！
③ 実行
「Prettier」のインストールと設定が終わったので、最後に「Prettier」を使ってみましょう！
適当にVSCodeでファイルを開いてください。
今回は、「test」というファイルを用意しました。
ファイルを用意したら、HTMLのコードに余白を入れて崩していきます。
崩れたコードを、これから自動形成していきます！
一番上の検索メニューから、「ファイル」を検索します！
出てきたメニューの中から、「保存」をクリック！
すると、先ほど崩れていたコードが、自動で綺麗に整えられました！
Macの場合だと、「command ＋ S」のショートカットキーでも、コードを自動形成することができます。
「Prettier」を使うことで、このように自動でコードを整えてくれます。
いちいち手打ちでコードを直していく必要がないので、かなり効率的にコーディングすることが出来ますよ！
まとめ
以上が、「Prettierの使い方について」でした！
かなり便利で、効率的に開発することができるので、是非試してみてください！
これからもWEB制作で学んだことをブログで発信していくので、よろしくお願いします〜。
