こんにちは、プロクラスの國府です。
自動整形フォーマッターをプロジェクトで導入してみたところ、
めちゃくちゃ便利だったのでPrettierプラグインの使い方をご紹介したいと思います
Prettierとは
Prettierとは、ソースコードを自動で整形してくれるツールです。
ソースを保存すると自動で整形してくれるため、タブのサイズや位置、さらにセミコロンやシングルクォーテーションなども整形してくれます。
主なフロントエンド開発に対応しているため、静的なHTML、CSS、JS（jQuery）での開発時にも、かなり使えますし、
JSのフレームワーク、vue.jsやAngularでの開発時にもオススメです。
自動整形イメージ
インデントが一切ないソースでも、ソースを保存（Ctrl+s）するとキレイなコードになります。
整形されていないコードを、コピペした後も保存をすればキレイになるので、個人的にはこれがかなり嬉しいです。
Prettierの使い方
Prettierの使い方はすごく簡単です。
プラグインをインストールし、少し設定をすればすぐにでも使えるようになります。
インストール方法
まずは、VSCodeにPrettierプラグインをインストールします。下記の手順で進めればサクッとインストールが可能です。
①をクリックし、プラグインをインストール画面を開きます。
②へ「Prettier」を入力する
③1番上に表示される「Prettier – Code formatter」をクリックする
④「インストール」をクリックする
※画像は既にインストール済みのため「アンイストール」と表示されています
これでPrettierプラグインが、VSCodeへインストールされました。
設定方法
次にPrettierフォーマッターの設定をしていきます。
保存時の自動フォーマッター設定
▲左下の歯車アイコンをクリックし、設定画面を開きます。
保存時に自動でフォーマットをかけるには、このように設定します。
▲「save」と入力すると、「Editor:Format On Save」が表示されるのでチェックを入れます。
これで保存時に自動でフォーマッターが動くようになります
オススメの設定
▲タブサイズやセミコロンの有無設定等の詳細な設定は、プロジェクトのルート直下に「.prettierrc」ファイルを作成し、JSON形式で設定してきます。
作成した「.prettierrc」ファイルに、上記をコピー＆ペーストし保存します。自動整形したいファイルで保存をすると、自動整形ができるようになります。
なお、自動フォーマットがされない場合は、ファイルを開き直すもしくは、VSCode再起動するとできるようになります。
以下、オススメ設定の内容になります
デフォルトの設定
「.prettierrc」ファイルを作成していない場合は、上記の設定が適用されます。
以上、vscodeにprettierを設定する方法をご紹介いたしました。