🔰VSCodeにPrettierを導入する🔰

はじめに

プログラミング学習中の@kat_logと申します。
コード整形ツールのPrettierを、機能する状態まで設定したため方法を残しておきます🙇
（インストールするだけで全く使っていませんでした、、、）

結論

VSCodeにてインストール後、設定が2つ必要でした

設定

行っていきます！

0.インストール（既に入れている方は飛ばしてください）

1. VSCodeの拡張機能を開く（ショートカット：Shift＋⌘＋Xキー）
2. 「Prettier」と検索
3. トップにヒットする「Prettier - Code formatter」をインストールする

（参考画像）

これを入れるだけで良いという訳では無かったです💦

1.Format On Saveを有効にする

1. VSCodeの設定を開く（ショートカット：⌘＋,キー）
2. 「Format On Save」と検索
3. Editor: Format On Saveのチェックを付ける☑

（参考画像）

2.Default FormatterをPrettierに設定する

1. VSCodeの設定を開く（ショートカット：⌘＋,キー）
2. 「Default Formatter」と検索
3. Editor: Default Formatterに「Prettier - Code formatter」を選択する

（参考画像）

以上です！
これにてファイルを保存したタイミングでコードが自動で整形されるようになります！🙌🎉🎉🎉

（おまけ）任意のタイミングで自動整形を走らせたい場合

上記設定にて、ファイル保存時の自動整形が動きますが、shift + ⌥ + Fにて任意のタイミングで整形することもできるようです！

おわりに

お読みいただきありがとうございました。
自分と同じく学習中の方の参考になれば嬉しいです。
一緒に頑張っていきましょう〜😄

参考