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:

enter image description here]

Format on save

  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!