はじめに
VSCodeは便利な拡張機能がたくさん公開されている。
prettierもそのひとつだ。prettierがあれば自動でコードをきれいな形に整形してくれる。
今回はprettierの設定をいくつか自分用にまとめてみる。
Default Formatterの設定
OSがWindowsなら、VSCodeでドキュメントを開いている状態で右クリックすると、
「ドキュメントのフォーマット」が選択可能になっていると思う。
ただ、デフォルトのフォーマッタを設定していないと、以下のようにフォーマッタの選択が表示される
いちいち選択するのも利便性に欠ける。
なので、デフォルトのフォーマッタを設定しておく。
手順
1.ファイル＞ユーザー設定 から「設定」を開く
2.検索欄に「default formatter」と入力する
3.候補から「Prettier - Code formatter」を選択する
これでデフォルトのフォーマッタをprettierに設定することができた！
Format On Save を有効にする
保存時にドキュメントをフォーマットするように設定する。
この設定を行うことで、ctrl + Sすれば勝手にコードを整形してくれるようにできる。
手順
1.「Default Formatterの設定」と同様の手順で、
設定の検索欄を表示させてから「Format on Save」と検索、チェックを入れる
(その他)WhiteSpaceの設定
prettierの設定っていうわけじゃないけど、WhiteSpaceもコードの見やすくしてくれそうなので設定する。
手順
1.「Default Formatterの設定」と同様の手順で、
設定の検索欄を表示させてから「whitespace」と入力、「all」を選択する。
※1 allにすると常に半角スペースがdotみたく表示される
※2 Defaultはselected。選択時のみ半角スペースをdotみたく表示させる。見にくいから嫌い
・・・便利な設定やら勉強したときの気づきがあったらまたまとめていこうと思う