【VSCode】Prettierで保存時に自動整形されない場合の対処法｜Format on Saveの設定

みなさんこんにちは。

VSCodeでJavaScriptなどのコードを編集していると、Prettierをインストールしたのに、ファイルを保存しても自動整形されないことがあります。

私も設定を見直す際、拡張機能のインストールだけでなく、保存時の整形や既定のフォーマッターが正しく指定されているかを確認することがあります。

今回は、Prettierで保存時にコードが自動整形されない場合の対処法についてご紹介したいと思います。

この記事はこんな人におすすめ

この記事はこんな人におすすめです！

• Prettierを入れたのに保存時に整形されない人
• Format on Saveの設定方法を知りたい人
• JavaScriptなど特定の言語だけ整形されない人

といったところでしょうか。

Prettierが有効になっているか確認する

まずは、VSCodeで Ctrl + Shift + X を押して拡張機能を開いてください。

検索欄に「Prettier」と入力し、Prettier – Code formatter（識別子：esbenp.prettier-vscode）がインストールされ、有効になっているか確認します。

「インストール」と表示されていればインストールし、「有効にする」と表示されていれば有効にしてください。

Format on Saveを有効にする

次に、Ctrl + , でVSCodeの設定画面を開きます。

検索欄に Format On Save と入力し、Editor: Format On Save にチェックを入れてください。

この項目が無効の場合、ファイルを保存しても自動整形されません。

なお、設定画面の「ユーザー」と「ワークスペース」で値が異なる場合は、対象プロジェクトの設定も確認してください。

既定のフォーマッターをPrettierにする

Format on Saveが有効でも、別のフォーマッターが選ばれていると、Prettierによる整形が実行されない場合があります。

設定画面で Default Formatter と検索し、Editor: Default Formatter から「Prettier – Code formatter」を選択してください。

設定をJSONで確認したい場合は、Ctrl + Shift + P から「Preferences: Open User Settings (JSON)」を開きます。

次の設定が基本となります。

すでに settings.json に設定がある場合は、内容を消さず、既存のJSONに必要な項目だけ追加してください。

特定の言語だけ整形されない場合

JavaScriptだけ整形されない場合は、言語別設定が優先されていないか確認してください。

例えば、次のように指定すればJavaScriptファイルでPrettierを使用できます。

※上記は settings.json 内へ追加する項目の例です。既存の設定と区切るカンマなどに注意してください。TypeScriptの場合は [typescript] に変更します。

実際に保存して動作確認する

最後に、VSCodeで sample.js というファイルを作成し、以下のコードを入力してください。

const user={name:"Taro",age:20}

Ctrl + S で保存すると、Prettierの標準設定では次のように整形されます。

const user = { name: "Taro", age: 20 };

それでも動かない場合は、Ctrl + Shift + P から「Format Document With…」を実行して、Prettierを選べるか確認してください。

あわせて、ワークスペースの設定、.prettierignore、prettier.requireConfig の値も確認しましょう。prettier.requireConfig が true の場合、原則としてPrettierの設定ファイルが必要です。

最後に

いかがでしたでしょうか。

今回は、Prettierで保存時に自動整形されない場合の対処法についてご紹介しました。

「Format on Save」と「Default Formatter」の両方を確認することがポイントとなります。言語別設定も含めて見直してみてください。

少しでも参考になれば幸いです。

開発依頼について

ココナラでWebスクレイピング開発サービスを出品しております。

自分で開発をしようと思ったけど、VBAでのネット記事が少なく困っている方も多いかと思います。

そんな方はいつでもお気軽にご相談ください。

また、本ブログからご依頼いただいた方については割引特典がございますので、

ご不明点と合わせてメッセージをいただけると幸いです。

Webスクレイピング以外にもWebアプリの開発サービスも出品しております。

こちらについても、本ブログからご依頼いただいた方については割引特典がございますので、

お気軽にご相談ください。

ご興味がある方はこちら！！

@KP16Wt9UOB97870