VSCodeでファイル保存時にPrettierを走らせる方法
はじめに
macOSを新しく買ってVsCodeを
インストールし直した時に
ファイル保存時にPrettierを走らせる
設定方法を忘れてしまい半日以上溶かした。
ググってみたけど体系的にまとまった情報が
なくてなかなか自分が時間を溶かしたので
はじめての方でも、この記事を見れば
VSCodeユーザーなら誰でもファイル保存時にPrettierでフォーマットを効かせることができる
ようにいちから丁寧に記事を書きました。
対象読者
- VSCodeを使用しているエンジニア
- ファイル保存時にPrettierでフォーマットできなくて悩んでいる人
目次
結論、下記4つの工程で設定は完了します！
- PrettierをVSCodeにインストールする
- defaultFormatterの設定を変更する
- Format On Saveにチェックを入れる
- Settings及びPluginを反映させる為にいったん画面をReloadする
1. PrettierをVSCodeにインストールする
Prettier を VSCode にインストールする方法は2つの方法があります
- VSCodeからインストールする方法
- ブラウザからインストールする方法
VSCodeからインストールする方法
VSCodeを立ち上げて、Prettier -Code formatter の拡張機能タブが表示されたら、［インストール］ボタンをクリックします。
これで「Prettier」が有効になります。
ブラウザからインストールする方法
ブラウザから行う場合は、Prettier を開き、installボタンをクリックすればOKです。
どちらの方法でインストールするにせよ
以下の画像のように、VSCodeの
インストール済みのところにあればOKです！
2. defaultFormatterの設定を変更する
まず、VSCodeの設定画面を開きます
開くには画面左下の「設定アイコン」から「Settings」を選択すればOKです
ちなみに、ショートカットキーを
使えば一発で開けるので参考まで
- macOSの場合 :
command + , - windowsの場合 :
ctrl + ,
ショートカットキーを使用すると
以下の画像のような画面が表示されます↓
次に「defaultformatter」と検索します
最後に「Default Formatter」を「null」から「esbenp.prettier-vscode」に変更します
3. Format On Saveにチェックを入れる
VSCodeの設定画面を開き「save」と検索します
次に「Format On Save」にチェックマークを入れます
4. Settings及びPluginを反映させる為にいったん画面をReloadする
最後のこれをやらないと上記工程で行った
設定が反映されないので注意してください！
command + shift + P でコマンドパレットを開き、Reload Window をクリックしてVS Codeの画面をリロードさせましょう！！
（windowsの場合、ctrl + shift + P でコマンドパレットを開けます）
まとめ
これでファイル保存時にPrettierが走るはず。Just do it！
Discussion
この記事とっても助かりました。感謝。
ありがとうございます！
それであればよかったです！