【VSCode】ソースコードを自動フォーマットするPrettierのセットアップ方法

こんにちは！CodeClub965のKです！

今回は、VSCodeで自動フォーマットをやってくれるPrettierのセットアップ方法について書きます。

Prettierとは？

Prettierとは、VSCodeでソースコードを自動で整形してくれるツールのことです。
設定すれば、ソースを保存するときに自動で整形してくれます。

タブの位置や、セミコロン、シングルクォーテーションなども整形してくれるので非常に便利です。

主にフロントエンド開発に対応しているため、HTML、CSS、JavaScript（jQuery）での開発に使えますし、JavaScriptのフレームワークであるvue.jsやAngularでの開発でもオススメです。

設定手順

基本的にはインストールして、少し設定すれば使えます。
以下に手順を書いておきます。

まずは、VS CodeにPrettierプラグインをインストール

VSCodeの拡張機能で「Prettier」を検索しインストールします。
検索したら、「Prettier – Code formatter」があると思いますので、それをインストールして下さい。

以下の画像のプラグインです。

保存時の自動フォーマット設定を行う

基本的にはインストールすれば使えるのですが、コードを保存するときにフォーマットしてくれるように設定した方が便利なので設定しておきましょう。

1. まず、VSCode左下の歯車アイコンから設定をクリック（「command + ,」でもOK）

2. 設定画面の検索バーに「save」と入力し、「Editor:Format On Save」にチェックを入れる

基本的にはこれでOKです。

もし自動フォーマットが動かなかったら..

補足として、prettierのパスがvscodeに渡っていないのが原因で、自動フォーマットが機能しない場合があります。
その場合、以下の手順を試してみて下さい。

1. 以下のコマンドをターミナルで叩く

npm i prettier -g

2. VSCode左下の歯車アイコンから設定をクリック（「command + ,」でもOK）

3. 設定画面の検索バーに「prettier path」と入力

4. Prettier Path の項目に、「/usr/local/lib/node_modules/prettier」を入力

5. VSCodeを再起動し、ファイル保存時に自動フォーマットされることを確認する

これで、動かない場合は別の原因を探す必要があります。

最後に

今回はVSCodeで自動フォーマットをしてくれるPrettierのセットアップ方法について解説しました！

とても便利なプラグインなのでぜひインストールして試してみて下さい！

それでは、また！

Follow me!