PrettierはVSCodeのプラグインの1種です。
フォーマッターと呼ばれるもので、ある規則に基づいてコードを整形してくれます。
各人の書き方のクセなどによって見づらいコードになることを防ぐことができるため、
WEB制作会社のチーム開発でも普通に使われるプラグインです。
ですが、Prettierは入れただけでは機能しません。
以下の2つの設定をする必要があります。
- Prettierをデフォルトのフォーマッターに設定
- 保存(Ctl+S)時に、コードを自動整形
2の自動保存設定はせず、任意のタイミングでコマンドを打ち込んで整形することもできますが、
普通にメンドいので保存時に勝手に整形される設定を推奨します。
Prettierの初期設定の方法
やり方です。
やり方は「設定」から設定する方法と、setting.jsonに直書きする方法の2パターンがあります。
今回は初心者にも分かりやすく「設定」から進めるやり方を説明します。
まず、VSCodeの画面左上にある⚙マークを押し、「設定」をクリックして設定を開きます。
設定が開けたら、設定内の検索窓に「formatter」と打ち込んで検索します。
一番上に「Default formatter」という項目が出てくると思います。
その設定を「なし」から「Prettier」に変更します。
※ここでPrettierが候補として出てこない人はそもそも「Prettier」のプラグイン自体をインストールしていないので、Prettierをインストールしてから戻ってきてください。
これで、デフォルトのフォーマッターとしてPrettierを登録できました。
続いて、保存（Ctl＋S）時に自動で整形してくれる設定をします。
今度は設定の検索で、「format on save」と入力してください。
一番上に「Format On Save」という項目が出ると思うので、それにチェックを入れます。
これで設定が完了です。
VScodeの設定は自動保存されるので、「保存」などのボタンを押す必要はありません。
VSCodeを再起動してみて、Ctl＋Sで整形されるようになっていれば成功です。
コメント