Search code examples
visual-studio-codeprettier

VS-Code Prettier Format On Save doesn't work

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:

enter image description here]

  • I have my format on save checked in Settings:

Format on save

  • Format Document, Format Selection and Format 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
},
  1. My Dev dependencies include:
    "eslint-config-prettier": "^6.5.0",
    "eslint-plugin-prettier": "^3.1.2",
    "prettier-eslint": "^9.0.0",
  1. I have a prettier.config.js file
  2. 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!

Solution

  • 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!