More than 3 years have passed since last update.

VSCodeでファイル保存時にPrettierを走らせる方法

Posted at 2020-10-26

はじめに

macOSを新しく買ってVsCodeをインストールし直した時にファイル保存時にPrettierを走らせる設定方法を忘れてしまい半日以上溶かした。

ググってみたけど体系的にまとまった情報がなくてなかなか時間を溶かしたので

はじめての方でも、この記事を見れば「VSCodeユーザーなら誰でもファイル保存時にPrettierを走らせることができる」ようにいちから丁寧に記事を書いた。

VSCodeからインストールする方法とブラウザからインストールする方法がある。

VSCodeを立ち上げて、Prettier -Code formatter の拡張機能タブが表示されたら、［インストール］ボタンをクリックする。これでPrettierが有効になります。

VSCodeからではなく以下のリンクから「install」ボタンをクリックしてもいけます。
Prettier

下の画像のように、VSCodeのインストール済みのところにあればOK。

まず、VSCodeの設定画面を開く

開くには画面左下のアイコンから「Settings」を選択すればいい

ちなみにショートカットキーを使えば一発で開けるので参考まで
(macOSの場合 : 「 command + , 」 windowsの場合 : 「 ctrl + , 」）

次に「defaultformatter」と検索する

最後に「Default Formatter」を「null」から「esbenp.prettier-vscode」に変更する

VSCodeの設定画面を開き「save」と検索する

次に「Format On Save」にチェックマークを入れる

#4 Settings及びPluginを反映させる為にいったん画面をReloadする

これをやらないと設定が反映されないから注意！

「command + shift + P」でコマンドパレットを開き
「Reload Window」をクリックして画面をリロードさせる

（windowsの場合「ctrl + shift + P」でコマンドパレットを開ける）

これでファイル保存時にPrettierが走るはず。Just do it！