7

I have installed prettier extension for VS Code, set it as default formatter, also set format on save to true in VS Code's settings file, and files are set to be saved automatically after some time delay.

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"files.autoSave": "afterDelay"

But prettier is not formatting my code when file is saved automatically after 2 seconds delay. Code is only formatted if i:

  • manually format the code using option + Shift + F keyboard shortcut.
  • press command + S

Here's my .prettierrc file

{
    "trailingComma": "es5",
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true
}

How can i make prettier format my code automatically on file save?

Yousaf
  • 27,861
  • 6
  • 44
  • 69

1 Answers1

16

After some searching, i found out that the following setting

"editor.formatOnSave": true

only works if:

  • Code formatter is available.
  • The files are NOT set to be saved after a delay.
  • And the editor must not be shutting down.

I had set the prettier as the default formatter using the following setting:

"editor.defaultFormatter": "esbenp.prettier-vscode"

But I had set files to be saved automatically after a delay as specified in the following setting:

"files.autoSave": "afterDelay"

This setting was the cause of the problem in my case.

"files.autoSave" setting can have one of the following values:

  • "off": A dirty editor is never automatically saved.
  • "afterDelay": A dirty editor is automatically saved after the configured files.autoSaveDelay.
  • "onFocusChange": A dirty editor is automatically saved when the editor loses focus.
  • "onWindowChange": A dirty editor is automatically saved when the window loses focus.

Setting "files.autoSave" to any possible value other than "afterDelay" will fix the issue. I solved this issue by setting "files.autoSave" to "onFocusChange".

Yousaf
  • 27,861
  • 6
  • 44
  • 69
  • Still doesn't work. ```{ "semi": false, "singleQuote": true, "arrowParens": "avoid", "bracketSpacing": true, "trailingComma": "es5", "useTabs": true, "tabWidth": 4 } ``` – Tanmai Sharma Oct 17 '20 at 09:41
  • @TanmaiSharma _"Still doesn't work"_ - hard to help you with only that much information. Can you describe what is the current behavior you are experiencing with prettier? Does it formats the file when you manually save the file? Have you installed the prettier extension? – Yousaf Oct 17 '20 at 10:20
  • 1
    I have done everything possible to make it work. Extension installed, settings are as above.When I manually save the file , it doesn't format. – Tanmai Sharma Oct 18 '20 at 20:58
  • 7
    Edit- But just appended "editor.defaultFormatter": "esbenp.prettier-vscode" and now seems to work fine. Thanks. – Tanmai Sharma Oct 18 '20 at 21:16
  • 3
    has anyone figured out a way to get it to save on afterDelay? – Andrew Aug 24 '21 at 05:29
  • But how to make prettier work while auto save after delay is enabled ? It would be helpful. – realdeb Dec 30 '22 at 03:31