VS-Code Prettier Format On Save doesn't work

Question

For about a month now, my Prettier extension has stopped working as it normally does. Most notably - format on save does not work. Other notes:

• Format on typing a ; works

• I get this error type symbol in the status bar next to the Prettier button - I can't find any reference to this relating to Prettier on Google:

  ]

• I have my format on save checked in Settings:

  

• 'Format Document,Format SelectionandFormat Document with` command palette options all do nothing

• Timing of the break coincides with moving from Prettier 2-3

• I've followed the migration steps and think all is in order. Some snippets of the configuration between eslint and prettier that I have:

  1. As per the prettier documentation, my VS Code settings has:

"eslint.autoFixOnSave": true, // (even though VSCode has this as deprecated), have tried with and without this line
"editor.codeActionsOnSave": {
  "source.organizeImports": true,
  "source.fixAll.eslint": true
},

2. My Dev dependencies include:

    "eslint-config-prettier": "^6.5.0",
    "eslint-plugin-prettier": "^3.1.2",
    "prettier-eslint": "^9.0.0",

3. I have a prettier.config.js file
4. My .eslintrc.js file includes:

extends: ['airbnb', 'prettier'],
plugins: ['react', 'jsx-a11y', 'import', 'react-hooks', 'plugin:prettier/recommended'],

Anyone have any idea on how to fix this or further debugging tests to do here? It's driving me nuts!

Answer 1

Follow these steps:

1. CTRL + SHIFT + P
2. Format Document (in pop-up bar)
3. Select Format Document
4. Select Configure Default Formatter...
5. Select Prettier - Code formatter

Done!