VSCodeで保存時にPrettierのフォーマットが機能しない問題の解決方法

2024-02-10 02:38 VSCode prettier フォーマット

  1. Prettierの設定を確認する: まず、VSCodeの設定でPrettierの設定を確認してみてください。設定は「settings.json」ファイルで行うことができます。以下の手順で設定を確認します。

    • 「ファイル」メニューから「基本設定」→「設定」を選択します。
    • 右上の歯車アイコンをクリックして「settings.json」を選択します。
    • 検索バーに「prettier」を入力し、Prettierの関連設定を探します。
    • 必要に応じて、Prettierの設定を変更します。例えば、フォーマットのスタイルやファイルの保存時に自動フォーマットを有効にするかどうかなどです。

  2. Prettierの拡張機能を確認する: VSCodeにPrettierの拡張機能が正しくインストールされているか確認してください。以下の手順で確認します。

    • 「表示」メニューから「拡張機能」を選択します。
    • 検索バーに「Prettier」を入力して、Prettierの拡張機能が表示されるか確認します。
    • インストールされていない場合は、拡張機能の一覧から「Prettier - Code formatter」を探してインストールします。

  3. ファイルの保存時にPrettierを実行する設定: VSCodeの設定で、ファイルを保存するときにPrettierを自動的に実行するように設定する方法もあります。以下の手順で設定します。

    • 「ファイル」メニューから「基本設定」→「設定」を選択します。
    • 右上の歯車アイコンをクリックして「settings.json」を選択します。
    • 「settings.json」ファイルに以下の設定を追加します。
"editor.formatOnSave": true,
"[javascript]": {
    "editor.formatOnSave": false
},
"[javascriptreact]": {
    "editor.formatOnSave": false
},
"[typescript]": {
    "editor.formatOnSave": false
},
"[typescriptreact]": {
    "editor.formatOnSave": false
}

上記の設定では、デフォルトでファイルの保存時にPrettierが実行されますが、JavaScriptやTypeScriptのファイルでは無効になります。必要に応じて、言語ごとに設定を変更してください。

  1. VSCodeの再起動: 設定変更後は、VSCodeを再起動して変更が反映されるようにしてください。